Schnellreferenz für Theme-Entwickler

Da Themes leistungsfähiger werden, gibt es mehr zu merken, wie sie funktionieren. Wir haben eine Fülle detaillierter Dokumentation unter #howto / #themes, aber wenn Sie nur etwas brauchen, das Ihr Gedächtnis auffrischt, kann diese Anleitung helfen.

Allgemeine Ressourcen

Leitfaden für Einsteiger
Leitfaden für Designer
Leitfaden für Entwickler
Theme Creator
Theme CLI
Theme-Verzeichnis
Komponenten-Verzeichnis
Theme-Modifikatoren
Theme-basierte Site-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, die in about.json referenziert werden)
stylesheets/
  (beliebig benannte Dateien, die voneinander und aus common/desktop/mobile.scss importiert werden können)
javascripts/
  (beliebig benannte Dateien. Unterstützt .js, .gjs und .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

Verfügbare CSS-Variablen

Javascript mehr lesen

// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Ihr Code hier
});

JS Plugin API

Javascript mit mehreren Dateien

Einstellungen mehr lesen

settings.yml:

fruit:
  default: apples|oranges
  type: list
  description: # Alte Methode. Es ist besser, diese in den Lokalisierungsdateien zu definieren (siehe unten)
    en: Englische Beschreibung
    fr: Französische Beschreibung

Zugriff aus JavaScript:

console.log(settings.fruit);

Zugriff aus gjs-Templates:

<template>{{settings.fruit}}</template>

Zugriff aus SCSS:

html {
  font-size: #{$global-font-size}px;
  background: $site-background;
}

Theme-basierte Site-Einstellungen mehr lesen

about.json:

"theme_site_settings": {
  "enable_welcome_banner": false
}

Zugriff aus JavaScript:

@service siteSettings;

this.siteSettings.enable_welcome_banner;

Zugriff aus gjs-Templates:

<template>{{this.siteSettings.enable_welcome_banner}}</template>

Übersetzungen mehr lesen

locales/en.yml

en:
  my_translation_key: "Ich liebe Themes"
  theme_metadata: # Diese werden im Admin-Bereich verwendet. Sie stehen Ihren js/hbs-Dateien nicht zur Verfügung
    description: Dieses Theme ermöglicht es Ihnen, erstaunliche Dinge auf Ihrem Discourse zu tun
    settings:
      fruit: Eine Beschreibung der whitelisted_fruits-Einstellung

Zugriff aus JavaScript:

import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));

Zugriff aus gjs-Templates:

import { i18n } from "discourse-i18n";

<template>
  {{i18n (themePrefix "my_translation_key")}}
  <DButton @label={{theme-prefix "my_translation_key"}} />
</template>

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

Das ist super hilfreich.

Könnte ich auch vorschlagen, als nützlichen Hinweis die Liste der verfügbaren Farbumwandlungen hinzuzufügen:

Mir entgeht hier wohl etwas. Ich versuche, I18n.t(themePrefix("my_translation_key")) zu verwenden, aber die Firefox-Konsole meldet, dass themePrefix nicht definiert ist.
Wie kann ich diese Funktion aus einer API-Funktion aufrufen?