Struktur von Themen und Themenkomponenten

[Discourse]

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

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

Das Git-Repository wird auf Updates überprüft (einmal täglich) oder durch die Verwendung der Schaltfläche Check for Updates (Auf Updates prüfen). Wenn Änderungen erkannt werden, ändert sich die Schaltfläche Check for Updates (Auf Updates prüfen) zu Update to Latest (Auf neueste Version aktualisieren).

Um ein Theme zu erstellen, müssen Sie eine bestimmte Dateistruktur befolgen. Dies sind die Dateien, die Sie einschließen 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}.hbs
javascripts/{anything}.hbr

assets/{asset_filename}

settings.yml

Jede dieser Dateien ist optional, Sie müssen also nur die erstellen, die Sie benötigen.

Für diejenigen, die Theme-SCSS in mehrere Dateien aufteilen möchten, ist dies 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 die gewünschten JS-Dateien einfach in das javascripts-Verzeichnis ein.

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

{
  "name": "My 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": {
    "My Color Scheme": {
      "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, fügen Sie einfach die Zeile "component": true in die about.json-Datei ein.

Die Dateistruktur entspricht dem benutzerdefinierten CSS/HTML des Themes.

Weiterführende Lektüre

Sehen Sie sich die anderen Artikel mit dem Tag #themes:: 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 wird versioniert – Änderungen vorschlagen auf github.