À mesure que les thèmes deviennent plus puissants, il y a davantage à retenir sur leur fonctionnement. Nous disposons d’une documentation détaillée abondante sous le tag #theme-guides, mais si vous avez simplement besoin d’un rappel, ce guide peut vous aider.
Ressources générales
Guide du débutant
Guide du concepteur
Guide du développeur
Créateur de thèmes
CLI des thèmes
Annuaire des thèmes
Annuaire des composants
Modificateurs de thèmes
Paramètres de site personnalisables
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 (common uniquement)
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 par common/desktop/mobile.scss)
javascripts/
(fichiers nommés arbitrairement. Prend en charge .js, .gjs et .hbs)
about.json informations sur la structure, métadonnées disponibles
{
"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
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: # Méthode ancienne. Il est préférable de les définir dans les fichiers de localisation (voir ci-dessous)
en: English Description
fr: Description Française
Accès depuis JavaScript :
console.log(settings.fruit);
Accès depuis les modèles gjs :
<template>{{settings.fruit}}</template>
Accès depuis scss :
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Paramètres de site personnalisables 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 modèles gjs :
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traductions en savoir plus
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Ces éléments sont utilisés dans le panneau d'administration. Ils ne sont pas mis à disposition dans vos fichiers js/hbs
description: This theme lets you do amazing things on your Discourse
settings:
fruit: A description of the whitelisted_fruits setting
Accès depuis JavaScript :
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Accès depuis les modèles 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.