A medida que los temas se vuelven más potentes, hay más cosas que recordar sobre su funcionamiento. Tenemos mucha documentación detallada en #howto / #themes, 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 del sitio personalizables
Estructura de Archivos/Carpeta 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. Soporta .js, .gjs y .hbs)
about.json información de estructura, metadatos disponibles
{
"name": "Mi Tema",
"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": {
"Mi Esquema de Colores": {
"primary": "222222"
}
}
}
SCSS
Javascript leer más
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Tu código aquí
});
Javascript en múltiples archivos
Configuraciones leer más
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antiguo. Es mejor definir esto en los archivos de locale (ver abajo)
en: Descripción en inglés
fr: Descripción en francés
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 del 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: "Me encantan los temas"
theme_metadata: # Estos se usan en el panel de administración. No están disponibles para tus archivos js/hbs
description: Este tema te permite hacer cosas increíbles en tu Discourse
settings:
fruit: Una descripción de la configuración whitelisted_fruits
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.