Qual é o meu plano?
Suite Growth, Professional, Enterprise ou Enterprise Plus
Support com Guide Professional ou Enterprise

Cada tema da central de ajuda consiste em uma coleção de modelos de página editáveis e personalizadas. Você pode usar a linguagem de modelos da central de ajuda, Curlybars, para acessar os dados da central de ajuda e manipular o conteúdo de suas páginas.

Este artigo fornece uma lista de receitas com trechos de código que você pode usar. Lembre-se: alguns recursos nessas receitas já podem estar ativados na sua central de ajuda, dependendo se você está usando um tema padrão ou personalizado e da data de ativação da sua central de ajuda.

os usuários da versão de avaliação recebem o plano Professional, que inclui opções de edição de código, mas não poderão acessar esse recurso se adquirirem o Suite Team.

Observação: este artigo é apenas para fins informativos. O Suporte ao cliente Zendesk não oferece suporte nem garantia ao código personalizado.
Este artigo abrange os seguintes tópicos:
  • Sobre a linguagem de modelos Curlybars
  • Personalização de modelos de página para categorias, seções ou artigos específicos
  • Personalização dos nomes dos idiomas no seletor de idiomas
  • Ocultação de um ou mais idiomas no seletor de idiomas
  • Permissão para que usuários classifiquem comentários de artigo por data ou votos
  • Adição de uma barra de ferramentas de formatação ao editor de comentários do artigo
  • Permissão para que usuários votem em comentários do artigo
  • Adição de resultados de pesquisa instantânea (preenchimento automático) em sua central de ajuda
  • Adição de pesquisa agrupada para incluir conteúdo externo em sua pesquisa na central de ajuda
  • Adição de resultados da pesquisa generativa ao seu tema personalizado
  • Adição da classificação por tipos de assinatura na página Minhas atividades
  • Adição das opções de classificação “data de criação” e “data de atualização” para solicitações na página Minhas atividades
  • Adição das opções Seguir/Deixar de seguir para usuários em uma organização compartilhada
  • Permissão para que usuários coloquem outros usuários em cópia em solicitações de suporte
  • Adição de um link para a solicitação original nas solicitações de acompanhamento
  • Ativação do CSAT para tickets resolvidos no portal do cliente
  • Adição de botões de votação em artigos
  • Adição de tags de conteúdo a artigos e publicações
  • Adição de medalhas ao tema personalizado da central de ajuda
  • Permissão para que os usuários visualizem perfis de usuário em sua central de ajuda
  • Ativação de subseções no seu tema da central de ajuda
  • Adição de filtros na barra lateral e resultados de várias centrais de ajuda à página de resultados de pesquisa
  • Adição do filtro de spam à central de ajuda

Sobre a linguagem de modelos Curlybars

A central de ajuda foi criada com base em uma estrutura temática que inclui sua própria linguagem de modelos para personalizações avançadas. Cada tema da central de ajuda é formado por uma coleção de modelos de páginas editáveis e personalizadas opcionais.

Os modelos de página editáveis definem a disposição de cada página. Por exemplo, há um modelo para os artigos da base de conhecimento, um modelo para a lista de solicitações e etc. O modelo é simplesmente um arquivo de texto a ser processado como página HTML quando o usuário quiser exibi-lo. Cada modelo consiste em uma mistura de marcação HTML e expressões identificáveis por chaves duplas como {{post.title}}.

As páginas personalizadas são criadas na base de código de seu tema da central de ajuda e têm uma URL específica que você pode vincular de qualquer lugar da sua central de ajuda. Você pode usar páginas personalizadas para criar e codificar páginas do zero que atendam aos seus requisitos. Por exemplo, você pode usar páginas personalizadas para criar páginas iniciais especiais para a sua central de ajuda ou até mesmo criar novas páginas para inserir conteúdo de fontes externas ao Zendesk.

A linguagem de modelos é chamada de Curlybars e implementa um amplo subconjunto da linguagem Handlebars. Entretanto, diferentemente da Handlebars, que é renderizada do lado do cliente, a Curlybars é renderizada do lado do servidor.

Você pode usar a linguagem de modelos da central de ajuda para acessar os dados da central de ajuda e manipular o conteúdo de suas páginas. No exemplo a seguir, a central de ajuda processa a lista de nomes e avatares de todas as pessoas que deixaram comentários na página:

{{#each comments}}
  <li>
    <div class="comment-avatar">
      <img src="{{author.avatar_url}}" alt="Avatar" />
    </div>
    <div class="comment-author">
      {{author.name}}
    </div>
  </li>
{{/each}} 

Antes era possível usar componentes para personalizar a central de ajuda, mas não era possível personalizar esses componentes, com exceção da manipulação com JavaScript. Com o Curlybars, você pode acessar o HTML que estava oculto anteriormente dentro do componente e editá-lo.

Para obter mais informações, consulte:
  • Referência da linguagem de modelos da central de ajuda
  • Uso da linguagem de modelos da central de ajuda
  • Personalização do conteúdo com Curlybars

Personalização de modelos de página para categorias, seções ou artigos específicos

Você pode personalizar os modelos Categoria, Seção e Artigo para categorias, seções ou artigos específicos respectivamente.

Modelos aplicáveis
  • Categoria
  • Seção
  • Artigo
Receita
  • Especifique a categoria, a seção ou a ID do artigo em um bloco is:
    {{#is id 200646205}}
      ...
    {{/is}}

Exemplo

A inserção do bloco a seguir no modelo Seção personaliza o modelo nas seções 200646205 e 203133596:

{{#is section.id 200646205}}
  <p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
  <p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}

Referência

  • Auxiliar is

Personalização dos nomes dos idiomas no seletor de idiomas

Você pode personalizar os nomes dos idiomas no seletor de idiomas em cada página da central de ajuda. Isso é útil se você deseja usar uma variável do idioma, como "English (U.S.)" (inglês - EUA), para todas as variáveis do idioma, como "English" (inglês).

Modelo aplicável
  • Cabeçalho
Expressão aplicável
  • {{#if alternative_locales}}...{{/if}}
Receita
  • Substitua a expressão {{current_locale.name}} pela expressão condicional a seguir:
    {{#is current_locale.name 'English (US)'}}
      English
    {{else}}
      {{current_locale.name}}
    {{/is}}

    Além disso, substitua a expressão de localidade alternativa {{name}} pela expressão condicional a seguir:

    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}

Exemplo

{{#if alternative_locales}}
  <div class="dropdown language-selector" aria-haspopup="true">
  <a class="dropdown-toggle">
  {{#is current_locale.name 'English (US)'}}
    English
  {{else}}
    {{current_locale.name}}
  {{/is}}
  </a>
  <span class="dropdown-menu dropdown-menu-end" role="menu">
  {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}
    </a>
  {{/each}}
  </span>
  </div>
{{/if}}

Referência

  • Auxiliar is

Ocultação de um ou mais idiomas no seletor de idiomas

Ocultar um idioma no seletor de idiomas pode ser útil se o conteúdo naquele idioma não estiver pronto para o lançamento.

Modelo aplicável
  • Cabeçalho
Expressão aplicável
  • {{#each alternative_locales}}...{{/each}}
Receita
  • Substitua a expressão <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> pela expressão condicional a seguir:
    {{#is name 'Français'}}
      {{! do nothing }}
    {{else}}
      <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
      </a>
    {{/is}}

Exemplo

{{#each alternative_locales}}
  {{#is name 'Français'}}
    {{! do nothing }}
  {{else}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
    </a>
  {{/is}}
{{/each}}

Referência

  • Auxiliar is

Permissão para que usuários classifiquem comentários de artigo por data ou votos

Por padrão, os comentários dos artigos são classificados por data, dos mais recentes aos mais antigos. Você pode adicionar links de Data e Votos para que os usuários possam clicar e classificar os comentários por data ou por número de votos.

Observação: os links de classificação por Data e Votos estão disponíveis por padrão nos temas padrão e nos temas que foram personalizados após o lançamento da nova comunidade em 30 de novembro de 2015.
Modelo aplicável
  • Artigo
Elemento HTML aplicável
  • <section class="article-comments">...</section>
Receita
  • Insira a tag div a seguir após a marca de cabeçalho da seção de comentários, <h2>{{t 'comments'}}</h2>, preferencialmente após a expressão {{#if comments}}, se houver, para garantir que os classificadores não sejam exibidos caso ninguém tenha deixado um comentário ainda:
    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
      {{/each}}
    </div> 

Exemplo

<section class="article-comments">
  <h2>{{t 'comments'}}</h2>
    {{#if comments}}

    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
     {{/each}}
    </div> 
     
    <ul class="comment-list">
      {{#each comments}}
      ...

Referência

  • Propriedade comment_sorters

Adição de uma barra de ferramentas de formatação ao editor de comentários do artigo

Você pode adicionar uma barra de ferramentas de formatação ao editor de comentários do artigo. Com ela, os usuários podem adicionar negrito e itálico, listas desordenadas ou ordenadas, imagens e links.

Observação: a barra de ferramentas de formatação está disponível por padrão nos temas padrão e temas que foram personalizados após o lançamento da nova comunidade em 30 de novembro de 2015.
Modelo aplicável
  • Artigo
Objeto aplicável
  • {{#form 'comment'}}...{{/form}}
Receita
  • Localize e substitua a expressão {{textarea 'body'}} no objeto de formulário por {{wysiwyg 'body'}}

Exemplo

{{#form 'comment' class='comment-form'}}
  <div class="comment-avatar">
    {{user_avatar class='user-avatar'}}
  </div>

  <div class="comment-container">
     {{wysiwyg 'body'}}
     <div class="comment-form-controls">
       {{input type='submit'}}
     </div>
  </div>
{{/form}}

Referência

  • Auxiliar wysiwyg

Permissão para que usuários votem em comentários do artigo

Por padrão, os usuários podem votar em artigos. Você também pode permitir que eles votem nos comentários do artigo.

Observação: os links de votação estão disponíveis por padrão nos temas padrão e temas que foram personalizados após o lançamento da nova comunidade em 30 de novembro de 2015.
Modelo aplicável
  • Artigo
Expressão aplicável
  • {{#each comments}}...{{/each}}
Receita
  • Insira a tag div a seguir após a marca <li id="{{anchor}}">:
    <div class="comment-vote vote">
      {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
      {{vote 'sum' class="article-vote-sum"}}
      {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
    </div>

    O auxiliar “vote” acima empresta as classes CSS para os votos de artigos para estilizarem os links de votos do comentário. Você pode definir suas próprias classes para estilizar os votos do comentário.

Exemplo

{{#each comments}}
  <li id="{{anchor}}" class="comment">

  <div class="comment-vote vote">
    {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
    {{vote 'sum' class="article-vote-sum"}}
    {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
  </div>
  
  <div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
    <img src="{{author.avatar_url}}" alt="Avatar">
  </div>
  ...

Referência

  • Auxiliar vote

Adição de resultados da pesquisa generativa ao seu tema personalizado

Importante: a implementação da disponibilidade geral da pesquisa generativa começa em 1.º de abril de 2025 e estará ativada por padrão nas configurações do Guide. A pesquisa generativa não estará visível para os usuários finais até que o recurso esteja disponível para o público em geral em 5 de maio. A partir de 1.º de abril, se você quiser recusar esse recurso, poderá desativar os resultados da pesquisa generativa desabilitando a configuração de pesquisa com respostas rápidas em cada central de ajuda em que quiser remover o recurso.

A pesquisa generativa fornece respostas geradas por IA a consultas feitas na central de ajuda. A pesquisa generativa fornece respostas para as perguntas que os usuários fazem na central de ajuda, sem exigir que eles cliquem em vários resultados de pesquisa.

Observação: por padrão, a pesquisa generativa está disponível nos temas padrão e em temas que foram personalizados após 25 de março de 2025. Se necessário, você pode desativar a pesquisa generativa nas suas configurações de pesquisa.

Depois que a pesquisa generativa é ativada, ela funciona avaliando as perguntas que os usuários inserem na pesquisa da central de ajuda. Os principais artigos e publicações correspondentes são avaliados pela IA generativa, que então gera uma resposta. Nos planos Enterprise com pesquisa agrupada configurada, a IA generativa também avalia o conteúdo externo e pode inseri-lo na resposta. A resposta gerada é publicada por padrão no início dos resultados da pesquisa. Consulte Uso da pesquisa generativa para fornecer respostas viabilizadas por IA para consultas de pesquisa.

Modelo aplicável
  • Página de resultados da pesquisa (search_results.hbs)
Receita
  • Adicione o auxiliar {{generative_answers}} ao modelo search_results.hbs do tema em que você quer que as respostas generativas sejam exibidas.

Exemplo

<section id="main-content" class="search-results-column">
{{generative_answers}}
<h1 class="search-results-subheading">

Referência

  • search_results.hbs
  • auxiliar generative_answers

Adição de resultados de pesquisa instantânea (preenchimento automático) em seu tema personalizado da central de ajuda

Você pode exibir links de artigos sugeridos à medida que o usuário digita na caixa de pesquisa incluindo a pesquisa instantânea a seu tema personalizado.

Observação: a pesquisa instantânea está disponível em temas padrão e temas que foram personalizados após o lançamento da pesquisa instantânea em 5 de julho de 2016. Se necessário, é possível desativar a Pesquisa instantânea removendo-a do tema.

Quando a pesquisa instantânea está ativada, são exibidos no máximo seis artigos sugeridos à medida que o usuário digita seu termo de pesquisa na caixa de pesquisa. A compatibilidade dos artigos para apresentação na pesquisa instantânea é determinada somente pelo título do artigo. O usuário pode selecionar artigos correspondentes diretamente da caixa de Pesquisa sem primeiro visitar a página de resultados de pesquisa.

Modelos aplicáveis
  • Qualquer modelo que contenha sua expressão de pesquisa (em sua maioria é o modelo do Cabeçalho ou da Página inicial)

Expressão aplicável

  • {{search}}
Receita
  • Adicione instant=true à expressão de pesquisa.
    {{search instant=true}}

Exemplo

<div class="search-box">
  <h1 class="help-center-name">{{help_center.name}}</h1>
  {{search instant=true}}
</div>

Adição de pesquisa agrupada para incluir conteúdo externo em sua pesquisa na central de ajuda

Há duas partes para ativar a pesquisa agrupada no modelo de resultados de pesquisa em sua central de ajuda:

  • Adição de filtros à barra lateral
  • Como processar os resultados

Adição de filtros à barra lateral

É necessário atualizar o modelo de resultados da pesquisa atualizando as propriedades usadas nos filtros da barra lateral.

Atualize o código a seguir em <div class="search-results">.
<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#is current_filter.identifier 'knowledge_base'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
    {{/is}}
    {{#is current_filter.identifier 'community'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
    {{/is}}
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

Como processar os resultados

Este trecho é um exemplo de como usar o auxiliar {{results}} para processar os resultados de pesquisa agrupada:

{{#if results}}
<ul class="search-results-list">
  {{#each results}}
	<li class="search-result-list-item result-{{type}}">
	  <h2 class="search-result-title">
		<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
               target=”_blank” {{/if}}>
                     {{title}}
                     {{#if is_external}}
                       <svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
                     {{/if}}

</a>
	  </h2>
	  <article>
		<div class="search-result-icons">
		  {{#if vote_sum}}
			<span class="search-result-votes">{{vote_sum}}</span>
		  {{/if}}
		  {{#if comment_count}}
			<span class="search-result-meta-count">
			  {{comment_count}}
			</span>
		  {{/if}}
		</div>
		<ul class="meta-group">
		  <li>
			<ol class="breadcrumbs search-result-breadcrumbs">
			  {{#each path_steps}}
				<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
			  {{/each}}
			</ol>
		  </li>
		  <li class="meta-data">{{author.name}}</li>
		  <li class="meta-data">{{date created_at}}</li>
		</ul>
		<div class="search-results-description">{{text}}</div>
	  </article>
	</li>
  {{/each}}
</ul>
{{else}}
<p>
  {{t 'no_results_unified'}}
  {{#link 'help_center'}}
	{{t 'browse_help_center'}}
  {{/link}}
</p>
{{/if}}

Adição da classificação por tipos de assinatura na página Minhas atividades

Para facilitar a experiência, você pode permitir que os usuários classifiquem o conteúdo que seguem por tipo na página Minhas atividades > Seguindo.

Modelos aplicáveis
  • Página Seguindo
Receita
  • Na tag <nav>, insira o código a seguir:
    <div class="my-activities-following-header">
      <span class="dropdown">
        <span class="dropdown-toggle">
          {{current_filter.label}}
        </span>
        <span class="dropdown-menu" role="menu">
          {{#each filters}}
            <a href="{{url}}" aria-selected="{{selected}}" role="menuitem">
              {{name}}
            </a>
          {{/each}}
        </span>
      </span>
    </div>
    
    

Adição das opções de classificação “data de criação” e “data de atualização” para solicitações na página Minhas atividades

É possível adicionar as opções de classificação por data de criação e atualização para os usuários finais na página de solicitação Minhas atividades.

Observação: as opções de classificação por data de criação e de atualização estão disponíveis por padrão em temas padrão e em temas que foram personalizados após agosto de 2016.
Modelo aplicável
  • Página da lista de solicitações

Receita

  • Substitua {{t 'created'}} por:
    {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}
  • Substitua {{t 'last_activity'}} por:
    {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Referência
  • Auxiliar requests link

Adição das opções Seguir/Deixar de seguir para usuários em uma organização compartilhada

Você pode permitir que os usuários recebam notificações por e-mail das solicitações na organização compartilhada deles. O auxiliar {{subscribe}} insere um botão "seguir" em que o usuário pode clicar se desejar receber notificações por e-mail da criação ou atualização de solicitações em sua organização compartilhada. Os usuários também podem deixar de seguir se não desejarem mais receber atualizações.

Observação: o botão Seguir para organizações compartilhadas está disponível por padrão nos temas padrão e temas que foram personalizados após 23 de janeiro de 2016.
Modelo aplicável
  • Página da lista de solicitações
Objeto aplicável
  • {{#form 'requests_filter'}}...{{/form}}
Receita
  • Adicione o auxiliar {{subscribe}} ao objeto de formulário.

Exemplo

{{#form 'requests_filter' class='request-table-toolbar'}}
  {{input 'query' id='quick-search' type='search' class='requests-search'}}
  <div class="request-table-filters">
    {{label 'organization' for='request-organization-select' class='request-filter'}}
    {{select 'organization' id='request-organization-select' class='request-filter'}}
    {{subscribe}}
    {{label 'status' for='request-status-select' class='request-filter'}}
    {{select 'status' id='request-status-select' class='request-filter'}}
  </div>
{{/form}}

Referência

  • Auxiliar subscribe

Permissão para que usuários conectados coloquem outros usuários em cópia em solicitações de suporte

Você pode permitir que usuários conectados adicionem cópias (CCs) nas solicitações de suporte novas e existentes na central de ajuda. Quando uma cópia CC é adicionada a uma solicitação de suporte, o usuário copiado receberá uma notificação por e-mail a cada atualização do ticket.

Observação: a opção de CC está disponível para solicitações de suporte por padrão em temas padrão e temas que foram personalizados após 14 de dezembro de 2015.

Após adicionar o código ao seu tema personalizado, você deve ativar o recuso (consulte Definição das permissões de cópia).

Modelo aplicável
  • Página Solicitações
Objeto aplicável
  • {{#form 'comment' class='comment-form'}}...{{/form}}
Receita
  • Insira o seguinte trecho dentro do formulário de comentário.
    {{#if help_center.request_ccs_enabled}}  
      <div class="comment-ccs">
         {{token_field 'ccs'
            class="ccs-input"}}
      </div>
     {{/if}}

Adição de um link para a solicitação original nas solicitações de acompanhamento

Você pode exibir um link em uma solicitação de acompanhamento para a solicitação original, caso haja uma.

Observação: o link para a solicitação original na solicitação de acompanhamento está disponível por padrão em temas padrão e em temas que foram personalizados após agosto de 2016.

Modelo aplicável
  • Página Solicitações

Receita

  • Adicione o trecho a seguir no modelo de página Solicitações em que você deseja exibir o link para o ticket principal, se houver um:
    {{#if request.followup_source_id}}
      <dl class="request-details">
        <dt>{{t 'followup'}}</dt>
        <dd>{{link 'request' id=request.followup_source_id}}
    </dd>
      </dl>
    {{/if}}
Referência
  • Página de nova solicitação

Ativação do CSAT para tickets resolvidos no portal do cliente

Você pode usar o CSAT para coletar feedback dos usuários finais por meio do portal do cliente.
Observação: quando o CSAT está ativado, a opção CSAT no portal do cliente fica disponível por padrão em temas padrão e personalizados com base na Templating API v3.2.0 (lançada em 8 de fevereiro de 2024) ou superior.
Modelo aplicável
  • Página Solicitações
Receita
  • Adicione um bloco {{#with satisfaction_response}}...{{/with}} ao modelo request_page.hbs.
Exemplo
  • Consulte a referência Copenhagen theme request page.hbs no GitHub.

  • Adicione o seguinte código do modelo:
    {{#with satisfaction_response}}
      {{#with rating}}
    	<dl class="request-details">
    	  <dt>{{t 'rating'}}</dt>
    	  <dd>
    		<div>
    		  {{#is scale_type 'numeric'}}
    			{{t 'numerical_rating' value=value max_value=max_value}}
    		  {{else}}
    			{{scale_value}}
    		  {{/is}}
    		</div>
    
    		{{#link 'survey_response' id=../id}}
    		  {{#if ../editable}}
    			{{t 'edit_feedback'}}
    		  {{else}}
    			{{t 'view_feedback'}}
    		  {{/if}}
    		{{/link}}
    	  </dd>
    	</dl>
      {{else}}
    	{{#if editable}}
    	  <dl class="request-details">
    		<dt>{{t 'rating'}}</dt>
    		<dd>
    		  {{#link 'survey_response' id=id}}
    			{{t 'add_feedback'}}
    		  {{/link}}
    		</dd>
    	  </dl>
    	{{/if}}
      {{/with}}
    {{/with}}
Referência
  • satisfaction_response

Adição de botões de votação em artigos

Os botões de votação dos artigos fazem parte do tema Copenhagen padrão. No entanto, se você não vir a opção de votar em seus artigos, é possível que tenha removido os botões do seu tema.

O código para adicionar botões de votação pode variar de acordo com o tema, mas este é o código do tema Copenhagen padrão, caso você precise dele.

Modelo aplicável
  • Artigo
Receita
  • Adicione o código a seguir ao modelo de página de artigo:
    {{#with article}}
      <div class="article-votes">
        <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
        <div class="article-votes-controls" role='radiogroup'>
          {{vote 'up' role='radio' class='button article-vote article-vote-up'}}
          {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
        </div>
        <small class="article-votes-count">
          {{vote 'label' class='article-vote-label'}}
        </small>
      </div>
    {{/with}}

Adição de tags de conteúdo a artigos e publicações

Por padrão, o tema Copenhagen padrão exibe tags de conteúdo em artigos, publicações na comunidade e páginas de pesquisa. Se você usa um tema personalizado ou do Marketplace, talvez você precise atualizar seu tema para exibir tags de conteúdo nessas páginas. Para começar, você pode usar os arquivos a seguir que servem de modelo no tema Copenhagen:

  • article_page.hbs
  • community_post_page.hbs
  • new_community_post_page.hbs
  • search_results.hbs

Assim que estiver familiarizado, pode adicionar tags de conteúdo a outras páginas. Por exemplo, o trecho a seguir adiciona uma lista de tags ao modelo da página do tópico da comunidade.

{{#each posts}}
  ...

  {{#if (compare content_tags.length ">" 0)}}
    <ul class="content-tag-list">
      {{#each content_tags}}
        <li class="content-tag-item">
          {{#link "search_result" content_tag_id=id}}
            {{name}}
          {{/link}}
        </li>
      {{/each}}
    </ul>
  {{/if}}

  ...

{{/each}}

Adição de medalhas ao tema personalizado da central de ajuda

Observação: por padrão, as medalhas estão disponíveis desde 1º de setembro de 2020.
Você pode criar um tema personalizado se não quiser usar o tema Copenhagen. No entanto, as medalhas requerem o uso da API Theme Templating v2. Se você está ainda usando a v1, use as instruções de atualização para fazer isso. Você também pode encontrar inspiração para fazer isso no tema de exemplo do Zendesk no GitHub.

Esse tópico abrange:

  • Adição de novo auxiliar de ações do perfil do usuário
  • Exibição de medalhas de cargo na página de listagens da publicação
  • Exibição de medalhas de cargo em uma publicação e na página de comentários
  • Exibição de medalhas de cargo e conquista em uma página de perfil do usuário

Adição de novo auxiliar de ações do perfil do usuário

Você deve adicionar a opção Conceder medalha se deseja conceder medalhas aos agentes. No entanto, antes disso, é necessário adicionar o novo auxiliar de ações.

Como adicionar a declaração de auxiliar de ações

  1. Abra o editor de código de tema online e vá até a página de perfil do usuário do agente.
    Page filename: user_profile_page.hbs
  2. Encontre a declaração de auxiliar edit.
    {{edit}}
  3. Substitua a declaração de auxiliar edit pela declaração do novo auxiliar actions.
    {{actions}}

Agora os agentes poderão conceder medalhas. O novo botão será estilizado com CSS de acordo com as suas preferências. Para obter mais ideias inspiradoras, veja o tema de exemplo da Zendesk.

Exibição de medalhas de cargo na página de listagens da publicação

É possível adicionar as medalhas de cargo como rótulos que ficam ao lado do nome do autor na página de listagens da publicação. Elas se parecem com os rótulos de status de publicação, e para simplificar, a classe de estilos está sendo reutilizada.

Como exibir as medalhas de cargo na página de listagens da publicação

  1. Abra o editor de código de tema online e vá até
    Page filename: community_topic_page.hbs
  2. Encontre a declaração author name. No tema Copenhagen, a linha é semelhante a:
    <li class="meta-data">{{author.name}}</li>
  3. Adicione este trecho de código à linha após a declaração:
    {{#each author.badges}}
    <li class="meta-data">
       {{#is category_slug "titles"}}
           <span class="status-label">{{name}}</span>
       {{/is}}
    </li>
    {{/each}}

Para usuários avançados: não (re)utilize a classe de CSS status-label para esse cenário. Em vez disso, crie uma nova classe de CSS especializada que você pode modificar independentemente do estilo de status do rótulo.

Apresentamos a seguir um exemplo de medalha de cargo para um membro da comunidade:

Exemplo de medalha título das medalhas do Gather.

Exibição de medalhas de cargo em uma publicação e na página de comentários

Como exibir as medalhas de cargo na página de listagens da publicação

  1. Abra o editor de código de tema online e vá até
    Page filename: community_post_page.hbs
  2. Encontre a declaração author name. No tema Copenhagen, a linha é semelhante a:
    <li class="meta-data">{{author.name}}</li>
  3. Adicione este trecho de código à linha após a declaração:
    {{#each author.badges}}
    <li class="meta-data">
       {{#is category_slug "titles"}}
           <span class="status-label">{{name}}</span>
       {{/is}}
    </li>
    {{/each}}

Exibição de medalhas de cargo e conquista em uma página de perfil do usuário

Na página de perfil do usuário, é provável que você queira adicionar mais do que medalhas de cargo. Por exemplo, talvez você queira adicionar as conquistas do usuário. O exemplo a seguir mostra um ícone gráfico para cada medalha de conquista. Baseado no tema Copenhagen, suas medalhas de conquista se parecem com este exemplo:

Medalhas de título e conquista do Gather.

Como exibir as medalhas de cargo e conquista em uma página de perfil do usuário

  1. Abra o editor de código de tema online e vá até
    Page filename: user_profile_page.hbs
  2. Encontre as linhas no arquivo onde o nome do usuário é renderizado. Por exemplo:
    <h1 class="name">
      {{#if user.url}}
        <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
      {{else}}
        {{user.name}}
      {{/if}}
    </h1>
  3. Substitua esse trecho de código por:
    <h1 class="name">
      {{#if user.url}}
        <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
      {{else}}
        {{user.name}}
      {{/if}}
      {{#each user.badges}}    {{#is category_slug "titles"}}
          <span class="status-label">{{name}}</span>
        {{/is}}  {{/each}}
    </h1>
    <div style="margin-top: 1em;">
      {{#each user.badges}}    {{#is category_slug "achievements"}}
          <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;">
            <img src="{{icon_url}}" height="40"><br>
            <span style="font-size: 0.8em;">{{name}}</span>
          </div>
        {{/is}}  {{/each}}
    </div>

Neste exemplo, para simplificar, todos os estilos CSS estão em linha. Como práticas recomendadas, use estes exemplos para como inspiração, mas é importante verificar se o estilo combina com seu tema.

Permissão para que os usuários visualizem perfis de usuário em sua central de ajuda

Esta seção descreve como atualizar os modelos necessários para que os usuários de sua central de ajuda possam clicar no nome ou avatar do autor e visualizar o perfil do usuário.

Observação: por padrão, os perfis de usuários estão disponíveis em temas padrão e temas que foram personalizados após 20 de junho de 2016.
As soluções discutidas nesta seção envolvem o uso do auxiliar link na linguagem de modelo da central de ajuda. Consulte o auxiliar link na documentação de modelo para atualizar os seguintes modelos:
  • Artigos
  • Publicações na comunidade
  • Página de resultados da pesquisa
Artigos

Faça as seguintes atualizações no modelo de página de artigo.

Atualização do nome do autor do artigo

Substitua o seguinte bloco if:

{{#if article.author.url}}
  <a href="{{article.author.url}}" target="_zendesk_lotus">
    {{article.author.name}}
  </a>
{{else}}
  {{article.author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=article.author.id class="user-profile"}}
  {{article.author.name}}
{{/link}}
Atualização de nomes de autor do comentário

Substitua o seguinte bloco if:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Atualização do avatar do autor do artigo e do comentário

Substitua a seguinte tag de imagem:

<img src="{{article.author.avatar_url}}" alt="Avatar"/>

pelo seguinte auxiliar link:

{{#link "user_profile" id=article.author.id class="user-profile"}}
  <img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}
Publicações na comunidade

Faça as seguintes atualizações no modelo de página de Publicação da comunidade.

Atualização dos nomes de autores de publicações

Substitua o seguinte bloco if:

{{#if post.author.url}}
  <a href="{{post.author.url}}" target="_zendesk_lotus">
    {{post.author.name}}
  </a>
  {{else}}
    {{post.author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=post.author.id class="user-profile"}}
  {{post.author.name}}
{{/link}}
Atualização dos nomes de autores de comentários

Substitua o seguinte bloco if:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Atualização dos avatares de autores de publicações

Substitua a seguinte tag de imagem:

<img src="{{post.author.avatar_url}}" alt="Avatar"/>

pelo seguinte auxiliar link:

{{#link "user_profile" id=post.author.id class="user-profile"}}
  <img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Atualização dos avatares de autores de comentários

Substitua a seguinte tag de imagem:

<img src="{{author.avatar_url}}" alt="Avatar"/>

pelo seguinte auxiliar link:

{{#link "user_profile" id=author.id class="user-profile"}}
  <img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}
Resultados da pesquisa

Faça as seguintes atualizações no modelo de resultados de pesquisa.

Atualização dos nomes de autor dos artigos nos resultados

Substitua o seguinte bloco if no bloco {{#each article_results}}:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Atualização de nomes de autor das publicações nos resultados

Substitua o seguinte bloco if no bloco {{#each post_results}}:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

pelo seguinte auxiliar link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Atualização dos resultados de pesquisa em temas mais antigos

Se você tem um tema mais antigo, os resultados de pesquisa podem usar o auxiliar {{meta}} em vez disso. Nesse caso, você pode usar o código descrito nesta seção para vincular os nomes de autor às páginas de perfil da central de ajuda.

Talvez seja necessário atualizar a estilização do CSS para a página dos resultados de pesquisa para que pareçam uniformes.

Atualização dos nomes de autor dos artigos nos resultados

Substitua as seguintes tags DIV:

<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>

Por:

<ol
 class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>
<div class="search-result-description">
  {{text}}
</div>
<div class="search-result-meta">
  <span dir="auto" class="search-result-meta-name">
    {{#link "user_profile" id=author.id class="user-profile"}}
      {{author.name}}
    {{/link}}
  </span>
  <span class="search-result-meta-time">{{date created_at}}</span>
</div>

Para o resultado final:

{{#each article_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    {{#if vote_sum}}
      <span class="search-result-votes">{{vote_sum}}</span>
    {{/if}}
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
    </div>
  </li>
{{/each}}
Atualização de nomes de autor das publicações nos resultados

Adicione:

<ol class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>

Para o resultado final:

{{#each post_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
      <span class="search-result-meta-count">
        {{t 'comments_count' count=comment_count}}
      </span>
    </div>
  </li>
{{/each}}

Ativação de subseções no seu tema da central de ajuda

Você pode adicionar subseções à sua base de conhecimento da central de ajuda para criar mais níveis na sua hierarquia de conteúdo. Se você está usando um tema que foi personalizado antes de 29 de março de 2019, precisa adicionar um código ao seu tema personalizado da central de ajuda para ativar as subseções. O código a seguir vem com as versões mais recentes do tema Copenhagen.

Observação: por padrão, as subseções estão disponíveis para o Guide Enterprise nos temas padrão e os temas personalizados após 29 de março de 2019.
Modelo aplicável
  • Seção
Objeto aplicável
  • section.sections
Receita
  • Insira o trecho a seguir no modelo de página de seção do Zendesk, section_page.hbs, após a tag do cabeçalho (<header class="page-header">...</header>) e antes da tag de paginação ({{pagination}}):
    {{#if section.sections}}
      <ul class="section-list section-list--collapsed">
        {{#each section.sections}}
        <li class="section-list-item">
          <a href="{{url}}">
            <span>{{name}}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
            </svg>
          </a>
        </li>
        {{/each}}
        <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
      </ul>
    {{/if}}
    
    {{#if section.articles}}
      <ul class="article-list">
        {{#each section.articles}}
        <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    	{{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}}
    	<a href="{{url}}" class="article-list-link">{{title}}</a>
        </li>
        {{/each}}
      </ul>
    {{else}}
      <i class="section-empty">
        <a href="{{section.url}}">{{t 'empty'}}</a>
      </i>
    {{/if}}

Adição de filtros na barra lateral e resultados de várias centrais de ajuda à página de resultados de pesquisa

A pesquisa na central de ajuda permite que os usuários pesquisem em centrais de ajuda, se houver várias, e apresenta os resultados da pesquisa feita nas centrais de ajuda, na base de conhecimento e na comunidade em um feed unificado com filtros na página de resultados de pesquisa.

Se você está usando um tema que foi personalizado antes de 29 de março de 2019, precisa adicionar um código ao seu tema personalizado da central de ajuda para ser compatível com resultados de pesquisa unificados e a pesquisa em várias centrais de ajuda. Se você tiver várias centrais de ajuda, precisará atualizar seu tema em cada central de ajuda.

Observação: por padrão, os resultados de pesquisa unificados e a pesquisa em várias centrais de ajuda são aceitos em temas padrão e em temas que personalizados depois de 25 de setembro de 2019.

A maneira mais rápida de fazer as alterações necessárias em seu tema é importar a versão mais recente do tema Copenhagen compatível com resultados de pesquisa unificados. Para fazer isso, consulte Adição de um tema da central de ajuda ao Guide.

Se você preferir atualizar seu tema personalizado existente, esta seção apresenta uma visão geral de todas as alterações que você precisa fazer. As soluções apresentadas nesta seção envolvem o uso dos auxiliares help_center_filters, filters e subfilters com linguagem de modelos Curlybars para atualizar os arquivos a seguir:
  • Resultados da pesquisa
  • CSS
  • JavaScript

Atualização do modelo de resultados de pesquisa para adicionar filtros à barra lateral

Você precisa atualizar o modelo de resultados de pesquisa para adicionar filtros à barra lateral e para processar os resultados.

Adição de filtros à barra lateral

Este trecho é um exemplo de como é possível implementar facetas de pesquisa na barra lateral da página de resultados usando os novos auxiliares “filter”.

Insira o código a seguir no <div class="search-results"> modelo de resultados de pesquisa:


<section class="search-results-sidebar">
     {{#if help_center.community_enabled}}
        <section class="filters-in-section collapsible-sidebar">
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
          <ul>
            {{#each filters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
      {{#if subfilters}}
        <section class="filters-in-section collapsible-sidebar">
          {{#is current_filter.identifier 'knowledge_base'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
          {{/is}}
          {{#is current_filter.identifier 'community'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
          {{/is}}
          <ul>
            {{#each subfilters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
    </section>
Como processar os resultados

Este trecho é um exemplo de como usar o auxiliar {{results}} para processar os resultados de pesquisa unificados.

Substitua os auxiliares {{article_results}} e {{post_results}}, além de seus H3s search-results-subheading associados

no modelo de resultados de pesquisa por:

{{#if results}}
        <ul class="search-results-list">
          {{#each results}}
            <li class="search-result-list-item result-{{type}}">
              <h2 class="search-result-title">
                <a href="{{url}}" class="results-list-item-link">{{title}}</a>
              </h2>
              <article>
                <div class="search-result-icons">
                  {{#if vote_sum}}
                    <span class="search-result-votes">{{vote_sum}}</span>
                  {{/if}}
                  {{#if comment_count}}
                    <span class="search-result-meta-count">
                      {{comment_count}}
                    </span>
                  {{/if}}
                </div>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>
                  </li>
                  <li class="meta-data">{{author.name}}</li>
                  <li class="meta-data">{{date created_at}}</li>
                </ul>
                <div class="search-results-description">{{text}}</div>
              </article>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p>
          {{t 'no_results_unified'}}
          {{#link 'help_center'}}
            {{t 'browse_help_center'}}
          {{/link}}
        </p>
      {{/if}}

Atualização do estilo CSS dos filtros da barra lateral na página de resultados de pesquisa

Você pode adicionar estilos CSS para os filtros da barra lateral. O exemplo a seguir se baseia no tema Copenhagen.

Confirme se as regras CSS a seguir estão incluídas em seu arquivo style.css:

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}

.search-results-sidebar .sidenav-item[aria-selected="true"] {
  background-color: $brand_color;
  color: $brand_text_color;
  text-decoration: none;
}

.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-result-title {
  font-size: 16px;
}

.search-result-description {
  margin-top: 15px;
  word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
  color: lighten($text_color, 20%);
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: $brand_color;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
  font-style: normal;
  background: yellow;
}

/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
  font-style: bold;
}

Atualização do JavaScript para a barra lateral recolhível na página de resultados de pesquisa

É possível adicionar JavaScript à barra lateral recolhível na página de resultados de pesquisa. O exemplo a seguir se baseia no tema Copenhagen.

Substitua o bloco a seguir no arquivo script.js no tema personalizado:

// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});

pelo seguinte trecho de código:

// Toggles expanded aria to collapsible elements
  var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');

  Array.prototype.forEach.call(collapsible, function(el) {
    var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');

    el.addEventListener('click', function(e) {
      toggleNavigation(toggle, this);
    });

    el.addEventListener('keyup', function(e) {
      if (e.keyCode === 27) { // Escape key
        closeNavigation(toggle, this);
      }
    });
  });

Adição do filtro de spam à central de ajuda

Se você estiver usando um tema personalizado da central de ajuda criado antes de 1 de abril de 2014, precisará adicionar um estilo extra à sua folha de estilos para oferecer suporte ao filtro de spam.

Os novos elementos HTML a seguir foram adicionados:
  • Página do artigo
    • Elemento section com a classe "pending-comments-list"
    • Elemento span com a classe "pending-moderation-comment-badge"
  • Página da pergunta
    • Elemento section com a classe "pending-answers-list"
    • Elemento span com a classe "pending-moderation-answer-badge"
Adicione o seguinte à sua folha de estilos do tema personalizado:
.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}
Powered by Zendesk