Incluir recursos (ex.: imagens, fontes) em temas e componentes

[Discourse]

Temes e componentes de tema permitem que você gerencie ativos enviados, 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 Popular de temas
• Temas e componentes instalados usando o método From a git repository

Para enviar ativos para um tema remoto ou componente de tema, consulte Create and share a font theme component para um exemplo detalhado.

Enviando ativos para temas e componentes locais

Temas locais incluem:

• Os temas padrão Light e Dark que acompanham cada instância do Discourse
• Temas e componentes criados usando o método de instalação + Create New
• Temas e componentes que foram enviados do seu computador local usando o método de instalação From your device.

Para enviar ativos para um tema local ou componente de tema, navegue até seu tema ou componente e selecione + Add na seção Uploads:

Na modal de Adicionar Upload, escolha um arquivo e insira um nome de variável SCSS para usar com suas personalizações de CSS, javascript e/ou handlebars

Uma vez enviado, o ativo aparecerá na lista de Uploads:

Nota Importante: Não adicione uploads a temas e componentes através da interface de administração se o componente foi instalado remotamente de um repositório git. Atualizações no componente removerão quaisquer uploads que não estivessem incluídos no repositório git.

Como fazer uso dos 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);
}

:informationsource: _Ao usar fontes ttf ou otf, certifique-se de usar o formato opentype.

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 diretamente um ativo de tema ao HTML puro (como nas seções de cabeçalho ou após o cabeçalho do painel de personalização). Você deve usar um modelo 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 de cabeçalho do seu tema, você pode adicionar:

<div class="my-custom-div">
  <a href="/"></a>
</div>

e depois 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ê agora pode obter a URL de um ativo com:

settings.theme_uploads.name

Informações Adicionais

• Create and share a font theme component

---

Este documento é controlado por versão - sugira alterações no github.

[bitmage (Brandon Mason)]

Criei um diretório de assets com 5 arquivos svg para ícones de mídia social. Adicionei todos eles ao about.json, conforme indicado em Create and Share a font theme component. Eu os uso no meu CSS em body_tag.html.

Esperado: Os ícones devem carregar.

Real: Os ícones não são exibidos. A barra de ferramentas de desenvolvimento mostra que o navegador tem algum conceito de que eles existem como Imagens registradas… mas não há dados neles.

O que estou perdendo? Existe uma etapa de compilação ou algo assim?