MW - Klapptexte
FAQ-Seiten mit ausklappbarem Text in MediaWiki
In diesem Artikel lernst du, wie du ausklappbare Texte für FAQ-Seiten in MediaWiki erstellst. Diese Funktion ist besonders nützlich, um lange Inhalte kompakt darzustellen und dem Leser eine übersichtliche Navigation zu ermöglichen.
1. Einfache ausklappbare Abschnitte mit mw-collapsible
mw-collapsible
Mit der Klasse `mw-collapsible` kannst du einen Abschnitt ausklappbar machen. Hier ein Beispiel:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 1: Was ist MediaWiki?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: MediaWiki ist eine freie und offene Wiki-Software, die ursprünglich für Wikipedia entwickelt wurde und jetzt von vielen Projekten weltweit verwendet wird.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Der ``-Tag mit der Klasse `mw-collapsible` erstellt den ausklappbaren Bereich.
- Der Bereich wird durch Anklicken der Zeile „Frage 1: Was ist MediaWiki?“ ein- und ausgeklappt.
2. Ausklappbare Abschnitte mit Standardsymbolen
MediaWiki bietet auch standardisierte Symbole zum Ein- und Ausklappen. Hier ein Beispiel:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 2: Wie installiere ich MediaWiki?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Du kannst MediaWiki auf deinem Webserver installieren, indem du die Software von der offiziellen MediaWiki-Website herunterlädst und den Installationsanweisungen folgst.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Standardmäßig wird das Symbol „[+]“ zum Ein- und „[-]“ zum Ausklappen verwendet.
- Dies ist nützlich, um eine einfache und einheitliche Darstellung zu gewährleisten.
3. Automatisch ausgeklappte Abschnitte beim Laden der Seite
Falls du möchtest, dass ein Abschnitt beim Laden der Seite bereits ausgeklappt ist, kannst du dies wie folgt einstellen:
<div class="mw-collapsible mw-collapsed" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 3: Wie erstelle ich eine neue Seite?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Um eine neue Seite zu erstellen, gib den gewünschten Seitennamen in die Suchleiste ein. Wenn die Seite nicht existiert, wirst du aufgefordert, sie zu erstellen.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Die Klasse `mw-collapsed` sorgt dafür, dass der Abschnitt standardmäßig ausgeklappt ist.
4. Mehrere ausklappbare Abschnitte
Wenn du mehrere ausklappbare Abschnitte auf einer Seite benötigst, kannst du sie einfach hintereinander einfügen:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 4: Wie bearbeite ich eine Seite?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Klicke oben auf den Bearbeiten-Button, um die Seite im Bearbeitungsmodus zu öffnen und Änderungen vorzunehmen.</div>
</div>
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 5: Wie füge ich ein Bild ein?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende den Syntax <nowiki>[[Datei:Bildname.jpg|mini|Bildbeschreibung]]</nowiki> um ein Bild einzufügen.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Jeder Abschnitt funktioniert unabhängig voneinander.
- Diese Struktur eignet sich hervorragend für umfangreiche FAQ-Seiten.
5. Ausklappbare Abschnitte mit benutzerdefinierten Titeln
Du kannst den Titel für den ausklappbaren Abschnitt individuell gestalten, z.B. in verschiedenen Farben oder Schriftgrößen:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="color: blue; font-size: 18px; text-align:left; width:100%;">Frage 6: Wie setze ich einen Link?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende den Syntax <nowiki>[[Seitenname]]</nowiki> um einen internen Link zu erstellen, oder <nowiki>[http://example.com externe Seite]</nowiki> für externe Links.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Der Titel des Abschnitts kann durch das `style`-Attribut angepasst werden, z. B. in Blau mit größerer Schrift.
6. Ausklappbare Abschnitte mit Inhaltsverzeichnis
Wenn deine Seite viele ausklappbare Abschnitte enthält, ist ein Inhaltsverzeichnis hilfreich, das direkt zu den entsprechenden Abschnitten springt:
__TOC__
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 7: Wie verwende ich das Inhaltsverzeichnis?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Das Inhaltsverzeichnis erstellt automatisch Links zu allen Abschnitten der Seite. Du kannst es mit <nowiki>__TOC__</nowiki> einfügen.</div>
</div>
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 8: Wie erstelle ich Unterabschnitte?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende die Syntax <nowiki>== Überschrift ==</nowiki> für Hauptabschnitte und <nowiki>=== Unterüberschrift ===</nowiki> für Unterabschnitte.</div>
</div>
Beispiel in der Seite:
Erklärung:
- Das Inhaltsverzeichnis wird automatisch anhand der vorhandenen Abschnitte generiert.
- Es ist besonders hilfreich bei längeren Seiten mit vielen FAQ-Punkten.
Zusammenfassung
In diesem Artikel hast du gelernt, wie du ausklappbare Abschnitte in MediaWiki erstellst und diese für FAQ-Seiten oder ähnliche Inhalte verwenden kannst. Durch die Kombination verschiedener Stile und Funktionen kannst du deine Seite nicht nur benutzerfreundlich, sondern auch optisch ansprechend gestalten.
Nutze die bereitgestellten Beispiele, um deine eigene FAQ-Seite zu erstellen und deinen Nutzern eine klare und interaktive Möglichkeit zu bieten, Antworten auf ihre Fragen zu finden.
