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 eigenen HTML-Code für Ihr Help-Center-Design verwenden möchten, lesen Sie den BeitragZulassen von unsicheren HTML-Elementen in Beiträgen.
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麻省理工学院窝Kategorien Abschnitten Beiträgen, denen ein Benutzer folgt
- Benutzerprofilseite(user_profile_page.hbs)
So bearbeiten Sie die Seitenvorlagen
- das Klicken您在der Seitenleiste冯导再见SymbolErscheinungsbild anpassen(
).
- Klicken Sie neben dem gewünschten Design aufAnpassen.
- Klicken Sie aufCode bearbeiten.
- Klicken Sie im AbschnittVorlagenauf 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ückezum 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 unterHelp-Center-Vorlagen. - Platzhalter für dynamische Inhalte(sieheHinzufügen von übersetztem Text)
- Einbettbare Widgetsvon Drittanbietern, wie etwa das Twitter-Such-Widget
- HTML-Markup
- Vorlagenausdrückezum Anzeigen und Manipulieren von Seiteninhalten
- Klicken Sie oben rechts aufSpeichern, 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 zu sehen, klicken Sie aufVorschau(sieheAnzeigen einer Vorschau des Help-Center-Designs).
- Nehmen Sie alle anderen gewünschten Codeänderungen vor und klicken Sie dann aufSpeichern.
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
- das Klicken您在der Seitenleiste冯导再见SymbolErscheinungsbild anpassen(
).
- Klicken Sie neben dem gewünschten Design aufAnpassen.
- Klicken Sie aufCode bearbeiten.
- Klicken Sie aufscript.js, um den JavaScript-Code zu bearbeiten, bzw. aufstyle.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 aufSpeichern, um die Änderungen zu speichern.
Die Änderungen werden auf Ihr Design angewendet.
- Um eine Vorschau zu sehen, klicken Sie aufVorschau(sieheAnzeigen einer Vorschau des Help-Center-Designs).
- Nehmen Sie alle anderen gewünschten Codeänderungen vor und klicken Sie dann aufSpeichern.
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 Dateistyle.cssfü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 (sieheSettings manifest reference).
Im Standarddesign „Copenhagen“ sind standardmäßig die folgenden Variablen verfügbar:
brand_color
: markenspezifische Farbe für die wichtigsten Navigationselementebrand_text_color
: markenspezifische Farbe für Hover-/Aktivzustandtext_color
: Textfarbe für Text und Überschriftenlink_color
: Textfarbe für Linkelementebackground_color
: Hintergrundfarbe für Ihr Help Centerheading_font
: Schriftart für Überschriftentext_font
: Schriftart毛皮文本logo
: Logo Ihres Unternehmensfavicon
: Symbol in der Adressleiste des Browershomepage_background_image
: Hero-Bild auf der Homepagecommunity_background_image
: Hero-Bild auf der Community-Themenseitecommunity_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 Dateistyle.cssIhres 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}px
Beispiele 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 Objektssettings
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}}
0 Kommentare
Bittemelden Sie sich an, um einen Kommentar zu hinterlassen.