Themes und Theme-Komponenten ermöglichen die Verwaltung von hochgeladenen Assets wie Bildern und Schriftarten. Sie können steuern, welche Assets Ihr Theme akzeptiert, mithilfe der Site-Einstellung: theme authorized extensions
Assets in Themes und Komponenten einbinden
Für Remote-Themes
Remote-Themes umfassen:
- Themes und Komponenten, die aus der Liste der \u003ckbd\u003eBeliebte\u003c/kbd\u003e Themes installiert wurden
- Themes und Komponenten, die mit der Methode \u003ckbd\u003eAus einem Git-Repository\u003c/kbd\u003e installiert wurden
Um Assets in ein Remote-Theme oder eine Remote-Theme-Komponente hochzuladen, siehe Create and share a font theme component für ein detailliertes Beispiel.
Assets in lokale Themes und Komponenten hochladen
Lokale Themes umfassen:
- Die standardmäßigen Light- und Dark-Themes, die mit jeder Discourse-Instanz ausgeliefert werden
- Themes und Komponenten, die mit der Installationsmethode \u003ckbd\u003e+ Neu erstellen\u003c/kbd\u003e erstellt wurden
- Themes und Komponenten, die von Ihrem lokalen Computer mit der Installationsmethode \u003ckbd\u003eVon Ihrem Gerät\u003c/kbd\u003e hochgeladen wurden.
Um Assets in ein lokales Theme oder eine lokale Theme-Komponente hochzuladen, navigieren Sie zu Ihrem Theme oder Ihrer Komponente und wählen Sie im Abschnitt Uploads \u003ckbd\u003e+ Hinzufügen\u003c/kbd\u003e:
Wählen Sie im Modal „Upload hinzufügen“ eine Datei aus und geben Sie einen SCSS-Variablennamen ein, den Sie mit Ihren CSS-, Javascript- und/oder Handlebars-Anpassungen verwenden können
Nach dem Hochladen erscheint das Asset in der Uploads-Liste:
\u003e 
Wichtiger Hinweis: Fügen Sie Uploads nicht über die Admin-Oberfläche zu Themes und Komponenten hinzu, wenn die Komponente remote aus einem Git-Repository installiert wurde. Updates für die Komponente löschen alle Uploads, die nicht im Git-Repository enthalten waren.
Wie man die Assets verwendet
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);
}
\u003e :information*source: _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 ein Theme-Asset nicht direkt zu reinem HTML hinzufügen (z. B. in den Header- oder Nach-Header-Abschnitten des Admin-Anpassungsfelds). Sie müssen eine Handlebars-Vorlage oder die Plugin-API verwenden (mehr dazu unter Developing Discourse Themes & Theme Components).
Eine mögliche Umgehung besteht darin, Ihr Asset als Hintergrundbild über SCSS zu laden (wie im obigen Beispiel). Im Header-Abschnitt Ihres Themes könnten Sie also 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);
}
Auf Theme-Uploads als Einstellungen zugreifen
Sie können theme_uploads auch als Einstellungen in JavaScript behandeln (zugehöriger Commit).
Dies ermöglicht Themes und Komponenten den Zugriff auf Theme-Assets.
Innerhalb des Theme-JS können Sie die URL für ein Asset nun mit Folgendem abrufen:
settings.theme_uploads.name
Zusätzliche Informationen
\u003csmall\u003eDieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.\u003c/small\u003e
\u003c!-- START DOCS ASSET MAP
[
{
"local_path": "/assets/include-assets-1.png",
"local_sha1": "12a3683eb36cf526798213da2feb9622d69bd18c",
"remote_short_url": "upload://53zFlrwfbxHMTSZZOJeHlPDlWPC.png"
},
{
"local_path": "/assets/include-assets-2.png",
"local_sha1": "f0f2a4c7824d17968e12791feb8bac58bb0a9f7c",
"remote_short_url": "upload://Awzjc3IB0oNubJQ6gxRchkxymxA.png"
},
{
"local_path": "/assets/include-assets-3.png",
"local_sha1": "ed9aa991243ef772913cbbf803eba2aa0195e1c6",
"remote_short_url": "upload://5K0TZwxapCbdFqiqrpdqMttCsCC.png"
}
]
END DOCS ASSET MAP –\u003e