Com a inclusão da nossalinguagem de modelagem da Central de Ajuda Curlybars, foi revelada a capacidade de adicionar instruções condicionais, o que permite impactar dinamicamente a renderização das páginas da sua Central de Ajuda. Usando instruções condicionais, podemos segmentar o número de ID exclusivo de uma categoria, seção, artigo, tópico ou publicação e ocultar esse item enquanto exibe outros.
Se você precisar encontrar a ID do item que gostaria de ocultar, navegue até a página do item e procure a URL. Você deve encontrar algo como /hc/en-us/categories/200420805-General
. O 200420805
é a ID da minha categoria.
Eis uma pequena animação para destacar o que estou tentando conseguir quando oculto uma categoria na página inicial da Central de Ajuda (assista à seção “Categoria 1”):
O código
Abordarei aqui alguns cenários para explicar como eles podem ser usados. Nestes exemplos, usarei o código padrão do tema da Central de Ajuda de Copenhagen. Usarei principalmente o não é o auxiliar, pois a ideia básica é que, se o valor não corresponder, então renderize o código exibido, ocultando efetivamente (ou não renderizando) o item identificado. Você pode ver que quero excluir uma categoria específica na página inicial, por isso passei pela instrução isnt
:
Anexei todo o código do modelo da minha página inicial a partir deste exemplo aqui. Você pode alterar o id da minha categoria por conta própria e, então, poderá ocultar suas categorias.
Ocultação de vários itens
Ocultar vários itens adiciona mais algumas linhas de código, pois não podemos passar vários números de ID para uma única instrução condicional. Em vez disso, procuraremos aninhar as instruções condicionais para que elas possam ser analisadas adequadamente. Eis um exemplo:
Se você quiser baixar o código para ocultar várias categorias, pode encontrar esse código aqui.
Outro exemplo com artigos
Sei que tenho falado bastante sobre categorias, então queria mostrar como implementar isso em outro espaço. Meu cenário é: quero reduzir a exposição de um determinado artigo, mas torná-lo acessível por meio de pesquisa ou um link direto para meus clientes. Eu escolhi a página do artigo no tema Copenhagen, na qual outros artigos na mesma seção do artigo atual aparecem em uma barra lateral como esta:
Você pode ter ocultado seu artigo no nível de seção, mas também queremos direcioná-lo aqui:
E, novamente, este é o código se você quiser experimentá-lo em seu modelo de artigo.
Algumas observações técnicas sobre essa funcionalidade
Você deve ter notado um padrão aqui de que o código estava sendo implementado no auxiliar {{#each}}
que itera pela matriz de itens específicos que estão sendo solicitados. O auxiliar each é nativo do Handlebars.js e você pode ler mais sobre ele na documentação aqui. Na última imagem acima, você pode ver o {{#each section.articles}}
no código que renderiza os artigos da seção atual, mas quando o artigo é encontrado com a ID 219527708
, esse código será ignorado e a renderização será movida para o próximo artigo.
Pode haver outras maneiras de obter um comportamento semelhante, portanto, sinta-se à vontade para experimentar outros auxiliares condicionais, mas isso deve ser um bom começo.