Struktur von Themes und Theme-Komponenten

[Discourse]

Discourse unterstützt native Themes, die aus einem .tar.gz-Archiv oder aus einem entfernten Git-Repository bezogen werden können, einschließlich privater Repositories.

Ein Beispiel-Theme finden Sie unter: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

Das Git-Repository wird auf Updates überprüft (einmal täglich) oder durch Klicken auf die Taste Auf Updates prüfen. Wenn Änderungen erkannt werden, ändert sich die Taste Auf Updates prüfen in Auf neueste Version aktualisieren.

Um ein Theme zu erstellen, müssen Sie eine bestimmte Dateistruktur einhalten. Dies sind die Dateien, die Sie einfügen können:

about.json (erforderlich)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

locales/en.yml
locales/{locale}.yml

stylesheets/{anything}/{anything}/{anything}.scss

javascripts/{anything}.js
javascripts/{anything}.gjs
javascripts/{anything}.hbs

assets/{asset_filename}

settings.yml

Alle diese Dateien sind optional, sodass Sie nur die Dateien erstellen müssen, die Sie benötigen.

Für diejenigen, die das Theme-SCSS in mehrere Dateien aufteilen möchten: Das ist jetzt möglich.

Split up theme SCSS into multiple files

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your t…

Für diejenigen, die das Theme in mehrere JS-Dateien aufteilen möchten: Fügen Sie einfach die gewünschten JS-Dateien zum Verzeichnis javascripts hinzu.

Die Struktur der Datei about.json finden Sie unten. Weitere Informationen dazu finden Sie unter https://meta.discourse.org/t/adding-metadata-to-a-theme/119205:

{
  "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"
    }
  },
  "screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}

Anleitungen zum Hinzufügen von Einstellungen zu Ihrem Theme finden Sie hier: Add settings to your Discourse theme.

Um Discourse mitzuteilen, dass Sie eine Theme-Komponente und kein vollständiges Theme hinzufügen werden, fügen Sie einfach die Zeile "component": true zur Datei about.json hinzu.

Die Dateistruktur entspricht den benutzerdefinierten CSS-/HTML-Elementen des Themes.

Weiterführende Lektüre

Schauen Sie sich die anderen Artikel mit dem Tag #themes::tag an.

Siehe auch:

• Developing Discourse Themes & Theme Components
• Install the Discourse Theme CLI console app to help you build themes
• Include assets (e.g. images, fonts) in themes and components

---

Zuletzt überprüft von @SaraDev am 2022-08-15T21:00:00Z

---

Dieses Dokument unterliegt einer Versionskontrolle – schlagen Sie Änderungen auf GitHub vor.