Theme-Entwickler Schnellreferenzanleitung

Da die Themes mächtiger werden, gibt es mehr darüber zu wissen, wie sie funktionieren. Wir haben jede Menge detaillierte Dokumentation unter #howto / #themes, aber wenn Sie nur etwas brauchen, um sich zu erinnern, kann dieser Leitfaden hilfreich sein.

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 aus anderen und 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

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
});

JS Plugin API

Multi-File Javascript

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-Templates:

<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-Templates:

<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 mit 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-Templates:

import { i18n } from "discourse-i18n";

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

Dieses Dokument ist versionskontrolliert – Änderungen vorschlagen auf github.

This is super useful.

Could I also suggest that a useful reference to add is the list of available color transformations:

I must be missing something here, I’m trying to use I18n.t(themePrefix("my_translation_key")) but the Firefox console reports that themePrefix is undefined.
How can I invoke that function from an api function?

Der Link scheint nicht mehr gültig zu sein.

Sie haben Recht. Es sollte jetzt sein:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js

Danke @th21 und @Arkshine – ich habe den Link aktualisiert

Der Link zur Plugin-API hat sich wieder geändert:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs

Danke! Aktualisiert

Diese beiden Links scheinen nicht mehr zu funktionieren.

Danke für den Hinweis! Alles ist jetzt behoben.