Temas e componentes de tema permitem que você gerencie ativos carregados, como imagens e fontes. Você pode controlar quais ativos seu tema aceita usando a configuração do site: theme authorized extensions
Incluindo ativos em temas e componentes
Para temas remotos
Temas remotos incluem:
- Temas e componentes instalados a partir da lista de temas Popular
- Temas e componentes instalados usando o método From a git repository
Para carregar ativos em um tema remoto ou componente de tema, consulte Create and share a font theme component para um exemplo detalhado.
Carregando ativos em temas e componentes locais
Temas locais incluem:
- Os temas padrão Light e Dark que acompanham todas as instâncias do Discourse
- Temas e componentes criados usando o método de instalação + Create New
- Temas e componentes que foram carregados do seu computador local usando o método de instalação From your device.
Para carregar ativos em um tema local ou componente de tema, navegue até seu tema ou componente e selecione + Add na seção Uploads:
No modal Add Upload, escolha um arquivo e insira um nome de variável SCSS para usar com suas personalizações CSS, javascript e/ou handlebars
Após o carregamento, o ativo aparecerá na lista Uploads:
Nota Importante: Não adicione uploads a temas e componentes através da interface de administração se o componente foi instalado remotamente a partir de um repositório git. Atualizações para o componente removerão quaisquer uploads que não foram incluídos no repositório git.
Como utilizar os ativos
SCSS
@font-face {
font-family: Amazing;
src: url($Comic-Sans) format("woff2");
}
body {
font-family: Amazing;
font-size: 15px;
}
.d-header {
background-image: url($texture);
}
:information*source: _Ao usar fontes
ttfouotf, certifique-se de usar o formatoopentype._
Javascript
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
console.log(settings.theme_uploads.balloons);
});
HTML
Você não pode adicionar um ativo de tema diretamente ao HTML simples (como nas seções header ou after header do painel de administração de personalizar). Você precisa usar um template handlebars ou a API de plugin (mais sobre isso em Developing Discourse Themes & Theme Components).
Uma solução alternativa é carregar seu ativo como uma imagem de fundo usando SCSS (como no exemplo acima). Então, na seção header do seu tema, você pode adicionar:
<div class="my-custom-div">
<a href="/"></a>
</div>
e então no seu CSS:
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
Acessando uploads de tema como configurações
Você também pode tratar theme_uploads como configurações em JavaScript (commit relacionado).
Isso permite que temas e componentes acessem ativos de tema.
Dentro do js do tema, você pode obter o URL para um ativo com:
settings.theme_uploads.name
Informações Adicionais
Este documento é controlado por versão - sugira alterações no github.
