Wer die bunten Info-, Tipp-, Notiz- und Warnungs-Panels aus Confluence kennt, möchte sie in einem anderen Wiki-System nicht missen. Sie heben wichtige Inhalte vom Fließtext ab und lenken die Aufmerksamkeit genau dorthin, wo sie gebraucht wird.
MediaWiki bringt diese Funktion leider nicht von Haus aus mit, zumindest nicht direkt. Sie lässt sich aber mit sehr geringem Aufwand über Vorlagen nachbauen. Einmal eingerichtet, stehen die Panels allen Wiki-Nutzer:innen sofort zur Verfügung.
Technische Umsetzung
In MediaWiki werden solche Boxen über das Vorlagensystem realisiert, wobei “Vorlage” hier etwas anderes bedeutet als in Confluence. Confluence-Vorlagen sind Seitenvorlagen: Sie dienen als Startpunkt beim Erstellen einer neuen Seite und sind danach nicht mehr mit ihr verknüpft. MediaWiki-Vorlagen funktionieren eher wie wiederverwendbare Bausteine: Sie können beliebig oft an beliebigen Stellen einer Seite eingebunden werden. Eine Vorlage ist technisch gesehen eine eigene Wiki-Seite, deren Inhalt überall dort erscheint, wo sie aufgerufen wird.
Technisch spricht man von Transklusion: Die Vorlage wird nicht kopiert, sondern zur Anzeigezeit eingebunden. Das bedeutet: Wer die Vorlage später anpasst, sieht diese Änderung sofort auf allen Seiten, die die Vorlage verwenden. Kein manuelles Nachpflegen einzelner Seiten.
Für jede Box-Art, zum Beispiel Hinweis, Tipp oder Warnung, wird einmalig eine eigene Vorlage angelegt.
Für eine komfortable Nutzung im visuellen Editor empfiehlt sich zusätzlich die Extension TemplateData. Sie ist ab MediaWiki 1.35 standardmäßig installiert und muss lediglich aktiviert sein. Ob sie in deinem Wiki bereits aktiv ist und welche MediaWiki-Version im Einsatz ist, lässt sich unter Spezial:Version nachvollziehen.
Ohne TemplateData funktionieren die Vorlagen zwar auch, mit ihr erscheint beim Einfügen jedoch ein hilfreiches Formularfeld mit Beschriftung (siehe Verwendung im Wiki), statt eines unbeschrifteten Parameters.
Einrichtung der Vorlagen
Die – in meinem Beispiel drei – Vorlagen werden als separate Wiki-Seiten im Namensraum “Vorlage” angelegt: Vorlage:Hinweis, Vorlage:Tipp und Vorlage:Warnung. In einer Standardinstallation kann das jede Person, die auch normale Seiten bearbeiten darf.
Den vollständigen Code für jede Vorlage inklusive Dokumentation und TemplateData-Block findest du jeweils ausgeklappt; einfach kopieren und auf der entsprechenden, zu erstellenden Vorlagen-Seite einfügen:
Vorlage:Hinweis – Code einblenden (blau – für Informationen, die nicht übersehen werden sollten)
<includeonly><div style="margin: 0.8em 0; padding: 0.75em 1em; border-left: 4px solid #3a87ad; background-color: #daeaf7; color: #1a1a1a; border-radius: 2px;">
<span style="font-weight: bold; color: #2a6496;">Hinweis</span><br>{{{text|{{{1|}}}}}}</div></includeonly><noinclude>
== Verwendung ==
'''Visueller Editor:''' Über "Einfügen → Vorlage", Vorlagenname eingeben und Text ins Formularfeld eintragen.
'''Quelltextbearbeitung:'''
<pre>{{Hinweis|Dein Text hier.}}</pre>
oder
<pre>{{Hinweis|text=Dein Text hier.}}</pre>
== Beispiel ==
{{Hinweis|Dies ist ein Hinweis.}}
<templatedata>
{
"description": "Zeigt einen allgemeinen Hinweis in einer blauen Box an.",
"params": {
"text": {
"label": "Text",
"description": "Der Inhalt des Hinweises.",
"type": "string",
"required": false,
"suggested": true,
"aliases": ["1"]
}
}
}
</templatedata>
[[Kategorie:Vorlage]]
</noinclude>Vorlage:Tipp – Code einblenden (grün – für Empfehlungen und hilfreiche Ergänzungen)
<includeonly><div style="margin: 0.8em 0; padding: 0.75em 1em; border-left: 4px solid #4cae4c; background-color: #dff0d8; color: #1a1a1a; border-radius: 2px;">
<span style="font-weight: bold; color: #2d6a2d;">Tipp</span><br>{{{text|{{{1|}}}}}}</div></includeonly><noinclude>
== Verwendung ==
'''Visueller Editor:''' Über "Einfügen → Vorlage", Vorlagenname eingeben und Text ins Formularfeld eintragen.
'''Quelltextbearbeitung:'''
<pre>{{Tipp|Dein Text hier.}}</pre>
oder
<pre>{{Tipp|text=Dein Text hier.}}</pre>
== Beispiel ==
{{Tipp|Dies ist ein Tipp.}}
<templatedata>
{
"description": "Zeigt einen Tipp oder eine Empfehlung in einer grünen Box an.",
"params": {
"text": {
"label": "Text",
"description": "Der Inhalt des Tipps.",
"type": "string",
"required": false,
"suggested": true,
"aliases": ["1"]
}
}
}
</templatedata>
[[Kategorie:Vorlage]]
</noinclude>Vorlage:Warnung – Code einblenden (rot – für kritische Hinweise mit möglichen Konsequenzen)
<includeonly><div style="margin: 0.8em 0; padding: 0.75em 1em; border-left: 4px solid #d9534f; background-color: #f2dede; color: #1a1a1a; border-radius: 2px;">
<span style="font-weight: bold; color: #a52a2a;">Warnung</span><br>{{{text|{{{1|}}}}}}</div></includeonly><noinclude>
== Verwendung ==
'''Visueller Editor:''' Über "Einfügen → Vorlage", Vorlagenname eingeben und Text ins Formularfeld eintragen.
'''Quelltextbearbeitung:'''
<pre>{{Warnung|Dein Text hier.}}</pre>
oder
<pre>{{Warnung|text=Dein Text hier.}}</pre>
== Beispiel ==
{{Warnung|Dies ist eine Warnung.}}
<templatedata>
{
"description": "Zeigt eine Warnung in einer roten Box an.",
"params": {
"text": {
"label": "Text",
"description": "Der Inhalt der Warnung.",
"type": "string",
"required": false,
"suggested": true,
"aliases": ["1"]
}
}
}
</templatedata>
[[Kategorie:Vorlage]]
</noinclude>
Verwendung der Vorlagen
Die einfachste Variante führt über den visuellen Editor: Über Einfügen → Vorlage den Vorlagennamen eingeben – also Hinweis, Tipp oder Warnung – und den gewünschten Anzeigetext ins Formularfeld eintragen. Die Box erscheint anschließend direkt an der gewählten Stelle auf der Seite.
Das Textfeld unterstützt Wikitext-Formatierung. So lassen sich etwa Teile des Textes fett hervorheben ('''fett''') oder Links einfügen.
Alternativ lässt sich die Vorlage auch direkt in der Quelltextbearbeitung einfügen:
{{Hinweis|Diese Regelung gilt ab dem '''01.01.2027'''.}}
{{Tipp|Mit SHIFT+Alt+S sparst du einen Klick beim Speichern.}}
{{Warnung|Dieser Schritt kann '''nicht rückgängig''' gemacht werden.}}Der Vorlagenname steht dabei nach den doppelten geschweiften Klammern, gefolgt von einem senkrechten Strich und dem gewünschten Text.
Ich empfehle hierfür jedoch den visuellen Editor. Er führt dich durch ein Formularfeld und du kannst nicht versehentlich die Vorlagensyntax beschädigen.
Anpassung/Erweiterung der Vorlagen
Die Vorlagen sind bewusst einfach gehalten und lassen sich bei Bedarf anpassen.
Farbe ändern
Jede Vorlage enthält drei Farbwerte, die aufeinander abgestimmt sein sollten:
border-left: 4px solid #3a87ad– Farbe des linken Randsbackground-color: #daeaf7– Hintergrundfarbe der Boxcolor: #2a6496im<span>-Tag – Farbe des Titeltexts
Wer sich bei der Farbwahl orientieren möchte: Bootstrap-Farbschemata sind eine bewährte Ausgangsbasis und liefern aufeinander abgestimmte Werte.
Icon hinzufügen
Ein Icon lässt sich direkt im <span>-Tag vor dem Titeltext einfügen. Zum Beispiel mit einem Unicode-Zeichen:
<span style="font-weight: bold; color: #2a6496;">ℹ Hinweis</span>Das ergibt: ℹ Hinweis.
Alternativ funktionieren auch Emojis. Deren Darstellung kann je nach Betriebssystem und Browser leicht variieren.
Weitere Boxen-Typen
Das System lässt sich beliebig erweitern. Wer weitere Varianten benötigt, legt einfach weitere Vorlagen nach demselben Muster an. Für die meisten Zwecke und Wikis reichen erfahrungsgemäß jedoch diese drei Typen (Hinweis, Tipp und Warnung) aus.
