PureWiki verwendet ein einfaches, PHP-basiertes Templating-System für das Rendering des öffentlichen Frontends. Dieses System legt Wert auf Einfachheit und Leistung gegenüber komplexen Template-Sprachen wie Twig oder Blade.

Architektur

Themes befinden sich im Verzeichnis themes/. Die zentrale Layout-Datei heißt immer page.php.

Verzeichnisstruktur

themes/default/
├── page.php          # Main layout file
├── other-layout.php  # Optional: further layouts, selectable per page
├── elements/         # Reusable HTML snippets
│   ├── header.php
│   ├── content.php
│   └── footer.php
├── style.css         # Stylesheet
├── script.js         # Theme script
└── theme.json        # Optional: adjustable theme colors

Platzhalter und Variablen

Platzhalter werden durch {{ variablen_name }} gekennzeichnet. Der Renderer ersetzt diese während des Build-Prozesses.

Verfügbare Systemvariablen

• {{ content }}: Der gerenderte HTML-Inhalt der Seitenblöcke.
• {{ title }}: Der Seitentitel im Format der SEO-Einstellungen (für das <title>-Tag).
• {{ page_title }}: Der Titel der aktuellen Seite.
• {{ description }}: Die Beschreibung der aktuellen Seite.
• {{ tags }}: Die Tags der Seite als Liste.
• {{ wiki_name }}: Der in den globalen Einstellungen konfigurierte Name.
• {{ wiki_description }}: Die globale Wiki-Beschreibung.
• {{ wiki_logo }}: URL zum Wiki-Logo.
• {{ wiki_favicon }}: URL zum Favicon.
• {{ author }}: Der letzte Autor, der die Seite gespeichert hat.
• {{ date_created }} / {{ date_modified }}: Lokalisierte Datumszeichenfolgen.
• {{ date_created_iso }} / {{ date_modified_iso }}: ISO-Format (Y-m-d).
• {{ current_year }}: Nützlich für Copyright-Footer.
• {{ current_theme }}: Name des aktiven Theme-Ordners.
• {{ theme_url }}: URL des aktiven Theme-Ordners, für CSS, JS und Bilder.
• {{ base_url }}: Linkziel des Logos: die Startseite der aktuellen Sprache.
• {{ pw_base_path }}: Installationspfad, leer, solange PureWiki nicht in einem Unterverzeichnis läuft.
• {{ context_path }}: Relativer URL-Pfad der aktuellen Seite.
• {{ nav_links }}: Die Navigationslinks der Seiten, die in der Kopfzeile angezeigt werden.
• {{ show_left_sidebar }} / {{ show_right_sidebar }}: Ob die Seitenleisten auf dieser Seite sichtbar sind.
• {{ assets_head }}: Injiziert CSS und Head-Skripte (Erforderlich im <head>).
• {{ assets_footer }}: Injiziert Footer-Skripte (Erforderlich vor </body>).

Bedingte Logik

Der Renderer unterstützt einfache {{ if variable }} und {{ endif }} Blöcke.

{{ if show_left_sidebar }}
  <aside>
    {{ virtual:left_sidebar }}
  </aside>
{{ endif }}

Virtuelle Seiten und Makros

Themes verlassen sich auf Virtuelle Seiten ({{ virtual:name }}) für globale Inhalte und Makros ({{ macro:name }}) für dynamische Logik wie Suche oder Navigation.

Layout-Vorlagen

Neben der page.php kann ein Theme weitere Layout-Dateien enthalten. Die Einstellung Layout-Vorlage einer Seite wählt die Datei über ihren Namen, siehe Seiteneinstellungen. Existiert die Datei nicht, wird die page.php verwendet.

Theme-Farben

Ein Theme kann Farben anbieten, die Administratoren unter Globale Einstellungen > Darstellung > Theme-Farben ändern, getrennt für hellen und dunklen Modus. Die Farben werden in der theme.json deklariert:

{
    "colors": {
        "--pw-primary": {
            "label": "settings.theme_color_primary",
            "light": "#0172ad",
            "dark": "#3fa9dd"
        }
    }
}

• Schlüssel: Die CSS-Variable, die überschrieben wird.
• label: Ein Sprachschlüssel oder Klartext für die Beschriftung in den Einstellungen. Verfügbar sind settings.theme_color_primary, settings.theme_color_background und settings.theme_color_text.
• light / dark: Die Standardfarben als sechsstellige Hex-Werte.

Für jede Farbe, die vom Standard abweicht, fügt PureWiki eine Überschreibung in den Head ein, zum Beispiel :root{--pw-primary:light-dark(#ff0000,#ff4242)}. Das Stylesheet muss daher die Variable verwenden und color-scheme setzen, damit light-dark() funktioniert. Ein Theme ohne theme.json hat keine anpassbaren Farben.

Standard-Theme

Das Standard-Theme ist in reinem CSS ohne Framework geschrieben. Sein Design stammt aus CSS-Variablen in :root. Die anpassbaren Basisfarben sind die Grundlage für abgeleitete Farben, die automatisch mitziehen, wenn sich eine Farbe ändert.

Heller und dunkler Modus verwenden light-dark(). Ohne Auswahl folgt das Theme der Systemeinstellung. Der Schalter in der Kopfzeile setzt data-theme="light" oder data-theme="dark" auf dem <html>-Element und speichert die Auswahl im Browser. Eigenes CSS und Landingpages können dieselben Variablen nutzen.