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.
- 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 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
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.
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.
- Categoria
- Seção
- Artigo
- 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
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).
- Cabeçalho
{{#if alternative_locales}}...{{/if}}
- 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
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.
- Cabeçalho
{{#each alternative_locales}}...{{/each}}
- Substitua a expressão
{{name}}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
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.
- Artigo
...
- Insira a tag div a seguir após a marca de cabeçalho da seção de comentários,
{{t 'comments'}}
{{#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
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.
- Artigo
{{#form 'comment'}}...{{/form}}
- 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
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.
- Artigo
{{#each comments}}...{{/each}}
- Insira a tag div a seguir após a marca
:<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
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.
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.
- 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}}
- 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
É necessário atualizar o modelo de resultados da pesquisa atualizando as propriedades usadas nos filtros da barra lateral.
.<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.
- Página Seguindo
- Na tag
, 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.
- 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}}
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.
- Página da lista de solicitações
{{#form 'requests_filter'}}...{{/form}}
- 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
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.
Após adicionar o código ao seu tema personalizado, você deve ativar o recurso. Consulte Definição das permissões de cópia.
- Página Solicitações
{{#form 'comment' class='comment-form'}}...{{/form}}
- 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.
- Página Solicitações
Receita
- Adicione o trecho a seguir no modelo de página Solicitações onde 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}}
Ativação do CSAT para tickets resolvidos no portal do cliente
- Página Solicitações
- Adicione um bloco
{{#with satisfaction_response}}...{{/with}}ao modelo request_page.hbs.
-
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}}
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.
- Artigo
- 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:
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
Esse tópico abrange:
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
- 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
- Encontre a declaração de auxiliar edit.
{{edit}} - 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
- Abra o editor de código de tema online e vá até
Page filename: community_topic_page.hbs
- Encontre a declaração author name. No tema Copenhagen, a linha é semelhante a:
<li class="meta-data">{{author.name}}</li> - 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:
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
- Abra o editor de código de tema online e vá até
Page filename: community_post_page.hbs
- Encontre a declaração author name. No tema Copenhagen, a linha é semelhante a:
<li class="meta-data">{{author.name}}</li> - 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:
Como exibir as medalhas de cargo e conquista em uma página de perfil do usuário
- Abra o editor de código de tema online e vá até
Page filename: user_profile_page.hbs
- 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> - 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.
link na linguagem de modelo Curlybars, consulte auxiliar link na documentação de modelo para atualizar os modelos a seguir:
ArtigosFaça as seguintes atualizações no modelo de página de artigo.
Atualização do nome do autor do artigoSubstitua 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árioSubstitua 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árioSubstitua 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 comunidadeFaça as seguintes atualizações no modelo de página de Publicação da comunidade.
Atualização dos nomes de autores de publicaçõesSubstitua 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áriosSubstitua 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çõesSubstitua 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áriosSubstitua 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 pesquisaFaça as seguintes atualizações no modelo de resultados de pesquisa.
Atualização dos nomes de autor dos artigos nos resultadosSubstitua 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 resultadosSubstitua 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 antigosSe 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 resultadosSubstitua 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 resultadosAdicione:
<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.
- Seção
section.sections
- 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 (
... {{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.
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.
help_center_filters, filters e subfilters com linguagem de modelos Curlybars para atualizar os arquivos a seguir:
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 Este trecho é um exemplo de como usar o auxiliar {{results}} para processar os resultados de pesquisa unificados. Substitua os auxiliares no modelo de resultados de pesquisa por:
<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>{{article_results}} e {{post_results}}, além de seus H3s search-results-subheading associados{{#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);
}
});
});