A medida que los temas se vuelven más potentes, hay más cosas que recordar sobre cómo funcionan. Tenemos mucha documentación detallada en #howto / #themes, pero si solo necesitas algo para refrescar tu memoria, esta guía puede ayudar.
Recursos Generales
Guía para principiantes
Guía para diseñadores
Guía para desarrolladores
Creador de Temas
Tema CLI
Directorio de Temas
Directorio de Componentes
Modificadores de Tema
Ajustes del sitio temables
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, se pueden importar entre sí, y common/desktop/mobile.scss)
javascripts/
(archivos con nombres arbitrarios. Soporta .js .hbs y .raw.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
Javascript leer más
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Your code here
});
Javascript de Múltiples Archivos
Ajustes leer más
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Old method. It's better to define these in the locale files (see below)
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;
}
Ajustes del sitio temables 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: # These are used in the admin panel. They are not made available to your js/hbs files
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 versión: sugiere cambios en github.