À 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 #howto / #themes, mais si vous avez simplement besoin d’un rappel, ce guide peut vous aider.
Ressources générales
Guide pour débutants
Guide pour concepteurs
Guide pour développeurs
Créateur de thèmes
CLI des thèmes
Annuaire des thèmes
Annuaire des composants
Modificateurs de thèmes
Paramètres du site modifiables
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 common)
locales/
en.yml
...
assets/
(fichiers nommés arbitrairement, référencés dans about.json)
stylesheets/
(fichiers nommés arbitrairement, peuvent être importés les uns des autres, ainsi que common/desktop/mobile.scss)
javascripts/
(fichiers nommés arbitrairement. Prend en charge .js, .gjs et .hbs)
about.json infos 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": {
"variable-name": "assets/my-asset.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: apples|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 du site modifiables 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:
my_translation_key: "J'adore les thèmes"
theme_metadata: # Ceux-ci sont utilisés dans le panneau d'administration. Ils ne sont pas accessibles dans 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("my_translation_key"));
Accès depuis les templates gjs :
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Ce document est sous contrôle de version - proposez des modifications sur github.