Assets (z. B. Bilder, Schriftarten) in Themes und Komponenten einbinden

[Discourse]

Themen und Theme-Komponenten ermöglichen es Ihnen, hochgeladene Assets wie Bilder und Schriftarten zu verwalten. Sie können steuern, welche Assets Ihr Theme akzeptiert, über die Seiteneinstellung: theme authorized extensions

Einbinden von Assets in Themes und Komponenten

Für Remote-Themes

Remote-Themes umfassen:

• Themes und Komponenten, die aus der Beliebt-Liste der Themes installiert wurden
• Themes und Komponenten, die mit der Methode Aus einem Git-Repository installiert wurden

Um Assets in ein Remote-Theme oder eine Theme-Komponente hochzuladen, siehe Create and share a font theme component für ein detailliertes Beispiel.

Hochladen von Assets in lokale Themes und Komponenten

Lokale Themes umfassen:

• Die Standard-Light- und Dark-Themes, die mit jeder Discourse-Instanz ausgeliefert werden
• Themes und Komponenten, die mit der Installationsmethode + Neu erstellen erstellt wurden
• Themes und Komponenten, die von Ihrem lokalen Computer mit der Installationsmethode Von Ihrem Gerät hochgeladen wurden.

Um Assets in ein lokales Theme oder eine Theme-Komponente hochzuladen, navigieren Sie zu Ihrem Theme oder Ihrer Komponente und wählen Sie im Bereich Uploads + Hinzufügen aus:

Wählen Sie im Dialogfeld „Upload hinzufügen“ eine Datei aus und geben Sie einen SCSS-Variablennamen ein, der mit Ihren CSS-, JavaScript- und/oder Handlebars-Anpassungen verwendet wird.

Sobald hochgeladen, erscheint das Asset in der Upload-Liste:

Wichtiger Hinweis: Fügen Sie keine Uploads über die Admin-Oberfläche zu Themes und Komponenten hinzu, wenn die Komponente remote aus einem Git-Repository installiert wurde. Updates der Komponente werden alle Uploads löschen, die nicht im Git-Repository enthalten waren.

Wie Sie die Assets nutzen können

SCSS

@font-face {
  font-family: Amazing;
  src: url($Comic-Sans) format("woff2");
}

body {
  font-family: Amazing;
  font-size: 15px;
}

.d-header {
  background-image: url($texture);
}

:informationsource: _Wenn Sie ttf- oder otf-Schriftarten verwenden, stellen Sie sicher, dass Sie das Format opentype verwenden.

Javascript

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  console.log(settings.theme_uploads.balloons);
});

HTML

Sie können kein Theme-Asset direkt in vanilla HTML hinzufügen (wie in den Abschnitten Header oder After Header des Customization-Admin-Panels). Sie müssen eine Handlebars-Vorlage oder die Plugin-API verwenden (mehr dazu unter Developing Discourse Themes & Theme Components).

Eine Möglichkeit, dies zu umgehen, besteht darin, Ihr Asset als Hintergrundbild über SCSS zu laden (wie im obigen Beispiel). So könnten Sie im Header-Abschnitt Ihres Themes Folgendes hinzufügen:

<div class="my-custom-div">
  <a href="/"></a>
</div>

und dann in Ihrem CSS:

.my-custom-div a {
  height: 50px;
  width: 100px;
  background-image: url($asset-name);
}

Zugriff auf Theme-Uploads als Einstellungen

Sie können theme_uploads auch als Einstellungen in JavaScript behandeln (zugehöriger Commit).

Dies ermöglicht es Themes und Komponenten, auf Theme-Assets zuzugreifen.

Innerhalb des Theme-JS können Sie die URL für ein Asset jetzt mit Folgendem abrufen:

settings.theme_uploads.name

Zusätzliche Informationen

• Create and share a font theme component

---

Dieses Dokument wird versioniert verwaltet – schlagen Sie Änderungen auf GitHub vor.

[bitmage (Brandon Mason)]

Ich habe ein Assets-Verzeichnis mit 5 SVG-Dateien für Social-Media-Icons erstellt. Ich habe sie alle zu about.json hinzugefügt, wie in Create and Share a font theme component angegeben. Ich verwende sie in meinem CSS in body_tag.html.

Erwartet: Die Icons sollten geladen werden.

Tatsächlich: Die Icons werden nicht angezeigt. Die Entwickler-Toolbar zeigt, dass der Browser diese als registrierte Bilder kennt… aber es gibt keine Daten darin.

Was fehlt mir? Gibt es einen Build-Schritt oder so etwas?