Community-Wiki

Achtung: Fandom stellt ab dem 31.12.2023 bis auf Weiteres den Support für die deutsche Sprache ein. Nach diesem Datum müssen alle Anfragen im englischen Community Central oder über das Kontaktformular gestellt werden.

MEHR ERFAHREN

Community-Wiki
Advertisement
Community-Wiki

Die Portablen Infoboxen beinhalten einige Tags und Optionen, die dir dazu dienen, die Infobox so darzustellen, wie du willst.

Unten sind alle Standard-Tags mit jeweils einem Wikitext-Beispiel und dessen HTML-Ausgabe aufgelistet, die dir helfen sollen zu erkennen, welche Tags du benutzen musst und wie du die Infoboxen mit CSS anpassen kannst. Bedenke, dass in einigen Fällen auch Parser-Funktionen genutzt werden können.

Alle Infoboxen sollten gemäß der XML-Konvention mit Attributen deklariert werden, die zur Feldkonfiguration verwendet werden.

Hilfeseiten zu den portablen Infoboxen:

<infobox>[]

Das <infobox>-Tag beinhaltet alle anderen und bestimmt den Geltungsbereich der Infobox.

Gültige Tags[]

Parent Tags Child Tags
Keine
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Attribute[]

theme
Der Name des zusätzlichen Themes, das für Styling nützlich sein kann. Fügt eine Klasse im Form .pi-theme-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme-source, noch type.
theme-source
Der Name des Parameters, dessen Wert den Theme-Namen definiert. Fügt eine Klasse im Form .pi-theme-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme-source, noch type.
type
Der Name des Infobox-Typen, der für Styling nützlich sein kann. Fügt eine Klasse im Form .pi-type-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme, noch theme-source.
accent-color-source
Der Name des Parameters, dessen Wert die Akzentfarbe der Infobox definiert.
accent-color-default
Die voreingestellte Akzentfarbe der Infobox. Nimmt einen Hexadezimalfarbcode aus 3 oder 6 Ziffern an (z.B.: #f00 oder #ff0000).
accent-color-text-source
Der Name des Parameters, dessen Wert die Text-Akzentfarbe der Infobox definiert.
accent-color-text-default
Die voreingestellte Text-Akzentfarbe der Infobox. Nimmt einen Hexadezimalfarbcode aus 3 oder 6 Ziffern an (z.B.: #f00 oder #ff0000).
layout
Mögliche Werte: default, stacked.
name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<infobox>
    <title source="titel_source" />
</infobox>
Ausgabe
<aside class="portable-infobox pi-background pi-border-color pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="titel_source">Beispiel</h2>
</aside>

<title>[]

Das <title>-Tag gibt den Titel der Infobox an (sollte nur einmal pro Infobox verwendet werden). Bilder, die innerhalb eines title-Tags verwendet werden, werden in der mobilen Ansicht nicht angezeigt.

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <default>
  • <format>

Attribute[]

source
Der Name des gewünschten Parameters.
name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<title source="title_source">
    <default>{{PAGENAME}}</default>
</title>
Ausgabe
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="titel_source">Hilfe:Infobox/Tags</h2>
</aside>

<data>[]

Das <data>-Tag ist das Standard-Tag eines Schlüsselwerts.

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <default>
  • <label>
  • <format>

Attribute[]

source
Der Name des gewünschten Parameters.
span
Die Anzahl der Spalten, über den das Element erstrecken soll. Nur in intelligenten Gruppen verfügbar.
layout
Mögliche Werte: default. Nur in intelligenten Gruppen verfügbar.
name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<data source="name">
    <label>Vorname</label>
    <default>Max</default>
</data>
Ausgabe
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="name">
    <h3 class="pi-data-label pi-secondary-font">Vorname</h3>
    <div class="pi-data-value pi-font">Max</div>
</div>

<label>[]

Das <label>-Tag ändert die Darstellung des Parameters in der Infobox. Bei Registerkarten ändert es den Namen des jeweiligen Reiters. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags Child Tags
  • <data>
  • <section>
Keine

Attribute[]

Keine.

Beispiel[]

Eingabe
<label>Vorname</label>
Ausgabe
<h3 class="pi-data-label pi-secondary-font">Vorname</h3>

<default>[]

Das <default>-Tag wird in Fällen verwendet, wo zum jeweiligen Parameter kein Wert angegeben wurde. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags Child Tags
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
Keine

Attribute[]

Keine.

Beispiel[]

Eingabe
<default>Max</default>
Ausgabe
<div class="pi-data-value pi-font">Max</div>

<format>[]

Das <format>-Tag ändert die Darstellung des Parameter-Wertes in der Infobox. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags Child Tags
  • <title>
  • <data>
  • <caption>
Keine

Attribute[]

Keine.

Beispiel[]

Eingabe
<data source="dollars">
    <label>normaler Preis</label>
    <format>${{{dollars}}}</format>
</data>
Ausgabe
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dollars">
    <h3 class="pi-data-label pi-secondary-font">normaler Preis</h3>
    <div class="pi-data-value pi-font">$15</div>
</div>

<image>[]

Das <image>-Tag wird benutzt, um Dateien (Bilder oder Videos) in eine Infobox einzubetten. Es kann mithilfe von CSS in der jeweiligen Community gestaltet werden, wobei die Größe der Datei nicht manuell geändert werden kann. Die Einbettung der Bilder wurde normalisiert, weshalb [[Datei:Beispiel.jpg]] und Beispiel.jpg gleich funktionieren. Mehrere Bilder können mit dem <gallery>-Tag angeordnet werden.

Hier wird das default-Tag benutzt, um ein Standardbild anzuzeigen, wenn beim Einbinden der Infobox kein Bild gewählt wird (z.B.: <default>Beispiel.jpg</default>).

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <alt>
  • <caption>
  • <default>

Attribute[]

source
Der Name des gewünschten Parameters.
name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<image source="Bild" />
Ausgabe
<figure class="pi-item pi-image" data-source="Bild">
    <a class="image image-thumbnail" href=".../Bild.jpg/revision/latest/..." title="">
        <img class="pi-image-thumbnail" src="...Bild.jpg..." srcset="...Bild.jpg... 2x" alt="" data-image-key="Bild.jpg" data-image-name="Bild.jpg" width="" height="">
    </a>
</figure>

<alt>[]

Das <alt>-Tag kann nur innerhalb eines <image>-Tags verwendet werden und gibt dem Bild einen Alternativtitel.

Gültige Tags[]

Parent Tags Child Tags
  • <image>
  • <default>

Attribute[]

source
Der Name des gewünschten Parameters.

Beispiel[]

Eingabe
<image source="Bild">
    <alt source="Alternativtitel">
        <default>Mein Alternativtitel</default>
    </alt>
</image>
Ausgabe
<figure class="pi-item pi-image" data-source="Bild">
    <a class="image image-thumbnail" href=".../Bild.jpg/revision/latest/..." class="image image-thumbnail" title="Mein Alternativtitel">
        <img src="...Bild.jpg..." srcset="...Bild.jpg... 2x" class="pi-image-thumbnail" alt="Mein Alternativtitel" data-image-key="Bild.jpg" data-image-name="Bild.jpg" width="" height="">
    </a>
</figure>

<caption>[]

Das <caption>-Tag kann nur innerhalb eines <image>-Tags verwendet werden und gibt dem Bild eine Beschreibung.

Gültige Tags[]

Parent Tags Child Tags
  • <image>
  • <default>
  • <format>

Attribute[]

source
Der Name des gewünschten Parameters.

Beispiel[]

Eingabe
<image source="Bild">
    <caption source="Bildbeschreibung">
        <default>Meine Bildbeschreibung</default>
    </caption>
</image>
Ausgabe
<figcaption class="pi-item-spacing pi-caption">Meine Bildbeschreibung</figcaption>

<group>[]

Das <group>-Tag wird für die Gruppierung der Daten verwendet und akzeptiert eine Kopfzeile (<header>) pro Gruppe. Die Gruppe sowie seine Kopfzeile werden nicht angezeigt, wenn keiner seiner Datenfelder besetzt sind. Wenn aber das show-Attribut auf incomplete gestellt ist, werden alle Felder innerhalb der Gruppe angezeigt, sobald mindestens ein Feld besetzt ist.

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group>
  • <navigation>
  • <panel>

Attribute[]

layout
Mögliche Werte: default, horizontal
show
Mögliche Werte: default, incomplete
collapse
Mögliche Werte: open, closed. Nur verfügbar, wenn das erste Unterelement ein <header>-Tag ist.
row-items
Wandelt die Gruppe in eine intelligente Gruppe mit n Spalten um. Intelligente Gruppen ordnen ihre Zellen horizontal, wobei automatisch in eine neue Zeile umgebrochen wird, sobald das angegebene Limit überschritten wird. Zellen in der letzten Zeile füllen automatisch leere Spalten auf.
name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiele[]

Einfache Gruppe[]

Eingabe
<group>
    <header>Gruppenname</header>
    <data source="parameter1" />
</group>
Ausgabe
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Gruppenname</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="parameter1">
        <div class="pi-data-value pi-font">Wert 1</div>
    </div>
</section>

Horizontale Gruppe[]

Eingabe
<group layout="horizontal">
    <header>Gruppenname</header>
    <data source="parameter1">
        <label>Label 1</label>
    </data>
</group>
Ausgabe
<section class="pi-item pi-group pi-border-color">
    <table class="pi-horizontal-group">
        <caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Gruppenname</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="parameter1">Label 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="parameter1">Data value</td>
            </tr>
        </tbody>
    </table>
</section>

Intelligente Gruppe[]

Eingabe
<group row-items="3">
    <header>Kopfzeile</header>
    <data source="parameter 1">
        <label>Label 1</label>
    </data>
    <data source="parameter 2">
        <label>Label 2</label>
    </data>
    <data source="parameter 3">
        <label>Label 3</label>
    </data>
    <data source="parameter 4" layout="default">
        <label>Label 4</label>
    </data>
    <data source="parameter 5">
        <label>Label 5</label>
    </data>
    <data source="parameter 6">
        <label>Label 6</label>
    </data>
</group>
Ausgabe
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Kopfzeile</h2>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="parameter 1">Label 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="parameter 2">Label 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="parameter 3">Label 3</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="parameter 1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="parameter 2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="parameter 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="parameter 4">
        <h3 class="pi-data-label pi-secondary-font">Label 4</h3>
        <div class="pi-data-value pi-font">DDD</div>
    </div>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="parameter 5">Label 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="parameter 6">Label 6</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="parameter 5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="parameter 6">FFF</div>
        </section>
    </section>
</section>

<header>[]

Das <header>-Tag zeigt seinen Wert in einer Kopfzeile an und soll den Beginn einer Sektion oder einer Gruppe von Tags markieren.

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <panel>
Keine

Attribute[]

name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<header>Kopfzeile</header>
Ausgabe (in einer einfachen Gruppe)
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Kopfzeile</h2>
Ausgabe (in einer horizontalen Gruppe)
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Kopfzeile</caption>

<navigation>[]

Das <navigation>-Tag dient zur allgemeinen Verwendung von Wikitext.

Gültige Tags[]

Parent Tags Child Tags
Keine

Attribute[]

name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<navigation>[[Link]]</navigation>
Ausgabe
<nav class="pi-navigation pi-item-spacing pi-secondary-font">
    <a href="/de/wiki/Link" title="Link">Link</a>
</nav>

<panel>[]

Das <panel>-Tag ist der Grundbaustein für ein Layout mit Registerkarten, wobei jeder neue Reiter mit dem <section>-Tag geöffnet wird.

Gültige Tags[]

Parent Tags Child Tags
  • <infobox>
  • <group>
  • <header>
  • <section>

Attribute[]

name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<panel>
    <section>
        <label>A</label>
        <data source="eins" />
        <data source="zwei" />
    </section>
    <section>
        <label>B</label>
        <data source="drei" />
        <data source="vier" />
    </section>
</panel>
Ausgabe
<section class="pi-item pi-panel pi-border-color wds-tabber">
    <div class="wds-tabs__wrapper">
        <div class="wds-tabs__arrow-left" />
        <ul class="wds-tabs">
            <li class="wds-tabs__tab wds-is-current">
                <div class="wds-tabs__tab-label">A</div>
            </li>
            <li class="wds-tabs__tab">
                <div class="wds-tabs__tab-label">B</div>
            </li>
        </ul>
        <div class="wds-tabs__arrow-right" />
    </div>
    <div class="wds-tab__content wds-is-current">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="eins">
            <div class="pi-data-value pi-font">Erstens</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="zwei">
            <div class="pi-data-value pi-font">Zweitens</div>
        </div>
    </div>
    <div class="wds-tab__content">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="drei">
            <div class="pi-data-value pi-font">Drittens</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="vier">
            <div class="pi-data-value pi-font">Viertens</div>
        </div>
    </div>
</section>

<section>[]

Das <section>-Tag repräsentiert den Inhalt eines Reiters. Der Text beim anklickbaren Schalter kann mit dem <label>-Tag modifiziert werden. Wenn kein Wert angegeben wird, wird die Kennziffer des Reiters (von 0 anfangend) angezeigt. Wenn keiner der Reiter benannt worden ist, werden sie wie Gruppen vertikal aufgereiht.

Gültige Tags[]

Parent Tags Child Tags
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Attribute[]

name
Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<section>
    <label>A</label>
    <data source="eins" />
    <data source="zwei" />
</section>
Ausgabe
<div class="wds-tab__content">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="eins">
        <div class="pi-data-value pi-font">Erstens</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="zwei">
        <div class="pi-data-value pi-font">Zweitens</div>
    </div>
</div>

Anmerkungen[]


Mehr Hilfe[]

Advertisement