Da die Themes leistungsfähiger werden, gibt es mehr darüber zu wissen, wie sie funktionieren. Wir haben viele detaillierte Dokumentationen unter #howto / #themes, aber wenn Sie nur etwas brauchen, um sich zu erinnern, kann dieser Leitfaden helfen.
Allgemeine Ressourcen
Leitfaden für Anfänger
Leitfaden für Designer
Leitfaden für Entwickler
Theme Creator
Theme CLI
Theme-Verzeichnis
Komponenten-Verzeichnis
Theme Modifiers
Themebare Website-Einstellungen
Datei-/Ordnerstruktur mehr lesen
about.json
settings.yml
common/, desktop/, mobile/
{common|desktop|mobile}.scss
head_tag.html
header.html
after_header.html
body_tag.html
footer.html
embedded.scss (nur common)
locales/
en.yml
...
assets/
(beliebig benannte Dateien, referenziert in about.json)
stylesheets/
(beliebig benannte Dateien, können voneinander und aus common/desktop/mobile.scss importiert werden)
javascripts/
(beliebig benannte Dateien. Unterstützt .js .hbs und .raw.hbs)
about.json Strukturinformationen, verfügbare Metadaten
{
"name": "Mein Theme",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"variable-name": "assets/my-asset.jpg"
},
"color_schemes": {
"Mein Farbschema": {
"primary": "222222"
}
}
}
SCSS
Javascript mehr lesen
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Ihr Code hier
});
Javascript mit mehreren Dateien
Einstellungen mehr lesen
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Alte Methode. Es ist besser, diese in den Locale-Dateien zu definieren (siehe unten)
en: English Description
fr: Description Française
Zugriff von JavaScript:
console.log(settings.fruit);
Zugriff von gjs-Vorlagen:
<template>{{settings.fruit}}</template>
Zugriff von scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Themebare Website-Einstellungen mehr lesen
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Zugriff von JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Zugriff von gjs-Vorlagen:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Übersetzungen mehr lesen
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Diese werden im Admin-Panel verwendet. Sie werden Ihren js/hbs-Dateien nicht zur Verfügung gestellt
description: Dieses Theme ermöglicht es Ihnen, erstaunliche Dinge auf Ihrem Discourse zu tun
settings:
fruit: Eine Beschreibung der whitelisted_fruits-Einstellung
Zugriff von JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Zugriff von gjs-Vorlagen:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.
