Verwenden eigener Design-Assets für das Help Center (Guide Professional und Enterprise)

Direktzugriff: 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.

So laden Sie eigene Design-Assets hoch

1. Klicken Sie in der Seitenleiste von Guide auf das Symbol Erscheinungsbild anpassen ().
2. Klicken Sie auf das zu bearbeitende Design, um es zu öffnen.
3. Klicken Sie auf Code bearbeiten.

   

4. Klicken Sie im Abschnitt Assets auf den Link Asset hinzufügen und wählen Sie dann 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.

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 auf das zu bearbeitende Design, um es zu öffnen.
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 auf das zu bearbeitende Design, um es zu öffnen.
3. Klicken Sie auf Code bearbeiten.
4. Klicken Sie im Abschnitt Assets auf die zu ersetzende Asset-Datei.
5. Klicken Sie oben rechts auf das Optionsmenü und dann 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 auf das zu bearbeitende Design, um es zu öffnen.
3. Klicken Sie auf Code bearbeiten.

   

4. Klicken Sie im Abschnitt Assets auf die zu löschende Asset-Datei.
5. Klicken Sie oben rechts auf das Optionsmenü und dann 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.