À medida que os temas se tornam mais poderosos, há mais coisas para lembrar sobre como eles funcionam. Temos muita documentação detalhada em #howto / #themes, 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
Theme Creator
Theme CLI
Diretório de Temas
Diretório de Componentes
Modificadores de Tema
Configurações do site temá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 (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 common/desktop/mobile.scss)
javascripts/
(arquivos com nomes arbitrários. Suporta .js .hbs e .raw.hbs)
about.json informações da 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
});
Javascript com Múltiplos Arquivos
Configurações ler mais
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Método antigo. É melhor defini-los nos arquivos de localidade (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 do scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Configurações do site temáveis ler 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 ler mais
locales/en.yml
en:
my_translation_key: "I love themes"
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
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.
