Anpassen Ihres Hilfethemas (Guide Professional und Enterprise)

Weitere Web-versierte Guide-Manager können direkt mit dem Seitencode arbeiten, um ein benutzerdefiniertes Thema für die Hilfe zu erstellen. Der Code ist in bearbeitbaren Vorlagen enthalten, die das Layout jedes Seitentyps sowie die globale Kopf- und Fußzeile der Hilfe definieren. Sie können auch eine voll funktionsfähige Vorlagensprache namens Curlybars verwenden, um auf Hilfedaten zuzugreifen und den Inhalt in Seitenvorlagen zu bearbeiten. Mit speziellen Vorlagen können Sie JavaScript hinzufügen oder das CSS anpassen.

Sie müssen über Guide Professional oder Enterprise verfügen, um auf den Seitencode für Ihr Hilfezentrumsthema zugreifen zu können.

Anpassen der Seitenvorlagen mit HTML und Curlybars

Der HTML-Code für die Hilfe ist in bearbeitbaren Vorlagen enthalten, die das Layout jedes Seitentyps sowie die globale Kopf- und Fußzeile definieren. Sie können auch eine voll funktionsfähige Vorlagensprache namens Curlybars verwenden, um auf Hilfedaten zuzugreifen und Inhalte in Seitenvorlagen zu bearbeiten.

Hinweis: In Guide Enterprise können Sie zusätzliche Seitenvorlagen für Artikel, Abschnitte und Kategorien erstellen, wenn Sie mehrere Versionen dieser Vorlagen benötigen.

Sie können die Vorlage für einen der folgenden Seitentypen oder Elemente anpassen:

• Artikelseite ( article_page.hbs ): Die einzelnen Artikelseiten in der Wissensdatenbank

• Kategorieseite (category_page.hbs) : Zielseiten

• Community-Postlistenseite ( community_post_list_page.hbs )

• Community-Post-Seite ( community_post_page.hbs )

• Community-Themenlistenseite ( community_topic_list_page.hbs )

• Community-Themenseite ( community_topic_page.hbs )

• Beitragsseite ( posts_page.hbs ): Die Liste der Beiträge, Community-Kommentare und Artikelkommentare eines Endbenutzers

• Dokumentkopf ( document_head.hbs ): Das headTag des Dokuments

• Fehlerseite ( error_page.hbs ): Die Meldung, die angezeigt wird, wenn ein Benutzer auf einer nicht vorhandenen Seite landet

• Fußzeile ( footer.hbs ): Die Balken werden unten auf allen Hilfeseiten angezeigt

• Header ( header.hbs ): Die Balken, die oben auf allen Hilfeseiten angezeigt werden

• Homepage ( home_page.hbs ): Die Zielseite der obersten Ebene für Ihre Hilfe

• Neue Community-Post-Seite ( new_community_post_page.hbs )

• Neue Anforderungsseite ( new_request_page.hbs ): das Anforderungs- oder Ticketübermittlungsformular

• Anforderungsseite ( request_page.hbs ): Die einzelnen Anforderungs- oder Ticketseiten

• Anforderungsseite ( request_page.hbs ): Die Liste der Anforderungen oder Tickets, die einem Benutzer zugewiesen wurden oder auf denen ein Benutzer CC-fähig ist

• Suchergebnisse ( search_results.hbs ): Das Anzeigeformat für Suchergebnisse

• Abschnittsseite ( section_page.hbs ): Zielseiten

• Folgende Seite ( subscriptions_page.hbs ): Die Liste der Kategorien, Abschnitte und Artikel, denen ein Benutzer folgt

• Benutzerprofilseite ( user_profile_page.hbs )

So bearbeiten Sie die Seitenvorlagen

• Klicken Sie in Guide in der Seitenleiste auf das Symbol Design anpassen ( ).

• Klicken Sie auf das Thema, das Sie bearbeiten möchten, um es zu öffnen.

• Klicken Sie auf Code bearbeiten .

• Klicken Sie im Abschnitt Vorlagen auf die Vorlage , die Sie ändern möchten.
  Die Seite wird im Code-Editor geöffnet.

• Verwenden Sie die Codeansicht, um die Vorlage zu bearbeiten.
  Sie können Folgendes hinzufügen, entfernen oder neu anordnen:

• Vorlagenausdrücke zum Anzeigen und Bearbeiten von Inhalten auf Ihren Seiten
  Beispielsweise zeigt der Breadcrumbs-Vorlagenhelfer {{breadcrumbs}}ein Breadcrumb-Navigationselement auf einer Seite an. Eine ausführliche Anleitung zu Vorlagenausdrücken finden Sie unter Hilfevorlagen .

• Platzhalter für dynamische Inhalte (siehe Hinzufügen von übersetztem Text )

• Einbettbare Widgets, die von Dritten erstellt wurden (z. B. das Twitter-Such-Widget)

• HTML-Markup

• Klicken Sie oben rechts auf Speichern, um Ihre Änderungen zu speichern.
  Die Änderungen werden auf jede Seite in Ihrem Thema angewendet, die auf der von Ihnen geänderten Vorlage basiert.

• Klicken Sie auf Vorschau, um eine Vorschau Ihrer Änderungen anzuzeigen (siehe Vorschau Ihres Themas in der Hilfe ).

• Nehmen Sie nach Bedarf weitere Codeänderungen vor und klicken Sie dann auf Speichern .
  Wenn Sie mit dem Bearbeiten der Seitenvorlage fertig sind, können Sie sie schließen.

Anpassen von CSS oder JavaScript

Sie können JavaScript-Code hinzufügen oder das CSS der Site anpassen. In den folgenden Ressourcen finden Sie Informationen zu den Funktionen, die Sie in der Hilfe mit ein wenig Codierung ausführen können:

So passen Sie CSS oder JavaScript an

• Klicken Sie in Guide in der Seitenleiste auf das Symbol Design anpassen ( ).

• Klicken Sie auf das Thema, das Sie bearbeiten möchten, um es zu öffnen.

• Klicken Sie auf Code bearbeiten .

• Klicken Sie auf script.js , um das JavaScript zu ändern, oder auf style.css , um das CSS zu ändern.
  Die Datei wird im Code-Editor geöffnet.

• Fügen Sie JavaScript oder CSS in der Codeansicht hinzu oder ändern Sie sie.

• Klicken Sie oben rechts auf Speichern, um Ihre Änderungen zu speichern.
  Die Änderungen werden auf Ihr Thema angewendet.

• Klicken Sie auf Vorschau, um eine Vorschau Ihrer Änderungen anzuzeigen (siehe Vorschau Ihres Themas in der Hilfe ).

• Nehmen Sie nach Bedarf weitere Codeänderungen vor und klicken Sie dann auf Speichern .
  Wenn Sie fertig sind, können Sie die Datei schließen.

Verwenden von Variablen in CSS und HTML

Die Eigenschaften, die Sie im Bedienfeld „Einstellungen“ auswählen oder in Ihrer Manifestdatei für Farben, Schriftarten und Themenbilder festlegen, werden in Variablen gespeichert. Sie können diese Variablen in der Datei style.css des Themas verwenden . Sie können die Variablen auch mithilfe von Curlybars-Ausdrücken in HTML-Seitenvorlagen referenzieren.

Die Variablen sind nützlich, wenn Sie denselben Wert an mehreren Stellen angeben und schnell aktualisieren möchten. Durch das Aktualisieren der Eigenschaft wird sie überall dort aktualisiert, wo die Variable verwendet wird. Das Standardthema für Kopenhagen enthält einige Variablen für Farben und Schriftarten. Sie können die Namen und Beschriftungen ändern, Variablen löschen oder eigene hinzufügen (siehe Referenz zum Manifest „Einstellungen“ ).

Im Standardthema von Kopenhagen haben Sie standardmäßig die folgenden Variablen:

• brand_color ist die Markenfarbe für wichtige Navigationselemente

• brand_text_color ist die Markenfarbe für Schwebeflug und aktive Zustände

• text_color ist die Textfarbe für Text- und Überschriftenelemente

• link_color ist die Textfarbe für Linkelemente

• background_color ist die Hintergrundfarbe Ihrer Hilfe

• heading_font ist die Schriftart für Überschriften

• text_font ist die Schriftart für Textkörper

• logo ist das Firmenlogo

• favicon ist das Symbol, das in der Adressleiste Ihres Browsers angezeigt wird

• homepage_background_image ist das Heldenbild auf der Homepage

• community_background_image ist das Heldenbild auf der Community-Themenseite

• community_image ist das Bild für den Community-Bereich auf der Homepage

Informationen zur Verwendung von Variablen in CSS und HTML finden Sie unter:

• Beispiele für die Verwendung von Variablen in CSS

• Beispiele für die Verwendung von Variablen in Curlybars in HTML

Beispiele für die Verwendung von Variablen in CSS

Die Eigenschaften, die Sie für Farben, Schriftarten und Themenbilder festlegen, werden in Variablen gespeichert, die Sie in der Datei style.css Ihres Themas verwenden können .

Beispielsweise können Sie einige der Standardvariablen in CSS mit der folgenden Syntax verwenden:

• $brand_color

• $brand_tex_color

• $heading_font

• $text_font

In der CSS-Datei weisen Sie einer CSS-Eigenschaft eine Variable zu, so wie Sie einen normalen Wert zuweisen würden. Zum Beispiel:

.button {

  label-color: $text_font;

}

Sie können auch einzelne geschweifte Klammern verwenden, um den Helfer wie folgt in einen CSS-Ausdruck einzubetten:

max-width: #{$search_width}px

Beispiele für die Verwendung von Variablen in Curlybars in HTML

Die Eigenschaften, die Sie für Farben, Schriftarten und Themenbilder festlegen, werden in Variablen gespeichert, auf die Sie mit Curlybars-Ausdrücken in HTML-Seitenvorlagen verweisen können.

Die Variablen werden zu Eigenschaften des settingsObjekts in Curlybars. Wie bei jedem Curlybars-Objekt können Sie doppelte geschweifte Klammern und Punktnotation verwenden, um eine Eigenschaft in eine Seitenvorlage einzufügen.

Zum Beispiel:

• {{settings.color_1}}ist der HEX-Wert einer Farbe. Zum Beispiel:#FF00FF

• {{{settings.font_1}}ist der Schriftstapel. Das System ist beispielsweise definiert als:‘-apple-system, BlinkMacSystemFont, ‚Segoe UI‘, Helvetica, Arial, sans-serif“

• {{settings.homepage_background_image}}ist der Pfad zu der in diesem Feld gespeicherten Datei. Zum Beispiel:p8.zdassets.com/theme_assets/…

• {{settings.range_input}} ist der Wert des Bereichseingangs.