Alors que les thèmes deviennent plus puissants, il y a plus de choses à retenir sur leur fonctionnement. Nous avons beaucoup de documentation détaillée sous #howto / #themes, mais si vous avez juste besoin de quelque chose pour vous rafraîchir la mémoire, ce guide peut vous aider.
Ressources Générales
Guide du débutant
Guide du concepteur
Guide du développeur
Theme Creator
Theme CLI
Répertoire des thèmes
Répertoire des composants
Theme Modifiers
Paramètres du site modifiables par le thème
Structure des Fichiers/Dossiers lire la suite
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 seulement)
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, et common/desktop/mobile.scss)
javascripts/
(fichiers nommés arbitrairement. Supporte .js .hbs et .raw.hbs)
about.json informations 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 lire la suite
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Votre code ici
});
Paramètres lire la suite
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 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 du site modifiables par le thème lire la suite
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 lire la suite
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Celles-ci sont utilisées dans le panneau d'administration. Elles ne sont pas mises à disposition de 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 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 contrôlé par version - suggérez des modifications sur github.
