Os administradores do Guide com experiência em programação podem trabalhar diretamente com o código da página para criar um tema personalizado para a central de ajuda. Os temas personalizados incluem:
- Os modelos editáveis que definem a disposição de cada página (por exemplo, a página do artigo, a página da categoria e a página do tópico da comunidade)
- As páginas personalizadas que você cria do zero e coloca em sua central de ajuda
- O cabeçalho e o rodapé globais de sua central de ajuda
Você também pode usar uma linguagem de modelo com recursos completos chamada Curlybars para acessar os dados da central de ajuda e manipular o conteúdo nos modelos da página e as páginas personalizadas. Você pode usar também os arquivos JavaScript e CSS inclusos em o seu tema para alterar a aparência e o comportamento do tema em todo o website. Se você está pensando em usar seu próprio código HTML para editar o tema da sua central de ajuda, consulte Edição do código-fonte dos artigos central de ajuda.
Quando você modifica o código de um tema (por exemplo, seus modelos, JavaScript ou CSS), a visualização do tema mostra o ícone </>
, indicando que o código do tema foi modificado e não receberá mais novos recursos e atualizações.
Este artigo abrange os seguintes tópicos:
Artigos relacionados:
Personalização dos modelos de página e páginas personalizadas com HTML e Curlybars
O HTML da central de ajuda encontra-se em modelos editáveis que definem a disposição de tipos de página, páginas personalizadas, cabeçalho e rodapé globais. Você também pode usar uma linguagem de modelo com recursos completos chamada Curlybars para criar ou manipular o conteúdo para esses elementos.
É possível personalizar o modelo de qualquer um dos seguintes tipos ou elementos da página ou criar suas próprias páginas personalizadas.
- Páginas personalizadas (custom_page.hbs): as páginas personalizadas que você cria do zero e vincula de sua central de ajuda
- Página do artigo (article_page.hbs): são as páginas de artigos individuais da base de conhecimento
- Página da categoria (category_page.hbs): são as páginas de aterrissagem
- Página da lista de publicações da comunidade (community_post_list_page.hbs)
- Página da publicação da comunidade (community_post_page.hbs)
- Página da lista de tópicos da comunidade (community_topic_list_page.hbs)
- Página do tópico da comunidade (community_topic_page.hbs)
- Página Contribuições (contributions_page.hbs): lista as publicações, comentários da comunidade e comentários de artigos feitos por usuários finais
-
Cabeçalho do documento (document_head.hbs): é a tag
head
do documento - Página de erro (error_page.hbs): é a mensagem exibida quando um usuário chega a uma página que não existe
- Rodapé (footer.hbs): são as barras exibidas na parte inferior de todas as páginas da central de ajuda
- Cabeçalho (header.hbs): são as barras exibidas na parte superior de todas as páginas da central de ajuda
- Página inicial (home_page.hbs): é a página de destino de nível mais alto da sua central de ajuda
- Página de nova publicação da comunidade (new_community_post_page.hbs)
- Página de nova solicitação (new_request_page.hbs): é o formulário de envio de solicitações ou tickets
- Página Solicitações (request_page.hbs): são as páginas de solicitações ou tickets individuais
- Página Solicitações (requests_page.hbs): são as listas de solicitações ou tickets atribuídos a um usuário ou que um usuário está em cópia
- Resultados da pesquisa (search_results.hbs): é o formato da exibição de resultados da pesquisa
- Página de seção (section_page.hbs): são as páginas de aterrissagem
- Página Seguindo (subscriptions_page.hbs): a lista de categorias, seções e artigos que um usuário está seguindo
- Página de perfil do usuário (user_profile_page.hbs)
Como editar seus modelos de página
- No Guide, na barra lateral, clique no ícone do Painel de personalização (
).
- No tema que deseja editar, clique em Personalizar.
- Clique em Editar código.
- Na seção Modelos, clique no modelo ou na página personalizada que deseja modificar.
A página é aberta no editor de código.
- Utilize a visualização do código para editar o modelo ou a página.
Você pode adicionar, remover ou reordenar os seguintes elementos:
-
Expressões do modelo, para exibir e manipular conteúdo em suas páginas
Por exemplo, o auxiliar do modelo de navegação estrutural
{{breadcrumbs}}
exibe um elemento de navegação estrutural na página. Para obter um guia detalhado das expressões de modelo, consulte Modelos da central de ajuda. - Placeholders de conteúdo dinâmico (consulte Adição de texto traduzido)
- Widgets incorporáveis criados por terceiros
- Marcação HTML
-
Expressões do modelo, para exibir e manipular conteúdo em suas páginas
- Clique em Salvar no canto superior direito para salvar as alterações.
Se você editou um modelo, as alterações são aplicadas a todas as páginas no seu tema baseadas no modelo modificado.
- Para visualizar as alterações, clique em Visualizar. Consulte Visualização do seu tema na central de ajuda.
Observação: ao visualizar um tema, nem todos os recursos podem funcionar. O recurso de visualização serve para mostrar alterações na aparência, não para testar por completo a funcionalidade interativa do tema. Recomendamos usar uma sandbox para testes completos.
- Altere o código como for necessário e clique em Salvar.
Após terminar a edição do modelo ou da página personalizada, feche a janela.
Personalização do CSS ou do JavaScript
Você pode adicionar código JavaScript ou personalizar o CSS do site. Para dar uma primeira olhada no que é possível fazer na central de ajuda com um pouco de código, consulte os seguintes recursos:
- Dicas da comunidade da central de ajuda
- Manual de CSS da Central de Ajuda
- Manual de JavaScript da Central de Ajuda
Como personalizar o CSS ou JavaScript
- No Guide, clique no ícone Painel de personalização (
) na barra lateral.
- No tema que deseja editar, clique em Personalizar.
- Clique em Editar código.
- Clique em script.js para modificar o JavaScript ou style.css para modificar o CSS.
O arquivo é aberto no editor de código.
- Adicione ou modifique o JavaScript ou CSS na visualização do código.
- Clique em Salvar no canto superior direito para salvar as alterações.
As alterações são aplicadas ao seu tema.
- Para visualizar as alterações, clique em Visualização, consulte Visualização do seu tema na central de ajuda.
- Altere o código como for necessário e clique em Salvar.
Ao terminar, feche o arquivo.
Uso de variáveis em CSS em HTML
As propriedades escolhidas no painel Configurações ou definidos no seu arquivo de manifesto para as cores, fontes ou imagens do tema são armazenadas nas variáveis. Você pode usar essas variáveis no arquivo style.css do tema. Você também pode fazer referência às variáveis usando expressões Curlybars nos modelos de página HTML.
As variáveis são úteis se você quiser especificar o mesmo valor em vários locais e atualizá-los rapidamente. A atualização da propriedade entra em vigor em todos os locais onde a variável é usada. O tema Copenhagen padrão inclui algumas variáveis para suas cores e fontes. Você pode alterar os nomes e rótulos, apagar variáveis ou adicionar as que desejar (consulte Uso de configurações no manifest.json como variáveis).
No tema Copenhagen padrão, você tem as variáveis a seguir por padrão:
-
brand_color
é a cor da marca nos elementos principais da navegação -
brand_text_color
é a cor da marca para os status de passagem do mouse e ativo -
text_color
é a cor do texto para os elementos do corpo e cabeçalho -
link_color
é a cor do texto para elementos de link -
background_color
é a cor de plano de fundo da sua central de ajuda -
heading_font
é a fonte para os cabeçalhos -
text_font
é a fonte do corpo do texto -
logo
é o logotipo da empresa -
favicon
é o ícone exibido na barra de endereço do seu navegador -
homepage_background_image
é a imagem principal na página inicial -
community_background_image
é a imagem principal inicial na página de tópicos da comunidade -
community_image
é a imagem da seção Comunidade na página inicial
Exemplos usando variáveis em CSS
As propriedades definidas para as cores, fontes e imagens do tema são armazenadas em variáveis que você pode usar no arquivo style.css do seu tema.
Por exemplo, você pode usar algumas das variáveis padrão no CSS com a sintaxe a seguir:
-
$brand_color
-
$brand_tex_color
-
$heading_font
-
$text_font
No arquivo CSS, é possível atribuir uma variável a uma propriedade do CSS da mesma maneira que se atribui um valor normal. Por exemplo:
.button {
label-color: $text_font;
}
Você também pode usar um colchete único para inserir o auxiliar em uma expressão CSS, da seguinte maneira:
max-width: #{$search_width}px
Exemplos usando variáveis em Curlybars em HTML
As propriedades definidas para cores, fontes e imagens do tema são armazenadas em variáveis às quais você pode fazer referência nos modelos de página HTML.
As variáveis se tornam propriedades do objeto settings
em Curlybars. Como com qualquer objeto Curlybars, você pode usar colchetes duplos e notação de ponto para inserir uma propriedade em um modelo de página.
Por exemplo:
-
{{settings.color_1}}
é o valor HEX de uma cor. Por exemplo:#FF00FF
-
{{{settings.font_1}}
é a pilha da fonte. Por exemplo, o sistema está definido como:'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
-
{{settings.homepage_background_image}}
é o caminho para o arquivo armazenado nesse campo. Por exemplo:p8.zdassets.com/theme_assets/...
-
{{settings.range_input}}
é o valor de entrada do intervalo.
O objeto de configurações pode ser usado como entrada para qualquer auxiliar. Por exemplo:
{{is settings.enabled}} ... {{/is}}