À mesure que les thèmes deviennent plus puissants, il y a plus de choses à retenir sur leur fonctionnement. Nous disposons d’une documentation détaillée sous la balise #theme-guides, mais si vous avez juste besoin d’un rappel, ce guide peut vous aider.
Ressources générales
Guide pour débutants
Guide pour designers
Guide pour développeurs
Créateur de thèmes
CLI des thèmes
Répertoire des thèmes
Répertoire des composants
Modificateurs de thème
Paramètres de site modifiables par thème
Structure des fichiers/dossiers en savoir plus
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 (uniquement pour common)
locales/
en.yml
...
assets/
(fichiers nommés arbitrairement, référencés dans about.json)
stylesheets/
(fichiers nommés arbitrairement, peuvent s'importer mutuellement, ainsi que common/desktop/mobile.scss)
javascripts/
(fichiers nommés arbitrairement. Prend en charge .js, .gjs et .hbs)
about.json info sur la structure, métadonnées disponibles
{
"name": "Mon Thème",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"nom-variable": "assets/mon-actif.jpg"
},
"color_schemes": {
"Mon Schéma de Couleurs": {
"primary": "222222"
}
}
}
SCSS
Variables CSS disponiblesJavaScript en savoir plus
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Votre code ici
});
Paramètres en savoir plus
settings.yml:
fruit:
default: pommes|oranges
type: list
description: # Ancienne méthode. Il est préférable de les définir dans les fichiers de locale (voir ci-dessous)
en: Description en anglais
fr: Description en français
Accès depuis JavaScript :
console.log(settings.fruit);
Accès depuis les templates gjs :
<template>{{settings.fruit}}</template>
Accès depuis scss :
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Paramètres de site modifiables par thème en savoir plus
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Accès depuis JavaScript :
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Accès depuis les templates gjs :
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traductions en savoir plus
locales/en.yml
en:
ma_cle_de_traduction: "J'adore les thèmes"
theme_metadata: # Ces éléments sont utilisés dans le panneau d'administration. Ils ne sont pas accessibles à vos fichiers js/hbs
description: Ce thème vous permet de faire des choses incroyables sur votre Discourse
settings:
fruit: Une description du paramètre whitelisted_fruits
Accès depuis JavaScript :
import { i18n } from "discourse-i18n";
i18n(themePrefix("ma_cle_de_traduction"));
Accès depuis les templates gjs :
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "ma_cle_de_traduction")}}
<DButton @label={{theme-prefix "ma_cle_de_traduction"}} />
</template>
Ce document est sous contrôle de version - proposez des modifications sur github.