Startpunkt: Paligo Base

Paligo Base ist ein umfassendes Theme, das speziell für Anpassungen entwickelt wurde. Laden Sie es wie unter Ein Design herunterladen beschrieben herunter und passen Sie es nach Belieben an – sei es in geringem oder großem Umfang: die Farben und Schriftarten, die Vorlagen oder das gesamte Theme. In diesem Beitrag wird beschrieben, wie es aufgebaut ist, damit Sie wissen, wo Sie Änderungen vornehmen können.

Wo sich die Dinge befinden

Datei	Enthält
`templates/base.html.twig`	Das Seitenlayout für jede Seite: die Kopfzeile, die Navigationsleiste und die Fußzeile. Lesen Sie dies zuerst durch.
`templates/page.html.twig`	Topic-Seiten: die Breadcrumb-Navigation, der Inhalt, die Links Zurück und Weiter sowie das Inhaltsverzeichnis auf der Seite.
`templates/portal.html.twig`	Die Startseite: das Banner, die vorgestellten Topics und die Topics-Liste.
`templates/search.html.twig`	Die Suchergebnisseite.
`templates/partials/`	Das Logo und der Titel der Website, das Portal-Banner, das Suchfeld sowie die Schaltfläche für den hellen und dunklen Modus.
`assets/css/main.css`	Alle Stile des Themes. In der ersten section werden die Farben, Schriftarten und Schriftgrößen festgelegt.
`assets/css/theme.css`	Stile für die Ausgabe der `paligo_…()` -Komponenten.
`assets/css/code-theme.css`	Codefarben, die verwendet werden, wenn im Layout unter Codefarben die Option Designfarben ausgewählt ist.
`assets/js/`	Skripte für die Navigations-Seitenleiste, das Inhaltsverzeichnis auf der Seite, die Schaltfläche für den hellen und dunklen Modus sowie das Portal.
`i18n/en.json`	Die Texte des Themas selbst, auf Englisch.
`README.md`	Eine kurze Einführung in das Thema.
`AGENTS.md`	Anleitung für KI-Kodierungsassistenten. Siehe Erstelle ein Theme mit einem KI-Programmierassistenten.
`CLAUDE.md`	Verweist auf den Claude-Code in der Datei `AGENTS.md`.

Farben, Schriftarten und Schriftgrößen ändern

Für die meisten Änderungen sind lediglich die benutzerdefinierten CSS-Eigenschaften am Anfang der Datei assets/css/main.css erforderlich. Alle Farben, Schriftarten und Schriftgrößen im Theme stammen von dort:

Eigenschaft	Bedienelemente
`--paligo-primary`, `--paligo-primary-hover`	Links, Schaltflächen und Hervorhebungen. Diese werden über die Option Akzentfarbe festgelegt.
`--paligo-brand`, `--paligo-brand-end`	Die beiden Farben des Farbverlaufs auf dem integrierten Logo und dem aktuellen Navigationselement.
`--paligo-bg`, `--paligo-surface`, `--paligo-surface-2`	Der Seitenhintergrund sowie der Hintergrund der Seitenleiste, der Code-Blöcke und der Mahnungen.
`--paligo-text`, `--paligo-muted`, `--paligo-faint`	Textfarben, von der kräftigsten bis zur blassesten.
`--paligo-border`, `--paligo-border-strong`	Grenzen.
`--paligo-note`, `--paligo-tip`, `--paligo-important`, `--paligo-caution`, `--paligo-warning`, `--paligo-danger`	Die Farbe der einzelnen Arten von Mahnungen.
`--paligo-font`, `--paligo-mono`	Die Schriftart für den Text und die Schriftart für den Code.
`--paligo-font-size`, `--paligo-line-height`	Die Schriftgröße und der Zeilenabstand des Textes.
`--paligo-radius-sm`, `--paligo-radius`, `--paligo-radius-lg`	Abgerundete Ecken.
`--paligo-header-h`, `--paligo-sidebar-w`, `--paligo-toc-w`, `--paligo-shell-max`	Die Höhe der Kopfzeile, die Breite der Seitenleiste und des Inhaltsverzeichnisses auf der Seite sowie die größte Breite der Seite.
`--paligo-code-keyword`, `--paligo-code-string`, `--paligo-code-comment` und die anderen `--paligo-code-…` -Eigenschaften	Code-Farben, wenn Code-Farben als Designfarben bezeichnet werden. Sie sind in der Datei `code-theme.css` zu finden.

:root {
    --paligo-primary: #0b7a75;
    --paligo-primary-hover: #075955;
    --paligo-font: "Source Sans 3", system-ui, sans-serif;
}

Anmerkung

Paligo Base lädt die Schriftart Inter von Google Fonts. Um stattdessen eine eigene Schriftart zu verwenden, fügen Sie diese als WOFF2-Datei im Verzeichnis assets/fonts/ hinzu, deklarieren Sie sie mit @font-face, ändern Sie --paligo-fontund entfernen Sie den @import-Befehl für Google Fonts am Anfang der Datei main.css.

Hell- und Dunkelmodus

Paligo Base passt sich der vom Leser gewählten hellen oder dunklen Einstellung an; Leser können mit der Schaltfläche Einstellungen in der Kopfzeile zwischen den beiden Modi wechseln. Die dunklen Farben sind ein zweiter Satz mit denselben Eigenschaften, der in der Datei „main.css“ unter „@media (prefers-color-scheme: dark) “ und „:root[data-theme="dark"]“ zu finden ist. Wenn Sie eine Farbe ändern, nehmen Sie diese Änderung bitte in beiden Sätzen vor.

Wenn ein Leser auf die Schaltfläche klickt, erhält das Element <html> data-theme="light" oder data-theme="dark", und der Browser speichert die Auswahl.

Die Seitenstruktur ändern

base.html.twig Datei base.html.twig ist in Twig-Blöcke unterteilt, die von den anderen Vorlagen an den entsprechenden Stellen ersetzt werden. Um einen Teil jeder Seite zu ändern, bearbeiten Sie diesen Block in base.html.twig:

Block	Enthält
`chrome`	Die Kopfzeile und die Navigationsleiste zusammen.
`nav_toggle`	Die Menüschaltfläche für die Seitenleiste auf kleinen Bildschirmen.
`topbar_search`	Das Suchfeld in der Kopfzeile.
`header_tools`	Das Sprachmenü und die Schaltfläche für den hellen und dunklen Modus.
`crumb`	Die Breadcrumb-Navigation.
`sidebar`	Die Navigations-Seitenleiste.
`main`	Der Hauptbereich der Seite.
`content`	Der Inhalt im Hauptbereich.
`title`	Der Seitentitel im Browser-Tab.
`body_class`	Klassen zum Element `<body>`.

Behalte {{ paligo.head }} und {{ paligo.foot }} in der Datei base.html.twig bei und füge deine Stylesheets hinter {{ paligo.head }} ein, damit deine Stile Vorrang vor denen von Paligo haben.

Gestalten Sie Ihre Inhalte

Paligo erstellt den HTML-Code für Ihre Inhalte und weist ihnen folgende Klassen zu:

Inhalt	Kurse
Mahnungen	`.admonition` mit `.note`, `.tip`, `.important`, `.caution`, `.warning` oder `.danger`, bestehend aus `.title` und `.body`
Zahlen	`.figure`, `.informalfigure` und `.caption`
Tabellen	`.informaltable` und `.table`
Code	`pre`, `code` und `.code-block`, sowie `.code-copy` für die Schaltfläche Kopieren
Accordions	`details.accordion` und `.accordion-body`
Begriffe im Glossar	`a[data-glossary-def]` und `.glossary-popover` für das Popup
Schnittstellennamen und Schlüssel	`.guilabel` und die anderen `.gui…` -Klassen sowie `.keycap`
Nicht übersetzter Text in einem Entwurf	`.translation-missing` und `.translation-changed`

Das eigene Stylesheet von Paligo legt die Formatierung fest, und main.css übernimmt diese zusätzlich. Um sie zu ändern, passen Sie die Regeln in main.css an.

Sprachen, die von rechts nach links geschrieben werden

Paligo Base setzt auf Seiten in Sprachen mit Rechts-nach-Links-Schreibrichtung dir="rtl", doch das Stylesheet ist für diese Sprachen nicht gespiegelt. Wenn Sie Inhalte auf Arabisch oder Hebräisch veröffentlichen, überprüfen Sie jeden Seitentyp und fügen Sie die erforderlichen Regeln hinzu, beispielsweise für [dir="rtl"] .site-nav.

Sorgen Sie dafür, dass alles reibungslos läuft – mit Paligo

Behalten Sie die Klassennamen site-search__… bei, wenn Sie das Suchfeld ändern. Siehe In einem Thema suchen.
Behalten Sie key einer Option in der Datei theme.json bei, wenn Sie die Option ändern. Layouts speichern ihre Werte anhand des Schlüssels; wenn Sie also einen Schlüssel umbenennen, geht der dafür festgelegte Wert in jedem Layout verloren.
Überprüfen Sie das Design im hellen und dunklen Modus sowie auf einer Topics-Seite, der Startseite und der Suchseite.