Paligo-Komponenten und -Hilfsfunktionen

Paligo stellt Vorlagen mit vorgefertigten Komponenten für gängige Seitenelemente sowie einige Hilfsfunktionen und Filter bereit. Eine Komponente erzeugt vollständiges, barrierefreies HTML, das Sie mit Ihrem eigenen CSS gestalten können. Sie können dieselben Elemente auch selbst mithilfe der Vorlagenvariablen erstellen.

Komponenten

Funktion	Erzeugt	Liefert nichts, wenn
`paligo_search_box()`	Ein Suchfeld. Siehe In einem Thema suchen.	Das Layout verfügt über keine Suchfunktion.
`paligo_breadcrumbs()`	Eine Breadcrumb-Navigation.	Die Seite befindet sich auf der obersten Ebene.
`paligo_toc()`	Eine Liste der Überschriften auf dieser Seite.	Die Seite enthält keine Überschriften.
`paligo_pager()`	Links zur vorherigen und zur nächsten Seite.	Es gibt keine vorherige oder nächste Seite.
`paligo_language_switcher()`	Links zur Website in den anderen Sprachen.	Die Website ist in einer Sprache verfügbar.

<header>{{ paligo_search_box() }}</header>
<aside>{{ paligo_toc() }}</aside>
<main>
    {{ paligo_breadcrumbs() }}
    {{ page.content }}
    {{ paligo_pager() }}
</main>

Die Klassennamen, die gestaltet werden sollen:

Komponente	Markup
`paligo_breadcrumbs()`	`<nav class="paligo-breadcrumbs">`, das ein `<ol>` enthält. Die aktuelle Seite ist das letzte `<li>` mit `aria-current="page"`“.
`paligo_toc()`	`<nav class="paligo-toc">`, das verschachtelte `<ul>` -Listen mit Links enthält.
`paligo_pager()`	`<nav class="paligo-pager">`, das `<a class="paligo-pager-prev">` und `<a class="paligo-pager-next">` enthält.
`paligo_language_switcher()`	`<nav class="paligo-language-switcher">`, das ein `<ul>` enthält. Der Link der aktuellen Sprache hat das Attribut „`aria-current="true"`“.

Anmerkung

Die Texte in `paligo_pager() ` und die barrierefreien Namen dieser Komponenten sind auf Englisch. Für eine Website in anderen Sprachen sollten Sie den Pager aus `page.prevPage ` und `page.nextPage ` mit `site.strings.navPrev ` und `site.strings.navNext` erstellen, wie unter Vorlagenvariablen gezeigt.

Erstellen Sie Ihr eigenes Sprachmenü

paligo_language_switcher() Funktion `paligo_language_switcher()` gibt eine einfache Liste zurück. Um die Sprachen nach Ihren eigenen Vorstellungen anzuzeigen, beispielsweise als Dropdown-Menü in der Kopfzeile, erstellen Sie das Menü mithilfe von `site.languages`. Dieses Beispiel zeigt den Namen der aktuellen Sprache an und öffnet eine Liste aller Sprachen:

templates/partials/language-menu.html.twig:

{% if site.languages|length > 1 %}
  {% set current = site.languages|filter(l => l.code == site.lang)|first %}
  <details class="language-menu">
    <summary aria-label="{{ theme.strings.changeLanguage|default('Change language') }}">
      {{ current.label|default(site.lang|upper) }}
    </summary>
    <ul>
      {% for language in site.languages %}
        <li>
          {% if language.code == site.lang %}
            <a href="#" aria-current="true" lang="{{ language.code }}" hreflang="{{ language.code }}">{{ language.label }}</a>
          {% else %}
            <a href="../{{ page.translations[language.code]|default(language.code ~ '/') }}" lang="{{ language.code }}" hreflang="{{ language.code }}">{{ language.label }}</a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </details>
{% endif %}

Füge es dort ein, wo das Menü stehen soll:

{% include 'partials/language-menu.html.twig' %}

So funktioniert das Beispiel:

Das Menü wird nur angezeigt, wenn die Website in mehr als einer Sprache verfügbar ist.
site.languages enthält code jeder Sprache sowie deren label, also den Namen der Sprache in dieser Sprache, beispielsweise Deutsch. Die Sprache der aktuellen Seite ist site.lang.
Die aktuelle Sprache ist mit aria-current gekennzeichnet. Das lang-Attribut sorgt dafür, dass Screenreader jeden Namen in der jeweiligen Sprache aussprechen.
Jede andere Sprache verweist auf dieselbe Seite in dieser Sprache, sofern Paligo sie kennt (aus page.translations), andernfalls auf die Startseite dieser Sprache. Genau das macht auch die Funktion `paligo_language_switcher()`.

Verwenden Sie <details> und <summary> wie im Beispiel gezeigt, dann lässt sich das Menü ohne Skript öffnen und schließen.

Hilfsfunktionen

asset(path) liefert den Link zu einer Datei im Ordner assets/ des Themes. Siehe Themen-Assets.

paligo_contrast_color(background, dark, light) Gibt je nach WCAG-Kontrastverhältnis diejenige der beiden Farben dark und light zurück, die auf background besser lesbar ist. Die Standardwerte sind #161617 für dark und #ffffff für light . Verwenden Sie diese Funktion, um eine Textfarbe auszuwählen, die zu einer in den Designoptionen gewählten Farbe passt:

<div class="hero" style="background: {{ theme.options.accent }}; color: {{ paligo_contrast_color(theme.options.accent) }}">

Alle drei Farben müssen als Hex-Werte angegeben werden, beispielsweise #3a46e8. Ist eine davon kein Hex-Wert, gibt die Funktion einen leeren Wert zurück.

Filter

excerpt(length) Wandelt HTML in einfachen Text um und kürzt ihn auf maximal length Zeichen, jeweils am Ende eines Wortes, wobei bei der Kürzung „…“ hinzugefügt wird. Die Standardlänge beträgt 160.

<meta property="og:description" content="{{ page.content|excerpt(200) }}">