Man mano che i temi diventano più potenti, c’è più da ricordare su come funzionano. Abbiamo molta documentazione dettagliata sotto #howto / #themes, ma se hai solo bisogno di qualcosa per rinfrescarti la memoria, questa guida può essere d’aiuto.
Risorse Generali
Guida per principianti
Guida per designer
Guida per sviluppatori
Theme Creator
Theme CLI
Directory Temi
Directory Componenti
Theme Modifiers
Impostazioni sito modificabili tramite tema
Struttura File/Cartelle leggi di più
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 (solo common)
locales/
en.yml
...
assets/
(file nominati arbitrariamente, referenziati in about.json)
stylesheets/
(file nominati arbitrariamente, possono essere importati l'uno dall'altro, e common/desktop/mobile.scss)
javascripts/
(file nominati arbitrariamente. Supporta .js .hbs e .raw.hbs)
about.json informazioni sulla struttura, metadati disponibili
{
"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"
}
}
}
SCSS
Variabili CSS disponibiliJavascript leggi di più
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Il tuo codice
});
Impostazioni leggi di più
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Metodo vecchio. È meglio definirli nei file di locale (vedi sotto)
en: English Description
fr: Description Française
Accesso da JavaScript:
console.log(settings.fruit);
Accesso dai template gjs:
<template>{{settings.fruit}}</template>
Accesso da scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Impostazioni sito modificabili tramite tema leggi di più
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Accesso da JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Accesso dai template gjs:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traduzioni leggi di più
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Questi sono usati nel pannello admin. Non sono resi disponibili ai tuoi file js/hbs
description: Questo tema ti permette di fare cose incredibili su Discourse
settings:
fruit: Una descrizione dell'impostazione whitelisted_fruits
Accesso da JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Accesso dai template gjs:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Questo documento è controllato tramite versione - suggerisci modifiche su github.
