À medida que os temas se tornam mais poderosos, há mais detalhes para lembrar sobre como eles funcionam. Temos uma vasta documentação detalhada na seção #theme-guides, mas se você só precisa de um lembrete rápido, este guia pode ajudar.
Recursos Gerais
Guia para iniciantes
Guia para designers
Guia para desenvolvedores
Criador de Temas
CLI de Temas
Diretório de Temas
Diretório de Componentes
Modificadores de Tema
Configurações de site personalizáveis
Estrutura de Arquivos/Pastas leia mais
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 (apenas common)
locales/
en.yml
...
assets/
(arquivos com nomes arbitrários, referenciados em about.json)
stylesheets/
(arquivos com nomes arbitrários, podem ser importados entre si e de common/desktop/mobile.scss)
javascripts/
(arquivos com nomes arbitrários. Suporta .js, .gjs e .hbs)
about.json informações de estrutura, metadados disponíveis
{
"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
Variáveis CSS disponíveisJavascript leia mais
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Seu código aqui
});
Configurações leia mais
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antigo. É melhor definir isso nos arquivos de locale (veja abaixo)
en: English Description
fr: Description Française
Acesso via JavaScript:
console.log(settings.fruit);
Acesso via templates gjs:
<template>{{settings.fruit}}</template>
Acesso via scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Configurações de site personalizáveis leia mais
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Acesso via JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Acesso via templates gjs:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traduções leia mais
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Estes são usados no painel de administração. Não ficam disponíveis para seus arquivos js/hbs
description: This theme lets you do amazing things on your Discourse
settings:
fruit: A description of the whitelisted_fruits setting
Acesso via JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Acesso via templates gjs:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Este documento é controlado por versão - sugira alterações no github.