Skip to main content

Top-Navigation für Helpcenter

Sie können die obere Navigationsfunktion verwenden, um eine Kopfzeile zu den Ausgaben Ihres HTML5-Hilfezentrums hinzuzufügen.

In der Kopfzeile können Sie Quicklinks zu wichtigen Topics in Ihrem Helpcenter hinzufügen, wie z. B. „Erste Schritte“, und Sie können auch Links zu externen Websites hinzufügen, beispielsweise zu Ihrer Unternehmenswebsite. Sie können je nach Bedarf Links nur zu externen Websites, nur zu Topics oder zu einer Mischung aus beidem hinzufügen.

Paligo HTML5 help center output. There are three top-navigation menus in the header of the page.

Anmerkung

Die oberen Navigationslinks sind nur in HTML5-Helpcenter-Ausgaben verfügbar.

Aktivieren der Top-Navigation

Sie können die obere Navigationsfunktion verwenden, um eine Kopfzeile zu den Ausgaben Ihres HTML5-Hilfezentrums hinzuzufügen.

grandhild2-numbers.png
grandchild1.png

In der obigen Publikation hat „The Mission Control Center“ einen Link in der Kopfzeile der Top-Navigation. Die Top-Navigationstiefe ist auf 3 festgelegt, d. h. es gibt ein Untermenü für Topics zwei Ebenen tiefer als „The Mission Control Center“. Auf Ebene 2 gibt es „Command Center“, „Guidance System“ und „Ground Segment“. Auf Ebene 3 gibt es „Controls System“ und „Control Room“.

So aktivieren Sie die obere Navigation in Ihrer HTML5-Ausgabe:

  1. Wählen Sie im oberen Menü Layout aus.

    Paligo editor. The Layout option in the header menu is highlighted.

    Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

  2. Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

    Tipp

    Sie können die URL des Layout-Editors kopieren und in eine neue Registerkarte in Ihrem Browser einfügen. Dies kann nützlich sein, wenn Sie häufig zwischen Ihren Paligo-Inhalten und den Layout-Einstellungen wechseln.

  3. Wählen Sie auf der Seitenleiste Klassen und Attribute aus.

    Classes_and_Attributes.png

  4. Wählen Sie Aktivieren für Ausgabe-Taxonomien.

    Output_Taxonomies.png

  5. Wählen Sie Aktivieren für Ausgabe von role-Attributen als Klassennamen.

    Layout. Output role attribute as class names setting. It is set to Enable.

  6. Wählen Sie in der Seitenleiste Inhaltsverzeichnis und Chunking aus.

    TOC_and_Chunking_Menu.jpg

  7. Wählen Sie für die Top-Navigation die Option Aktivieren.

    top-navigation-enabled.png

  8. Legen Sie die Anzahl der Ebenen fest, die in der Top-Navigationstiefe angezeigt werden sollen.

    Top_Navigation_Depth.png

    • Wählen Sie für die Anzahl den Wert 1, wenn Sie nur einen Link zu einem bestimmten Topic (übergeordnete Topics) benötigen.

    • Wählen Sie den Wert 2, um einen Link zu Ihrem spezifischen Topic und zu untergeordneten Topics (Child Topics) hinzuzufügen.

    • Wählen Sie den Wert 3, um auch Links zu zweifach untergeordneten Topics aufzunehmen.

  9. Drücken Sie Speichern.

Aktivieren von Dual-Top-Navigationsmenüs

Mit einer benutzerdefinierten JavaScript-Datei (JS-Datei) können Sie ein zweites Dropdown-Menü im oberen Navigationsbereich für die HTML5-Ausgabe hinzufügen. Dies kann nützlich sein, wenn Sie mehrere Produkte mit jeweils mehreren Versionen haben.

Damit dies funktioniert, muss pro Produkt ein Layout erstellt werden. Die gleiche JS-Datei (mit einer Liste aller Produkte) kann jedoch für alle Layouts verwendet werden, die denselben Produkt-Selektor verwenden. Die Helpcenter eines jeden Produkts zeigen nur Versionen, die zu seinem Layout hinzugefügt wurden, siehe Hinzufügen verfügbarer Versionen.

Dual_Top-navigation_Menus_small.jpg

So bereiten Sie die JS-Datei darauf vor, ein zweites Dropdown-Menü zu erstellen, das sich je nach ausgewähltem Produkt ändert:

  1. Verwenden Sie einen Code- oder Texteditor, um eine JS-Datei zu erstellen. Geben Sie ihm einen Namen und speichern Sie diesen mit der Erweiterung .js.

    Wenn Sie bereits ein benutzerdefiniertes JS für Ihr Layout verwenden, sollten Sie stattdessen die betreffende JS-Datei bearbeiten.

  2. Fügen Sie der JS-Datei den folgenden Vorlage-Code hinzu:

     $(document).ready(function () {
    // Create product dropdown using jQuery
    const productDropdown = $('<li class="product-dropdown">')
        .html(`
        <a><span class="caret"></span>Select product</a>
        <ul>
            // BEGIN - Add product versions
            <li><a href="#">Product A</a></li>
            <li><a href="#">Product B</a></li>
            <li><a href="#">Product C</a></li>
            // END - Add product versions
        </ul>
        `);
    
    // Select the right navbar
    const navbar = $('#navbar').last().children().first();
    const versionDropdown = navbar.children().first();

    // Placing productDropdown before versionDropdown
    versionDropdown.remove();
    navbar.append(productDropdown);
    navbar.append(versionDropdown);

    // SmartMenus jQuery initialization
    navbar.smartmenus();
});

  3. Aktualisieren Sie die Angaben zu Produkt A, indem Sie eine URL und einen geeigneten Namen hinzufügen.

    Der folgende String soll aktualisiert werden:

    <li><a href="#">Product A</a></li>

    mit einer URL und einem richtigen Produktnamen:

    <li><a href="https://mydomain.com/docs/myproduct">My product</a></li>

  4. Wiederholen Sie dies für Produkt B und C. Fügen Sie bei Bedarf Produkte hinzu oder entfernen Sie sie.

  5. Speichern Sie Ihre JS-Datei.

  6. Laden Sie Ihre benutzerdefinierte JS-Datei in jedes Layout hoch, das denselben Produkt-Selektor teilt, siehe Hochladen eines benutzerdefinierten JavaScripts.

Hinzufügen verfügbarer Versionen

Damit die verfügbaren Versionen in der oberen Navigation erscheinen, müssen Sie sie in den Helpcenter-Themenoptionen (siehe: Layout-Editor) hinzufügen.

Um eine Liste spezifischer Produktversionen im Versions-Dropdown-Menü festzulegen, benötigen Sie separate Layouts. Sie können dieselbe JS-Datei für alle Layouts wiederverwenden, die denselben Produkt-Selektor haben, siehe Aktivieren von Dual-Top-Navigationsmenüs.

Wichtig

Um das zweite Navigationsmenü oben anzuzeigen, müssen Sie mindestens eine Version in der Versionen-für-Version-Dropdown-Liste (siehe: Layout-Editor) hinzufügen.

Wenn keine Versionen hinzugefügt wurden, funktioniert die Aktion Aktivieren von Dual-Top-Navigationsmenüs nicht, auch wenn die JS-Datei hochgeladen wird.

  1. Wählen Sie im oberen Menü Layout aus.

    Paligo editor. The Layout option in the header menu is highlighted.

    Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

  2. Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

    Tipp

    Sie können die URL des Layout-Editors kopieren und in eine neue Registerkarte in Ihrem Browser einfügen. Dies kann nützlich sein, wenn Sie häufig zwischen Ihren Paligo-Inhalten und den Layout-Einstellungen wechseln.

  3. Wählen Sie Helpcenter Topic-Optionen in der Seitenleiste.

    Help_Center_Theme_Options_menu_option.jpg

  4. Geben Sie die verfügbaren Versionen in der Versionen-für-VersionDropdown-Liste für dieses spezifische Produkt ein.

    Der Text ist der sichtbare Teil im Dropdown-Menü. Unterteilen Sie die Versionen mit einem Semikolon. Beispiel:

    text:4.0, url:https://mydomain.com/docs/rpa/4.0/;
text:3.0, url:https://mydomain.com/docs/rpa/3.0/;
text:2.0, url:https://mydomain.com/docs/rpa/2.0/;
text:1.0, url:https://mydomain.com/docs/rpa/1.0/;
    Versions_for_version_dropdown.jpg

    Jede Version muss veröffentlicht werden. Die Versionsnummer und die URL/URLs muss/müssen in diesem Feld hinzugefügt werden.

  5. Drücken Sie Speichern.

Tipp

Um alle Produktversionen in ein und demselben Top-Navigation-Menü anzuzeigen, wird die JS-Datei nicht benötigt, und das zweite obere Navigationsmenü wird nicht verwendet. Dies ist nur geeignet, wenn Sie zwei oder drei Produkte haben.

Fügen Sie alle Versionen zum gleichen Layout hinzu. Kombinieren Sie die Version mit dem Produktnamen (zum Beispiel „RPA 2,0“ oder „PD 3,0“).

Versions_for_dropdown_small.jpg

Dieses Feld finden Sie in den Helpcenter-Themenoptionen im Layout-Editor.

Dieser Ansatz führt zu einem Dropdown-Menü wie diesem:

Select_version_dropdown_small.jpg

Das Dropdown-Menü zeigt alle Versionen für alle Produkte an.

Unterstützte Übersetzungszeichenfolgen

Die nachstehende Tabelle enthält Beispiele für Übersetzungsstrings, die Paligo unterstützt und die für externe Links nützlich sein können. Diese Begriffe werden von Paligo automatisch in verfügbare Sprachen übersetzt.

Übersetzungsstring-Kennung

Der englische Begriff wird in der Top-Navigation angezeigt

Rechtlicher Hinweis

Rechtlicher Hinweis

QandASet

Häufig gestellte Fragen

Qandadiv

Fragen und Antworten

Hinweis

Hinweis

Referenz

Referenz

featured.content

Featured content (ausgewählte Inhalte)

contact.support

Kundensupport kontaktieren

sign.up

Anmelden

log.in

Einloggen
Beispiel 1. So funktionieren Übersetzungsstrings

Stellen Sie sich vor, Sie möchten in der Kopfzeile der Navigation einen Link „Support kontaktieren“ hinzufügen, der automatisch auch in englischer und französischer Sprache veröffentlicht wird.

  1. Sie setzen die Top-Navigation auf Aktiviert, hier: Layout-Editor

  2. Im Bereich für die externen Top-Navigationslinks fügen Sie Folgendes hinzu:

    text:contact.support, url:https://yourwebsite.com/contact;

    Sie verwenden „contact.support“, da es sich um einen der Übersetzungsstrings handelt, die in Paligo verfügbar sind.

  3. Wählen Sie Option Aktiviert für das Verwenden von Übersetzungszeichenfolgen für Text in externen Top-Navigation-Links.

  4. Für die Veröffentlichung in den verschiedenen Sprachen gilt Folgendes:

    • Englisch: Der Linktext, der zu Ihrer oberen Navigationsüberschrift hinzugefügt wird, lautet Contact support

    • Französisch: Der Linktext, der Ihrer oberen Navigationsüberschrift hinzugefügt wird, lautet Contactez le support

    Der Link contact.support wird automatisch ins Französische übersetzt, da Sie einen Übersetzungsstring verwendet haben.