Uso de ativos de tema próprios para a central de ajuda

Caminho rápido: Administrador do Guide > Painel de personalização > Selecionar tema > Editar > Ativos

Você pode carregar ativos como, por exemplo, imagens e arquivos para seus temas da central de ajuda.

Este artigo abrange as seções a seguir:

• Carregamento de um ativo para o seu tema
• Uso de ativos carregados no código do tema
• Substituição de um ativo em seu tema
• Exclusão de um ativo do tema

Carregamento de um ativo para o seu tema

Você pode carregar ativos como, por exemplo, imagens e arquivos para a central de ajuda. Esses ativos são armazenados em um cache na web em uma rede de fornecimento na nuvem (CDN). Os caches da web reduzem os requisitos de largura de banda e a carga do servidor, além de melhorarem os tempos de resposta.

Há diversos tipos de arquivo permitidos para temas, consulte Tipos de arquivo permitidos para ativos do tema.

Como carregar seus ativos de tema próprios

1. No Guide, clique no ícone Painel de personalização () na barra lateral.
2. No tema que deseja editar, clique em Personalizar.
3. Clique em Editar código.

   

4. Na seção de Arquivos, clique em Adicionar novo e selecione Ativo.

   

5. Procure o arquivo e selecione-o. Os nomes dos ativos do tema devem ser exclusivos e não podem ter mais de 50 caracteres. Os nomes dos ativos podem conter letras, números, pontos, sinais de subtração e adição, sublinhado e traço. Os nomes de ativos não têm diferenciação entre maiúscula e minúscula, portanto, não é possível ter Ativo.jpg e ativo.jpg.

   O arquivo do ativo é adicionado à lista de arquivos de ativos.

Tipos de arquivo permitidos para ativos do tema

A tabela a seguir mostra os tipos de arquivo permitidos como ativos de tema. Os tipos de arquivo permitidos para ativos são limitados aos tipos de arquivo no tema da central de ajuda.

Tipo de ativo	Tipos de arquivo permitidos
Imagens	jpg, jpeg, png, gif, svg, webp, tiff, tif, bmp, ico, webm
Fontes	woff2, woff, eot, otf, ttf, svg
Arquivos de texto	js, css, html, json, txt, xml
Outro	mp4, swf, wav, ogg. mp3

Os tipos de arquivo de conteúdo sofisticado, como Microsoft PowerPoint, Microsoft Word e PDFs, podem ser anexos de artigo, mas não ativos de tema.

Uso de ativos carregados no código do tema

Você pode fazer referência a um ativo carregado no arquivo style.css ou nos modelos do tema. No style.css, você usará as variáveis de caminho fornecidas pelo Guide. Nos modelos, você usará o auxiliar Curlybars.

O uso de auxiliares e variáveis de ativos em seu código permite que você substitua com facilidade os ativos no tema sem editar o código do tema. Consulte Substituição de um ativo em seu tema.

Observação: não é possível usar variáveis de caminho e nem o auxiliar no arquivo script.js do tema.

Como usar um ativo carregado em seu tema

1. No Guide, clique no ícone Painel de personalização () na barra lateral.
2. No tema que deseja editar, clique em Personalizar.
3. Clique em Editar código.
4. Na seção Ativos, clique no arquivo de ativo que você deseja usar.

   Serão exibidas várias expressões para o ativo:

   

5. Clique em Copiar a fim de copiar a expressão desejada para a Área de transferência.
6. Cole a expressão do ativo no código do seu tema.

Exemplos

style.css

.class-name { 
  background: url($assets-backpack2-jpeg);
}

O valor assets-backpack2-jpeg é uma variável que contém o caminho relativo para o ativo.

Arquivos .hbs

Em uma marcação HTML:

<img src="{{asset 'backpack2.jpeg'}}">

Em uma tag style:

<style>
  .class-name { 
    background: url("{{asset 'backpack2.jpeg'}}");
  }
</style>

Em uma tag script:

<script>
  var assetsBackpack2 = "{{asset 'backpack2.jpeg'}}";
</script>

Embora seja possível inserir o auxiliar em uma tag script dentro de um modelo, ele não pode ser usado no arquivo script.js.

Se quiser obter mais dicas para editar o código do seu tema, consulte Personalização do tema da central de ajuda.

Substituição de um ativo em seu tema

O uso de auxiliares e variáveis de ativos descrito no item Uso de ativos carregados no código do tema acima permite que você substitua um ativo no tema dinamicamente, sem editar o código do tema. Você pode atualizar o tema selecionando um novo arquivo de ativo em seu sistema.

Como substituir um ativo

1. No Guide, clique no ícone Painel de personalização () na barra lateral.
2. No tema que deseja editar, clique em Personalizar.
3. Clique em Editar código.
4. Na seção Ativos, localize o arquivo do ativo que deseja substituir.
5. Clique no menu de opções no fim do nome do arquivo do ativo e selecione Substituir.

   

6. Selecione um novo ativo em seu sistema.

   Depois de carregado, o tema é atualizado dinamicamente por qualquer variável ou auxiliar que faça referência ao ativo. A mudança é imediata.

   O ativo não é substituído se você tiver usado a URL completa do ativo no código fonte HTML das páginas publicadas da central de ajuda. O link para o ativo ficará quebrado, pois a substituição de um ativo altera a URL do ativo publicado. Como resultado disso, evite usar uma URL de um ativo publicado em um tema, um modelo de página ou uma página da web externa.

Exclusão de um ativo do tema

Você pode apagar facilmente qualquer ativo que não estiver mais sendo usado no tema.

Como apagar um ativo do tema

1. No Guide, clique no ícone Painel de personalização () na barra lateral.
2. No tema que deseja editar, clique em Personalizar.
3. Clique em Editar código.

   

4. Na seção Ativos, localize o arquivo do ativo que você deseja apagar.
5. Clique no menu de opções no fim do nome do arquivo do ativo e selecione Apagar ativo.

   

6. Confirme que você deseja apagar o ativo.

   O ativo é removido da sua lista de ativos.