# Admin-Einstellungen

> Webtrees Modul-Einstellungen

---

Im oberen Bereich der Admin-Seite ist es möglich auf die administrative [Querverweis-Übersicht](../features/enhanced-links/xref-overview) und die Funktion [xref_IDs neu nummerieren (mit Verweisen)](../features/enhanced-links/renumber) zuzugreifen. \
Ferner können die Grundfunktionen (de-)aktiviert werden:

1. [Erweiterte Links](../features/enhanced-links)
2. [Markdown Verbesserungen](../features/markdown)
3. Hilfsfunktionen ([Webtrees Handbuch](../features/wthb))
4. [Home-Link](../features/home-link)
5. [UID-Abfrage](../features/uid-lookup)

Bei Aktivierung der ersten vier Grundfunktionen können weiter unten noch detailliertere Einstellungen vorgenommen werden. Auch gibt es zwei globale Einstellungen für Debugausgaben in der JavaScript-Konsole des Browsers und der Webserver-Fehlerlogdatei und man kann sich entscheiden, ob Links grundsätzlich in einem neuen Browsertab geöffnet werden sollen (je nach Grundfunktion differenzierte Einstellung ist auch möglich).

Nachfolgend die verfügbaren Optionen auf der Admin-Seite:

[![Admin-Seite](img/le/screenshot_admin-page_small.png)](/img/le/screenshot_admin-page.png)

## [1] Verbesserte Link-Unterstützung

### Eigene externe Ziele

Hier zwei Beispiel-Einträge aus den [vordefinierten Zielen](https://codeberg.org/bschwede/linkenhancer/src/branch/main/resources/js/index-le.js) zur Veranschaulichung des Prinzips, wie **zusätzliche externe Ziele** mit einem eigenen JavaScript-Objekt bereitgestellt werden können.

<div class="highlight"><pre tabindex="0" style="color:#cad3f5;background-color:#24273a;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#a6da95">&#34;fsft&#34;</span><span style="color:#91d7e3;font-weight:bold">:</span> {
</span></span><span style="display:flex;"><span>        name<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;Family Search Tree - $ID&#39;</span>,
</span></span><span style="display:flex;"><span>            url<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;https://www.familysearch.org/tree/person/details/&#39;</span>,
</span></span><span style="display:flex;"><span>                cname<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;icon-fsft&#39;</span>
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6da95">&#34;wp&#34;</span><span style="color:#91d7e3;font-weight:bold">:</span> {
</span></span><span style="display:flex;"><span>        name<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;Wikipedia&#39;</span>,
</span></span><span style="display:flex;"><span>            url<span style="color:#91d7e3;font-weight:bold">:</span> (id, title) =&gt; {
</span></span><span style="display:flex;"><span>                <span style="color:#ed8796">let</span> parts <span style="color:#91d7e3;font-weight:bold">=</span> id.split(<span style="color:#a6da95">&#39;/&#39;</span>);
</span></span><span style="display:flex;"><span>                <span style="color:#c6a0f6">if</span> (parts.length <span style="color:#91d7e3;font-weight:bold">&lt;</span> <span style="color:#f5a97f">2</span>) {
</span></span><span style="display:flex;"><span>                    title <span style="color:#91d7e3;font-weight:bold">=</span> title <span style="color:#91d7e3;font-weight:bold">+</span> <span style="color:#a6da95">&#34; - &#34;</span> <span style="color:#91d7e3;font-weight:bold">+</span> options.i18n(<span style="color:#a6da95">&#39;syntax error&#39;</span>) <span style="color:#91d7e3;font-weight:bold">+</span> <span style="color:#a6da95">&#34;!&#34;</span>;
</span></span><span style="display:flex;"><span>                    <span style="color:#c6a0f6">return</span> { url<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;&#39;</span>, title };
</span></span><span style="display:flex;"><span>                }
</span></span><span style="display:flex;"><span>                <span style="color:#ed8796">let</span> subdomain <span style="color:#91d7e3;font-weight:bold">=</span> parts[<span style="color:#f5a97f">0</span>];
</span></span><span style="display:flex;"><span>                <span style="color:#ed8796">let</span> article <span style="color:#91d7e3;font-weight:bold">=</span> parts.slice(<span style="color:#f5a97f">1</span>).join(<span style="color:#a6da95">&#39;/&#39;</span>);
</span></span><span style="display:flex;"><span>                title <span style="color:#91d7e3;font-weight:bold">=</span> <span style="color:#a6da95">`</span><span style="color:#a6da95">${</span>title<span style="color:#a6da95">}</span><span style="color:#a6da95"> - `</span> <span style="color:#91d7e3;font-weight:bold">+</span> <span style="color:#91d7e3">decodeURIComponent</span>(article) <span style="color:#91d7e3;font-weight:bold">+</span> <span style="color:#a6da95">` (</span><span style="color:#a6da95">${</span>subdomain<span style="color:#a6da95">}</span><span style="color:#a6da95">)`</span>;
</span></span><span style="display:flex;"><span>                <span style="color:#c6a0f6">return</span> { url<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">`https://</span><span style="color:#a6da95">${</span>subdomain<span style="color:#a6da95">}</span><span style="color:#a6da95">.wikipedia.org/wiki/</span><span style="color:#a6da95">${</span>article<span style="color:#a6da95">}</span><span style="color:#a6da95">`</span>, title };
</span></span><span style="display:flex;"><span>            },
</span></span><span style="display:flex;"><span>                cname<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;icon-wp&#39;</span>,
</span></span><span style="display:flex;"><span>                    help<span style="color:#91d7e3;font-weight:bold">:</span> [
</span></span><span style="display:flex;"><span>                        { n<span style="color:#91d7e3;font-weight:bold">:</span> options.i18n(<span style="color:#a6da95">&#39;wp-help1&#39;</span>), e<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;de/Webtrees&#39;</span> },
</span></span><span style="display:flex;"><span>                        { n<span style="color:#91d7e3;font-weight:bold">:</span> options.i18n(<span style="color:#a6da95">&#39;wp-help2&#39;</span>), e<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;en/Webtrees&#39;</span> },
</span></span><span style="display:flex;"><span>                        { n<span style="color:#91d7e3;font-weight:bold">:</span> options.i18n(<span style="color:#a6da95">&#39;wp-help3&#39;</span>), e<span style="color:#91d7e3;font-weight:bold">:</span> <span style="color:#a6da95">&#39;other-subdomain/Webtrees&#39;</span> },
</span></span><span style="display:flex;"><span>                    ]
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>

**Erläuterung der Eigenschaften** (die Syntax eines [erweiterten Links](../features/enhanced-links): `#@param-key=param-value`):

- *key* — der oben genannte Kurzname oder Query-Parameter-Schlüssel (param-key)
- *name* — Titel oder Label, das als Link-Titel angezeigt wird; der Platzhalter `$ID` wird durch die gegebene ID (param-value) ersetzt
- *url* — Service-URL, die aufgerufen wird; der Parameterwert / die gegebene Record-ID (param-value) wird ans Ende der URL angehängt. Es kann auch eine Funktion sein, die `(id, title)` akzeptiert und ein Objekt `{ url, title }` zurückgibt.
- *cname* — CSS-Klassenname(n), durch Leerzeichen getrennt
- *help* — optionales Array von Objekten `[{n:'', e:''},..]` zur Veranschaulichung der Verwendung eines Nicht-Standard-Ziels durch Beispiele (in `e`), versehen mit Erläuterungstext (in `n`). Wird in der Markdown-Hilfe aufgelistet.

`options.i18n` ist eine Funktion, die von diesem Modul durchgereicht wird, um übersetzte Zeichenketten bereitzustellen.

Erforderliche CSS-Regeln am besten über das [CSS-und-JS-Modul](https://wiki.genealogy.net/Webtrees_Handbuch/Anleitung_f%C3%BCr_Administratoren/Module#CSS_und_JS) ergänzen. Eigentlich wird nur die Definition des Icons (Größe 30 x 30 Pixel reicht) als Hintergrundbild benötigt — referenziert als [data: URLs](https://developer.mozilla.org/de/docs/Web/URI/Reference/Schemes/data). Zum Beispiel: `.icon-whatever { background-image: url(...) }`

## [2] Markdown Verbesserungen

Wenn man als Entwickler den [Markdown Editor](../features/markdown/mde) (mde) auch auf Textareas auf den Bearbeitungsseiten anderer Custom-Module anwenden möchte, kann man dies mit dem `MarkdownEditorActivationService` tun (verfügbar seit v1.2.11 — Details siehe [#101](https://codeberg.org/bschwede/linkenhancer/issues/101)):

<div class="highlight"><pre tabindex="0" style="color:#cad3f5;background-color:#24273a;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#91d7e3;font-weight:bold">&lt;?</span>php
</span></span><span style="display:flex;"><span><span style="color:#c6a0f6">private</span> <span style="color:#c6a0f6">function</span> <span style="color:#8aadf4">toggleTinyMde</span>(bool <span style="color:#f4dbd6">$enable</span>, bool <span style="color:#f4dbd6">$force</span> <span style="color:#91d7e3;font-weight:bold">=</span> <span style="color:#c6a0f6">false</span>)<span style="color:#91d7e3;font-weight:bold">:</span> void
</span></span><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#f4dbd6">$class</span> <span style="color:#91d7e3;font-weight:bold">=</span> <span style="color:#a6da95">&#34;Schwendinger</span><span style="color:#8aadf4">\\</span><span style="color:#a6da95">Webtrees</span><span style="color:#8aadf4">\\</span><span style="color:#a6da95">Module</span><span style="color:#8aadf4">\\</span><span style="color:#a6da95">LinkEnhancer</span><span style="color:#8aadf4">\\</span><span style="color:#a6da95">Services</span><span style="color:#8aadf4">\\</span><span style="color:#a6da95">MarkdownEditorActivationService&#34;</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#c6a0f6">if</span> (Registry<span style="color:#91d7e3;font-weight:bold">::</span><span style="color:#8aadf4">container</span>()<span style="color:#91d7e3;font-weight:bold">-&gt;</span><span style="color:#8aadf4">has</span>(<span style="color:#f4dbd6">$class</span>)) {
</span></span><span style="display:flex;"><span>        <span style="color:#6e738d">/** @var MarkdownEditorActivationService $mde_service */</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f4dbd6">$mde_service</span> <span style="color:#91d7e3;font-weight:bold">=</span> Registry<span style="color:#91d7e3;font-weight:bold">::</span><span style="color:#8aadf4">container</span>()<span style="color:#91d7e3;font-weight:bold">-&gt;</span><span style="color:#8aadf4">get</span>(<span style="color:#f4dbd6">$class</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#f4dbd6">$existingRule</span> <span style="color:#91d7e3;font-weight:bold">=</span> <span style="color:#f4dbd6">$mde_service</span><span style="color:#91d7e3;font-weight:bold">-&gt;</span><span style="color:#8aadf4">getCustomRule</span>(self<span style="color:#91d7e3;font-weight:bold">::</span><span style="color:#8aadf4">CUSTOM_TITLE</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#c6a0f6">if</span> (
</span></span><span style="display:flex;"><span>            <span style="color:#f4dbd6">$force</span> <span style="color:#91d7e3;font-weight:bold">||</span>
</span></span><span style="display:flex;"><span>            <span style="color:#f4dbd6">$enable</span> <span style="color:#91d7e3;font-weight:bold">&amp;&amp;</span> <span style="color:#91d7e3;font-weight:bold">!</span><span style="color:#f4dbd6">$existingRule</span> <span style="color:#91d7e3;font-weight:bold">||</span>
</span></span><span style="display:flex;"><span>            <span style="color:#91d7e3;font-weight:bold">!</span><span style="color:#f4dbd6">$enable</span> <span style="color:#91d7e3;font-weight:bold">&amp;&amp;</span> <span style="color:#f4dbd6">$existingRule</span>
</span></span><span style="display:flex;"><span>        ) {
</span></span><span style="display:flex;"><span>            <span style="color:#f4dbd6">$mde_service</span><span style="color:#91d7e3;font-weight:bold">-&gt;</span><span style="color:#8aadf4">setCustomRule</span>(
</span></span><span style="display:flex;"><span>                self<span style="color:#91d7e3;font-weight:bold">::</span><span style="color:#8aadf4">CUSTOM_TITLE</span>,  <span style="color:#6e738d;font-style:italic">// module name as key
</span></span></span><span style="display:flex;"><span>                <span style="color:#f4dbd6">$enable</span> <span style="color:#91d7e3;font-weight:bold">?</span> [<span style="color:#a6da95">&#34;source-transcription-detail&#34;</span>] <span style="color:#91d7e3;font-weight:bold">:</span> [], <span style="color:#6e738d;font-style:italic">// handler: route name
</span></span></span><span style="display:flex;"><span>                <span style="color:#f4dbd6">$enable</span> <span style="color:#91d7e3;font-weight:bold">?</span> [<span style="color:#a6da95">&#34;textarea[id$=&#39;_text&#39;]&#34;</span>] <span style="color:#91d7e3;font-weight:bold">:</span> [] <span style="color:#6e738d;font-style:italic">// filter: querySelector
</span></span></span><span style="display:flex;"><span>            );
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>

Dies funktioniert nur, wenn diese Funktion global aktiviert wurde und die Bearbeitungsseite mit einem Baum verbunden ist, der auch Markdown in seinen Notizen verwendet.

Im versteckten Textfeld unterhalb der Radiobuttons zum de-/aktivieren der Option *"Markdown-Editor für Notizen-Texteingabefelder"* lassen sich die registrierte Konsumenten durch Überfahren des Bereichs mit dem Mauscursor einsehen.

Bekannte Custom-Module, die diese Funktion nutzen:

- [Source Transcriptions](https://github.com/hartenthaler/hh_source_transcription)
- [Ortsregister](https://github.com/thobgg/webtrees-ortsregister)

## [3] Webtrees Handbuch

Es können auf Wunsch in webtrees registrierte Routes importiert werden. Dies erleichtert die Abdeckung individueller Custom-Modul-Konfigurationen.

Außerdem können Daten im CSV-Format importiert und exportiert werden, um Änderungen bequemer zu gestalten. Man kann den Trenner und für den Import die Zeichencodierung definieren (beim Export ist es immer UTF-8). Man kann auf einen Blick sehen, wie viele Datenzeilen in der Tabelle gespeichert sind und wie viele von ihnen eine URL zugewiesen haben.

![Admin-Seite Datentabelle](img/le/screenshot_admin-page-data-table.png)

Im Falle von Diskrepanzen kann die Kontext-Hilfe durch Aktivieren der Option *"Ausgabe von Debug-Informationen auf der JS-Konsole"* leichter angepasst werden. Dies liefert Informationen zur aktiven Route und, falls zutreffend, zu Datentabelle-Einträgen, die für die Zuordnung zum Hilfe-Thema gefunden wurden.

### Route-zu-Hilfe-Zuordnung

Die **Zuordnung von Routes zu Hilfe-Artikeln** im Handbuch wird in der [Datenbank-Tabelle](../dev/project-structure) `le_route_help_map` gespeichert. Dieses Modul kommt mit vordefinierten Zuordnungsvorschriften. Wenn etwas fehlt oder man ein Problem findet, zögern Sie nicht dies mitzuteilen.

**Technische Hintergrundinformationen** folgen. Die Tabelle hat die folgenden Header (die Header, die in einer CSV-Datei für den Import erforderlich sind, sind mit !! markiert):

- `id`: automatischer Schlüssel — nicht relevant, das Datenfeld wird nur verwendet, um die Identifizierung des Datensatzes beim Bearbeiten zu erleichtern.
- `path` **!!**: Routenpfad — entspricht dem Pfad der webtrees Pretty-URLs
- `handler` **!!**: entspricht in der Regel dem PHP-Klassennamen des Codes, der die Anfrage bearbeitet
- `method` **!!**: Web-Anfragemethode (GET, POST, HEAD). Nur GET-Routes sind allgemein relevant für die Zuordnung zu Handbuch-Abschnitten.
- `extras` **!!**: PHP-Klassennamen des Zugriffslevels (Fisharebest\Webtrees\Http\Middleware\Auth*)
- `subcontext` **!!**: CSS-Selektor-String oder JSON-Objekt-String, um eine Komponente/ein Subkontext-Thema auf der angegebenen Seite zu adressieren
- `category`: Zeichenkettenwert zum besseren Gruppieren von Datenzeilen; nur der Wert 'generic' hat eine besondere Bedeutung
- `order` **!!**: beliebiger numerischer Sortierschlüssel, übereinstimmende Datenzeilen werden aufsteigend sortiert (Standardwert ist 10)
- `url` **!!**: Pfad der URL zum webtrees Handbuch (wird mit der angegebenen GenWiki-Basis/Domänen-URL verkettet). Auch vollqualifizierte URLs zu anderen Web-Ressourcen sind möglich und unterstützt.
- `updated_at`: Zeitstempel der letzten Aktualisierung — hilft bei der Identifizierung möglicherweise veralteter Datenzeilen

Wie wir in [app/Http/Routes/WebRoutes.php](https://github.com/fisharebest/webtrees/blob/main/app/Http/Routes/WebRoutes.php) sehen können, wo die Standard-webtrees-Routes definiert sind, sind für eine Route die folgenden Informationen erforderlich:

1. `path`
2. `handler`
3. `method`

Optional kann `extras` bereitgestellt werden. Wenn keines der vier oben genannten Felder gesetzt ist, wird die Datenzeile vom [Seeder](https://codeberg.org/bschwede/linkenhancer/src/branch/main/src/Schema/SeedHelpTable.php) gefiltert. Beim Import werden `category` und `order` automatisch gesetzt, falls nicht gesetzt.

Um eine Erstklassen-Übereinstimmung mit der aktuellen Route zu erzielen, müssen diese vier Felder übereinstimmen.

Normalerweise ist es nur notwendig, GET-Routes einem Artikel zuzuordnen. Es gibt auch einige Redirect-Routes und ajax-Helfer-Routes (die Daten für Formsteuerungen bereitstellen), die ignoriert werden können.

Sonderfälle sind die `path`s, die mit `/module/{module}/{action}` oder `/tree/{tree}/data-fix/{data_fix}` beginnen: sie werden von einer integrierten Proxy-Klasse verarbeitet, die das Custom-Modul über ein Route-Attribut adressiert:

- [ModuleAction-Klasse](https://github.com/fisharebest/webtrees/blob/main/app/Http/RequestHandlers/ModuleAction.php): Attribut `module`
- [DataFixPage-Klasse](https://github.com/fisharebest/webtrees/blob/main/app/Http/RequestHandlers/DataFixPage.php): Attribut `data_fix`

Für die Zuordnung einer solchen Route zu einem bestimmten Custom-Modul-Hilfe-Artikel wird der `handler` auf den oben genannten Route-Attributwert gesetzt (z.B. `_vesta_classic_look_and_feel_`). Für eine generischere Regel kann `path` auch leer sein (dann kann eine Regel für beide Fälle verwendet werden).

Fallback-Regeln für Zugriffslevel werden durch `category='generic'` und den spezifischen Auth-Klassennamen in `extras` abgeglichen.

In aufsteigender Reihenfolge wird die erste Regel mit `subcontext = ''` für den Top-Menü-Link ausgewählt. Wenn nichts anderes zutrifft, zeigt der Link auf die Startseite des Handbuchs.

Wenn aktiviert, können `subcontext`-Themen auf einer Seite mit einem zusätzlichen Hilfe-Link versehen werden. Man kann einen CSS-Selektor-String oder einen JSON-Objekt-String mit den folgenden Eigenschaften setzen:

- `p`: Position des Popovers, optional (Default ist top, andere mögliche Werte: left, right, bottom)
- `f`: CSS-Selektor/Filter-String (nur notwendig, wenn man das Popover an einer anderen Positionieren möchte) ODER
- `e`: JavaScript-Ausdruck-String

Dies ist nützlich, wenn es Komponenten auf der Seite gibt, die detailliertere Informationen benötigen, als der Hilfe-Link im Top-Menü bietet (z.B. für Custom-Modul-Funktionen auf der Personenseite). Dieser Hilfe-Link wird in einem Popover angezeigt (weil ein zusätzlicher Link nicht immer in Bootstrap-Tabs, Akkordeon-Headern oder Menü-Titeln funktioniert).

Setzen Sie `category='generic'` für Regeln, die auf mehr als eine Seite anwenden sollen.

### Inhaltsverzeichnis (TOC)

Dieses Modul lädt ein mehrsprachiges **Inhaltsverzeichnis** für das deutsche webtrees Handbuch von einem Remote-Feed (JSON-Dateien: Struktur, Sprachübersetzungen und Versions-Manifest). Die Daten werden lokal zwischengespeichert und automatisch aktualisiert:

- **On-the-fly**: Wenn ein Benutzer die TOC-Seite aufruft und der Cache abgelaufen ist (24 h), prüft der Service das Feed-Manifest (`version.json`) auf hash-Änderungen pro Datei und lädt nur die geänderten Dateien neu herunter.
- **Proaktiv (cron)**: Der `refresh-wthb-toc` Cron-Job (täglich um 03:00 per Default) lädt alle Dateien herunter, unabhängig vom Cache-Zustand.

**Auto-Aktualisierung-Schalter**: Die Modul-Admin-Seite bietet einen "Auto-Aktualisierung"-Schalter für die TOC-Daten. Wenn deaktiviert, werden nur lokal zwischengespeicherte Daten ausgeliefert (keine HTTP-Downloads). Der Admin-**Force-Refresh**-Button und die CLI mit `--force` funktionieren trotzdem unabhängig vom Schalter. Tipp: Daten vor dem Deaktivieren aktualisieren, um sicherzustellen, dass die neueste Version zwischengespeichert ist.

**CLI**:

```
php modules_v4/linkenhancer/cli/refresh-wthb-toc.php              # Scope aus Modul-Einstellung
php modules_v4/linkenhancer/cli/refresh-wthb-toc.php --all        # alle verfügbaren Sprachen
php modules_v4/linkenhancer/cli/refresh-wthb-toc.php --lang=en,fr # bestimmte Sprachen
php modules_v4/linkenhancer/cli/refresh-wthb-toc.php --clear      # nur Cache leeren
php modules_v4/linkenhancer/cli/refresh-wthb-toc.php --force      # auch bei deaktivierter Auto-Aktualisierung
```

Während Auto-Aktualisierung ausgeschaltet ist, werden geplante Aktualisierungen übersprungen (der Cron-Lauf beendet sich mit Exit 0 ohne Arbeit). `--force` aktualisiert trotzdem (z.B. zur Vorbereitung der Reaktivierung), und `--clear` funktioniert unabhängig vom Schalter.

### Externe Hilfe-Links

Das Modul enthält einige Standard-**externe Hilfe-Links**, die in JSON definiert sind — Array von Objekten mit den folgenden Mitgliedern:

- `title`: Anzeigetext für den Link, kann auch HTML enthalten (String, Pflichtfeld), Sprache sollte en-US sein; für Standard-Link-Titel werden Übersetzungen bereitgestellt
- `url`: Link zur Web-Ressource (String, Pflichtfeld)
- `class`: zusätzliche CSS-Klassennamen (String, optional)
- `self`: falls gesetzt, ist Link-`target` `_self` (öffnet an Ort und Stelle), sonst `_blank` (beliebiger Typ, optional)
- `i18n`: Titel mit benutzerdefinierter Übersetzung für gegebene Sprach-Tags überschreiben (Objekt, optional; Schlüssel sind Sprach-Tags, Werte sind übersetzte Titel)

Beispiel:

```json
[
  {"title":"webtrees FAQ <i class=\"fa-solid fa-circle-question\"></i>",
   "url":"https://webtrees.net/faq/",
   "i18n": { "de": "webtrees Häufig-gestellte-Fragen <i class=\"fa-solid fa-circle-question\"></i>" }
  }
]
```

## [4] Home link

Dynamische CSS-Stile können mit einem [JSON](https://de.wikipedia.org/wiki/JSON)-Objekt konfigurieren werden:

```javascript
{ 
  "*": ".homelink { color: #039; }",
  "colors_nocturnal": ".homelink { color: antiquewhite; }"
}
```

**Erklärung:** Der Objektschlüsselname wird auf den Theme-Namen gesetzt, der abgeglichen werden soll, und der Zeichenkettenwert enthält eine oder mehrere CSS-Stilregeln. In diesem Beispiel haben wir eine Fallback-Regel mit dem Schlüssel `*`, die alle Themes abdeckt, es sei denn, es gibt einen spezifischen Schlüssel.

Theme *colors* ist ein Sonderfall, bei dem wir auch Paletten haben. Um diese Kombination zu adressieren, wird der Schlüssel auf `theme name_palette name` gesetzt. Der Schlüssel *colors* deckt alle Subthemes ab.

Aktivieren Sie einfach die Option "Ausgabe von Debug-Informationen auf der JS-Konsole", um die korrekten Werte herauszufinden.
