Verwenden eigener Design-Assets für das Help Center

Welchen Plan habe ich?

Quick Look: Guide-Administrator > Erscheinungsbild anpassen > [Design auswählen] > Bearbeiten > Assets

Sie können Assets wie Bilder und Dateien für ein Help-Center-Design hochladen.

Dieser Beitrag enthält die folgenden Abschnitte:

• Hochladen eines Assets für Ihr Design
• Verwenden hochgeladener Assets im Code eines Designs
• Ersetzen eines Assets in Ihrem Design
• Löschen eines Design-Assets

Hochladen eines Assets für Ihr Design

Sie können Assets wie Bilder und Dateien in das Help Center hochladen. Die Assets werden im Webcache eines Cloud Delivery Network (CDN) gespeichert. Webcaches verbrauchen weniger Bandbreite, reduzieren die Serverlast und verkürzen die Antwortzeiten.

Für Designs können zahlreiche Datentypen verwendet werden (siehe Zulässige Dateitypen für Design-Assets).

So laden Sie eigene Design-Assets hoch

1. Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
2. Klicken Sie neben dem gewünschten Design auf Anpassen.
3. Klicken Sie auf Code bearbeiten.

   

4. Klicken Sie im Bereich Dateien auf Neue hinzufügen und dann auf Asset.

   

5. Wählen Sie die gewünschte Datei aus. Die Namen von Design-Assets müssen eindeutig sein und können maximal 50 Zeichen lang sein. Die folgenden Zeichen sind in Asset-Namen zulässig: Buchstaben, Ziffern, Punkt, Minuszeichen, Pluszeichen, Unterstreichungszeichen, Bindestrich. Bei Asset-Namen wird nicht zwischen Groß- und Kleinschreibung unterschieden. Sie können also nicht sowohl eine Datei namens asset.jpg als auch eine andere namens Asset.jpg haben.

   Die Asset-Datei wird zur Asset-Liste hinzugefügt.

Zulässige Dateitypen für Design-Assets

In der folgenden Tabelle sind die Dateitypen aufgeführt, die als Designassets zulässig sind. Die zulässigen Dateitypen für Assets sind auf die im Help-Center-Design verwendeten Dateitypen beschränkt.

Asset-Kategorie	Zulässige Dateitypen
Bilder	jpg, jpeg, png, gif, svg, webp, tiff, tif, bmp, ico, webm
Schriftarten	woff2, woff, eot, otf, ttf, svg
Textdateien	js, css, html, json, txt, xml
Andere	mp4, swf, wav, ogg, mp3

Rich-Content-Formate wie Microsoft PowerPoint, Microsoft Word und PDF können nur als Beitragsanhänge verwendet werden, nicht als Designassets.

Verwenden hochgeladener Assets im Code eines Designs

Sie können hochgeladene Assets im Stylesheet des Designs (style.css) oder in einer Vorlage referenzieren. In der Datei style.css verwenden Sie die von Guide unterstützten Asset-Pfadvariablen. In Vorlagen verwenden Sie den Asset-Helper von Curlybars.

Mit Asset-Variablen und -Helpern im Code können Sie die Assets im Design mühelos ersetzen, ohne den eigentlichen Code des Designs zu bearbeiten. Weitere Informationen finden Sie unter Ersetzen eines Assets in Ihrem Design.

Hinweis: In der Datei script.js des Designs können Sie weder die Pfadvariablen noch den Asset-Helper verwenden.

So verwenden Sie ein hochgeladenes Asset im Code eines Designs

1. Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
2. Klicken Sie neben dem gewünschten Design auf Anpassen.
3. Klicken Sie auf Code bearbeiten.
4. Klicken Sie im Abschnitt Assets auf die gewünschte Asset-Datei.

   Es erscheint eine Reihe von Ausdrücken für das Asset:

   

5. Klicken Sie auf Kopieren, um den benötigten Asset-Ausdruck in die Zwischenablage zu kopieren.
6. Fügen Sie den Asset-Ausdruck in den Code des Designs ein.

Beispiele

style.css

.class-name { 
  background: url($assets-backpack2-jpeg);
}

Der Wert assets-backpack2-jpeg ist eine Variable mit dem relativen Pfad zum Asset.

.hbs-Dateien

Im HTML-Markup:

<img src="{{asset 'backpack2.jpeg'}}">

In einem style-Tag:

<style>
  .class-name { 
    background: url("{{asset 'backpack2.jpeg'}}");
  }
</style>

In einem script-Tag:

<script>
  var assetsBackpack2 = "{{asset 'backpack2.jpeg'}}";
</script>

Sie können den Asset-Helper in einem script-Tag in einer Vorlage verwenden, nicht aber in der Datei script.js.

Weitere Informationen zum Bearbeiten des Designcodes finden Sie unter Anpassen des Help-Center-Designs.

Ersetzen eines Assets in Ihrem Design

Mit Asset-Variablen und -Helpern können Sie die Assets im Design dynamisch ersetzen, ohne den eigentlichen Code des Designs zu bearbeiten (siehe Verwenden hochgeladener Assets im Code eines Designs oben). Sie können das Design ganz einfach durch Auswahl einer neuen Asset-Datei in Ihrem System aktualisieren.

So ersetzen Sie ein Asset

1. Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
2. Klicken Sie neben dem gewünschten Design auf Anpassen.
3. Klicken Sie auf Code bearbeiten.
4. Suchen Sie im Abschnitt Assets die Asset-Datei, die Sie ersetzen möchten.
5. Klicken Sie im Optionsmenü hinter dem Namen der Asset-Datei auf Ersetzen.

   

6. Wählen Sie ein neues Asset in Ihrem System aus.

   Nach Hochladen der Asset-Datei wird das Design durch Variablen oder Helper, die das Asset referenzieren, dynamisch aktualisiert. Diese Änderung tritt sofort in Kraft.

   Das Asset wird nicht ersetzt, wenn Sie die vollständige URL des Assets in der HTML-Quelle der veröffentlichten Help-Center-Seiten angegeben haben. Der Link zum Asset wird gebrochen, da beim Ersetzen eines Assets die veröffentlichte URL geändert wird. Aus diesem Grund sollten Sie in einem Design, einer Seitenvorlage und einer externen Webseite die veröffentlichte Asset-URL nicht verwenden.

Löschen eines Design-Assets

Sie können ein nicht mehr benötigtes Design-Asset problemlos löschen.

So löschen Sie ein Design-Asset

1. Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
2. Klicken Sie neben dem gewünschten Design auf Anpassen.
3. Klicken Sie auf Code bearbeiten.

   

4. Suchen Sie im Abschnitt Assets die Asset-Datei, die Sie löschen möchten.
5. Klicken Sie im Optionsmenü hinter dem Namen der Asset-Datei auf Asset löschen.

   

6. Bestätigen Sie, dass Sie das Asset wirklich löschen möchten.

   Das Asset wird aus der Asset-Liste entfernt.