À medida que os temas se tornam mais poderosos, há mais detalhes para lembrar sobre como funcionam. Temos uma vasta documentação detalhada em #como-fazer / #temas, mas se você só precisa de algo para refrescar sua 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 do site personalizáveis
Estrutura de Arquivos/Pastas ler 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 uns dos outros e de common/desktop/mobile.scss)
javascripts/
(arquivos com nomes arbitrários. Suporta .js, .gjs e .hbs)
about.json informações sobre estrutura, metadados disponíveis
{
"name": "Meu 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": {
"Meu Esquema de Cores": {
"primary": "222222"
}
}
}
SCSS
Javascript ler mais
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Seu código aqui
});
Javascript com múltiplos arquivos
Configurações ler mais
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antigo. É melhor definir isso nos arquivos de locale (veja abaixo)
en: Descrição em Inglês
fr: Descrição em Francês
Acessar via JavaScript:
console.log(settings.fruit);
Acessar via templates gjs:
<template>{{settings.fruit}}</template>
Acessar via scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Configurações do site personalizáveis ler mais
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Acessar via JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Acessar via templates gjs:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Traduções ler mais
locales/en.yml
en:
my_translation_key: "Eu amo temas"
theme_metadata: # Estes são usados no painel de administração. Eles não são disponibilizados para seus arquivos js/hbs
description: Este tema permite que você faça coisas incríveis no seu Discourse
settings:
fruit: Uma descrição da configuração whitelisted_fruits
Acessar via JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Acessar via templates gjs:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Este documento está sob controle de versão — sugira alterações no github.