A medida que los temas se vuelven más potentes, hay más cosas que recordar sobre cómo funcionan. Tenemos una gran cantidad de documentación detallada en #theme-guides, pero si solo necesitas algo para refrescar tu memoria, esta guía puede ayudarte.
Recursos generales
Guía para principiantes
Guía para diseñadores
Guía para desarrolladores
Creador de temas
CLI de temas
Directorio de temas
Directorio de componentes
Modificadores de temas
Configuraciones de sitio personalizables
Estructura de archivos/carpetas leer más
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/
(archivos con nombres arbitrarios, referenciados en about.json)
stylesheets/
(archivos con nombres arbitrarios, pueden importarse entre sí y desde common/desktop/mobile.scss)
javascripts/
(archivos con nombres arbitrarios. Admite .js, .gjs y .hbs)
about.json información de estructura, metadatos 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 leer más
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Tu código aquí
});
Configuraciones leer más
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antiguo. Es mejor definirlos en los archivos de localización (ver abajo)
en: English Description
fr: Description Française
Acceso desde JavaScript:
console.log(settings.fruit);
Acceso desde plantillas gjs:
<template>{{settings.fruit}}</template>
Acceso desde scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Configuraciones de sitio personalizables leer más
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Acceso desde JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Acceso desde plantillas gjs:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traducciones leer más
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Estos se utilizan en el panel de administración. No están disponibles para tus archivos js/hbs
description: This theme lets you do amazing things on your Discourse
settings:
fruit: A description of the whitelisted_fruits setting
Acceso desde JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Acceso desde plantillas gjs:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Este documento está controlado por versiones - sugiere cambios en github.