À medida que os temas se tornam mais poderosos, há mais detalhes sobre seu funcionamento que precisam ser lembrados. Temos uma vasta documentação detalhada em #theme-guides, mas, se você precisar apenas de algo para refrescar a memória, 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 por tema
Estrutura de Arquivos/Pastas saiba 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 (somente common)
locales/
en.yml
...
assets/
(arquivos com nomes arbitrários, referenciados em about.json)
stylesheets/
(arquivos com nomes arbitrários, podem ser importados uns dos outros 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 saiba mais
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Seu código aqui
});
Configurações saiba mais
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antigo. É melhor definir esses textos nos arquivos de localização (veja abaixo)
en: English Description
fr: Description Française
Acesso a partir do JavaScript:
console.log(settings.fruit);
Acesso a partir de templates gjs:
<template>{{settings.fruit}}</template>
Acesso a partir de scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Configurações de site personalizáveis por tema saiba mais
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Acesso a partir do JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Acesso a partir de templates gjs:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traduções saiba mais
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Estes são usados no painel administrativo. 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 a partir do JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Acesso a partir de 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.