Guide-Administratoren, die Erfahrung im Bereich Webdesign haben, können direkt mit dem Seitencode arbeiten, um ein angepasstes Design für das Help Center zu entwickeln. Angepasste Designs können folgende Elemente enthalten:
- Bearbeitbare Vorlagen, die das Layout der einzelnen Seiten definieren (z. B. Beitragsseite, Kategorieseite oder Community-Themenseite)
- Angepasste Seiten, die Sie selbst erstellen und an beliebiger Stelle in Ihr Help Center einfügen
- Globale Kopf- und Fußbereiche für das Help Center
Zum Zugriff auf Help-Center-Daten und Manipulieren der Inhalte in Seitenvorlagen und angepassten Seiten können Sie auch Curlybars verwenden, eine Vorlagensprache, die einen reichhaltigen Funktionsumfang bietet. Außerdem enthält Ihr Design JavaScript- und CSS-Dateien, mit denen Sie das Erscheinungsbild und Verhalten des Designs auf Ihrer Website ändern können. Wenn Sie Ihr Help-Center-Design mit Ihrem eigenen HTML-Code bearbeiten möchten, lesen Sie den Beitrag Bearbeiten des Quellcodes von Help-Center-Beiträgen.
Wenn Sie den Code eines Designs ändern (z. B. seine Vorlagen, JavaScript oder CSS), wird in der Designvorschau das Symbol </> angezeigt. Daran ist zu erkennen, dass der Code des Designs geändert wurde und keine neuen Funktionen und Änderungen mehr erhalten wird.
In diesem Beitrag werden folgende Themen behandelt:
Verwandte Beiträge:
Anpassen von Seitenvorlagen und angepassten Seiten mit HTML und Curlybars
Der HTML-Code für das Help Center ist in bearbeitbaren Vorlagen enthalten, die das Layout von Seitentypen und angepassten Seiten sowie einen globalen Kopf- und Fußbereich definieren. Sie können die Inhalte dieser Elemente auch mit der umfangreichen Vorlagensprache Curlybars erstellen und bearbeiten.
Sie können die Vorlage für die folgenden Seitentypen oder Elemente anpassen oder eigene angepasste Seiten erstellen.
- Angepasste Seiten (custom_page.hbs): Seiten, die Sie selbst erstellen und an beliebiger Stelle im Help Center verlinken.
- Beitragsseite (article_page.hbs): Seite für die einzelnen Beiträge in der Wissensdatenbank
- Kategorieseite (category_page.hbs): Ausgangsseiten für Kategorien
- Seite zur Auflistung von Community-Posts (community_post_list_page.hbs)
- Community-Post-Seite (community_post_page.hbs)
- Seite zur Auflistung von Community-Themen (community_topic_list_page.hbs)
- Community-Themenseite (community_topic_page.hbs)
- Seite mit Beiträgen (contributions_page.hbs): Liste mit Beiträgen, Community-Kommentaren und Beitragskommentaren eines Endbenutzers
-
Kopfbereich des Dokuments (document_head.hbs): alles, was im
head-Tag des Dokuments enthalten ist - Fehlerseite (error_page.hbs): Nachricht, die erscheint, wenn ein Benutzer versucht, zu einer Seite zu gehen, die nicht existiert
- Fußbereich (footer.hbs): der Bereich, der unten auf allen Help-Center-Seiten erscheint
- Kopfbereich (header.hbs): der Bereich, der oben auf allen Help-Center-Seiten erscheint
- Homepage (home_page.hbs): die oberste Ausgangsseite für das Help Center
- Seite für neuen Community-Post (new_community_post_page.hbs)
- Seite für neue Anfrage (new_request_page.hbs): Formular zum Einreichen von Anfragen oder Tickets
- Anfragenseite (request_page.hbs): die einzelnen Anfrage- oder Ticketseiten
- Seite zur Auflistung von Anfragen (requests_page.hbs): Liste mit Anfragen oder Tickets, die einem Benutzer zugewiesen sind bzw. bei denen er auf CC gesetzt ist
- Suchergebnisse (search_results.hbs): Anzeigeformat für Suchergebnisse
- Abschnittsseite (section_page.hbs): Ausgangsseiten für Abschnitte
- Seite mit gefolgten Inhalten (subscriptions_page.hbs): Liste mit den Kategorien, Abschnitten und Beiträgen, denen ein Benutzer folgt
- Benutzerprofilseite (user_profile_page.hbs)
So bearbeiten Sie die Seitenvorlagen
- Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen (
). - Klicken Sie neben dem gewünschten Design auf Anpassen.
- Klicken Sie auf Code bearbeiten.
- Klicken Sie im Abschnitt Vorlagen auf die Vorlage oder angepasste Seite, die Sie ändern möchten.
Die Seite wird im Codeeditor geöffnet.
- Bearbeiten Sie die Vorlage oder Seite in der Codeansicht.
Sie können Folgendes hinzufügen, entfernen oder neu anordnen:
-
Vorlagenausdrücke zum Anzeigen und Manipulieren von Seiteninhalten
Der Vorlagen-Helper
{{breadcrumbs}}zeigt beispielsweise ein Brotkrümel-Navigationselement auf einer Seite an. Detaillierte Informationen zu Vorlagenausdrücken finden Sie unter Help-Center-Vorlagen. - Platzhalter für dynamische Inhalte (siehe Hinzufügen von übersetztem Text)
- Von Drittanbietern erstellte einbettbare Widgets
- HTML-Markup
-
Vorlagenausdrücke zum Anzeigen und Manipulieren von Seiteninhalten
- Klicken Sie oben rechts auf Speichern, um die Änderungen zu speichern.
Wenn Sie eine Vorlage bearbeitet haben, werden die Änderungen auf alle Seiten Ihres Designs angewendet, die auf der geänderten Vorlage basieren.
- Um eine Vorschau der vorgenommenen Änderungen anzuzeigen, klicken Sie auf Vorschau. Weitere Informationen finden Sie unter Anzeigen einer Vorschau des Help-Center-Designs.
Hinweis: In der Designvorschau sind nicht alle Funktionen verfügbar. Die Vorschau ist lediglich dazu gedacht, Änderungen am Erscheinungsbild eines Designs zu überprüfen, und dient nicht zum Testen seiner interaktiven Funktionalität. Funktionstests sollten stattdessen in einer Sandbox durchgeführt werden.
- Nehmen Sie alle anderen gewünschten Codeänderungen vor und klicken Sie dann auf Speichern.
Wenn Sie mit der Bearbeitung fertig sind, können Sie die Seitenvorlage oder die angepasste Seite schließen.
Anpassen des CSS- oder JavaScript-Codes
Sie können JavaScript hinzufügen oder das CSS der Site anpassen. Wenn Sie sehen möchten, was sie mit ein wenig Coding im Help Center erreichen können, lesen Sie folgende Ressourcen:
- Community-Tipps zum Thema Help Center
- CSS-Rezeptbuch für das Help Center
- JavaScript-Rezeptbuch für das Help Center
So passen Sie den CSS- oder JavaScript-Code an
- Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
- Klicken Sie neben dem gewünschten Design auf Anpassen.
- Klicken Sie auf Code bearbeiten.
- Klicken Sie auf script.js, um den JavaScript-Code zu bearbeiten, bzw. auf style.css, um das CSS zu bearbeiten.
Die Datei wird im Codeeditor geöffnet.
- Fügen Sie JavaScript- oder CSS-Code in der Codeansicht hinzu bzw. nehmen Sie die gewünschten Änderungen vor.
- Klicken Sie oben rechts auf Speichern, um die Änderungen zu speichern.
Die Änderungen werden auf Ihr Design angewendet.
- Um eine Vorschau zu sehen, klicken Sie auf Vorschau (siehe Anzeigen einer Vorschau des Help-Center-Designs).
- Nehmen Sie alle anderen gewünschten 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 für Farben, Schriftarten und Designbilder, die Sie im Einstellungsfenster auswählen oder in der Manifestdatei festlegen, werden in Variablen gespeichert. Diese Variablen können dann in der Datei style.css für das Design verwendet werden. Über Curlybars-Ausdrücke können Sie in HTML-Seitenvorlagen auf die Variablen Bezug nehmen.
Diese Variablen sind nützlich, wenn Sie den gleichen Wert an mehreren Stellen spezifizieren und schnell aktualisieren möchten. Wenn Sie eine Eigenschaft aktualisieren, wird sie überall geändert, an der sie verwendet wird. Das Standarddesign „Copenhagen“ enthält einige Variablen für Farben und Schriftarten. Sie können die Namen und Beschriftungen ändern, Variablen löschen und eigene Variablen hinzufügen (siehe Anpassen des Einstellungsfensters eines Designs).
Im Standarddesign „Copenhagen“ sind standardmäßig die folgenden Variablen verfügbar:
-
brand_color: markenspezifische Farbe für die wichtigsten Navigationselemente -
brand_text_color: markenspezifische Farbe für Hover-/Aktivzustand -
text_color: Textfarbe für Text und Überschriften -
link_color: Textfarbe für Linkelemente -
background_color: Hintergrundfarbe für Ihr Help Center -
heading_font: Schriftart für Überschriften -
text_font: Schriftart für Text -
logo: Logo Ihres Unternehmens -
favicon: Symbol in der Adressleiste des Browers -
homepage_background_image: Hero-Bild auf der Homepage -
community_background_image: Hero-Bild auf der Community-Themenseite -
community_image: Bild für den Community-Abschnitt auf der Homepage
Beispiele für die Nutzung von Variablen in CSS
Die Eigenschaften, die Sie für Farben, Schriftarten und Designbilder festlegen, werden in Variablen gespeichert, die Sie in der Datei style.css Ihres Designs nutzen können.
Anhand der folgenden Syntax können Sie bestimmte Standardvariablen in der CSS-Datei verwenden:
-
$brand_color -
$brand_tex_color -
$heading_font -
$text_font
In der CSS-Datei können Sie einer CSS-Eigenschaft eine Variable auf die gleiche Weise zuweisen wie einen normalen Wert. Beispiel:
.button {
label-color: $text_font;
}Sie können auch einfache geschweifte Klammern verwenden, um den Helper in einen CSS-Ausdruck einzubetten:
max-width: #{$search_width}pxBeispiele für die Nutzung von Variablen in HTML über Curlybars
Die Eigenschaften, die Sie für Farben, Schriftarten und Designbilder festlegen, werden in Variablen gespeichert, auf die Sie in HTML-Seitenvorlagen über Curlybars-Ausdrücke Bezug nehmen können.
Die Variablen werden zu Eigenschaften des Objekts settings in Curlybars. Wie bei jedem Curlybars-Objekt können Sie doppelte geschweifte Klammern und die Punktschreibweise verwenden, um eine Eigenschaft in eine Seitenvorlage einzufügen.
Beispiel:
-
{{settings.color_1}}: HEX-Wert einer Farbe. Beispiel:#FF00FF -
{{{settings.font_1}}: Font Stack. Beispiel:'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" -
{{settings.homepage_background_image}}: Pfad zu der in diesem Feld gespeicherten Datei. Beispiel:p8.zdassets.com/theme_assets/... -
{{settings.range_input}}: Wert des Eingabebereichs.
Das settings-Objekt kann als Eingabe für jeden beliebigen Helper verwendet werden. Beispiel:
{{is settings.enabled}} ... {{/is}}