Ghost CMS

Trabalhando com Etiquetas do Ghost

Exemplos práticos para usar em seu tema Ghost

Nesta edição prática, mostrarei como trabalhar com as Etiquetas do Ghost para exibir todas as etiquetas do site, mostrar etiquetas específicas ou excluí-las em um tema do Ghost.

Usarei o auxiliar de bloco #get do Ghost para fazer consultas personalizadas à API do Ghost e obter os dados das etiquetas.

Mostrar todas as etiquetas

Vamos começar com um exemplo básico para mostrar todas as etiquetas do site.

{{#get 'tags' limit='all'}}
  {{ tags }}
{{/get}}

Nós usamos o atributo limit com o valor all para especificar quantas etiquetas queremos receber como retorno. Neste caso, passamos o valor all para obter todas as etiquetas.

O valor padrão do atributo limit é 15. Além do valor all, também podemos passar um número; por exemplo, se quisermos obter cinco etiquetas, podemos usar limit='5'.

{{#get 'tags' limit='5'}}
  {{ tags }}
{{/get}}

O auxiliar {{tags}} irá automaticamente exibir as etiquetas como itens de link. Se olharmos a saída HTML, o resultado será o seguinte:

<a href="/tag/inspiration/">Inspiration</a>, 
<a href="/tag/lifestyle/">Lifestyle</a>, 
<a href="/tag/money-managers/">Money Managers</a>, 
<a href="/tag/nature/">Nature</a>, 
<a href="/tag/retirement/">retirement</a>

Observe que os links são retornados com uma vírgula (,) como separador. Podemos controlar isso usando o auxiliar {{tags}}.

Portanto, se precisarmos adicionar uma barra (/) em vez da vírgula, o auxiliar {{tags}} será {{tags separator='/'}}.

{{#get 'tags' limit='5'}}
  {{ tags separator=' / ' }}
{{/get}}

O resultado final será o seguinte:

<a href="/tag/inspiration/">Inspiration</a> /
<a href="/tag/lifestyle/">Lifestyle</a> /
<a href="/tag/money/">Money</a> /
<a href="/tag/nature/">Nature</a> /
<a href="/tag/retirement/">Retirement</a>

Mostrar Etiquetas Específicas

Para mostrar apenas etiquetas específicas, use o atributo filter e passe o Slug de cada etiqueta que deseja obter.

Você pode encontrar o Slug da etiqueta na página de configuração da etiqueta.

Nesse caso, a sintaxe básica para o auxiliar de bloco #get é a seguinte.

{{#get 'tags' filter='slug:[SLUG,SLUG,SLUG]'}}

Observe a vírgula (,) separando cada slug.

Se quisermos obter as etiquetas com os slugs "inspiration", "lifestyle" e "money", o exemplo anterior será assim.

{{#get 'tags' filter='slug:[inspiration,lifestyle,money]'}}
  {{ tags separator=' / ' }}
{{/get}}

💡

Se a etiqueta estiver vazia, sem postagens, ela não será visível. Adicione a etiqueta a qualquer postagem e ela aparecerá. Este método não garante que as etiquetas sejam obtidas na mesma ordem em que você adicionou os slugs. Provavelmente é uma questão do Ghost. Em vez disso, use o seguinte método.

Nesse método, obtemos cada etiqueta separadamente. Por exemplo, para obter as etiquetas com os slugs "inspiration" e "lifestyle".

{{#get 'tags' filter='slug:inspiration'}}
  {{ tags }}
{{/get}}

{{#get 'tags' filter='slug:lifestyle'}}
  {{ tags }}
{{/get}}

Observe que removi o atributo separator porque estamos obtendo apenas uma etiqueta. Além disso, removi os colchetes [] em torno do slug, pois estamos filtrando apenas por um slug.

Excluir Etiquetas

Suponha que você queira mostrar todas as etiquetas, exceto algumas. Por exemplo, você quer mostrar todas as etiquetas do site, exceto as etiquetas "Inspiration" e "Lifestyle".

Nesse caso, a sintaxe básica para o auxiliar #get é a seguinte:

{{#get 'tags' filter='slug:-[SLUG, SLUG, SLUG]'}}

A diferença em relação ao exemplo anterior é o sinal de menos (-) no atributo filter antes dos slugs. Observe o exemplo a seguir:

{{#get 'tags' filter='slug:-[inspiration, lifestyle]'}}
  {{ tags }}
{{/get}}

Personalize a Marcação de Saída

Como vimos, o auxiliar {{tags}} exibe automaticamente as etiquetas como links. Que tal adicionar uma classe CSS ao link ou como exibir uma marcação HTML personalizada?

Em vez de usar o auxiliar {{tags}}, podemos usar o auxiliar de loop #foreach. Esse auxiliar itera sobre os dados das etiquetas e exibe o conteúdo colocado entre suas tags de abertura e fechamento {{#foreach}}{{/foreach}}.

O exemplo a seguir exibirá todas as etiquetas como uma lista HTML não ordenada.

<ul>
  {{#get 'tags' limit='all'}}
    {{#foreach tags}}
      <li>
        <a href='{{ url }}'>{{ name }}</a>
      </li>
    {{/foreach}}
  {{/get}}
</ul>

Observe os novos atributos {{url}} e {{name}}. O atributo {{url}} irá mostrar a URL da etiqueta, enquanto o atributo {{name}} irá exibir o nome da etiqueta. Para ver a lista de atributos disponíveis, verifique os Atributos da Etiqueta.

O resultado final será o seguinte:

<ul>
  <li>
    <a href="/tag/inspiration/">Inspiration</a>
  </li>
  <li>
    <a href="/tag/lifestyle/">Lifestyle</a>
  </li>
  <li>
    <a href="/tag/money/">Money</a>
  </li>
  <li>
    <a href="/tag/nature/">Nature</a>
  </li>
</ul>

Exibir Contagem de Postagens

Outro exemplo prático é como mostrar a contagem de postagens para cada etiqueta. Use o atributo include e passe count.posts como valor.

<ul>
  {{#get 'tags' limit='all' include='count.posts'}}
    {{#foreach tags}}
      <li>
        <a href='{{ url }}'>{{ name }} ({{ count.posts }})</a>
      </li>
    {{/foreach}}
  {{/get}}
</ul>

O resultado final será:

<ul>
  <li>
    <a href="/tag/inspiration/">Inspiration (4)</a>
  </li>
  <li>
    <a href="/tag/lifestyle/">Lifestyle (8)</a>
  </li>
  <li>
    <a href="/tag/money/">Money (1)</a>
  </li>
  <li>
    <a href="/tag/nature/">Nature (3)</a>
  </li>
</ul>

Isso é tudo que eu queria compartilhar hoje, e espero que você ache este post útil.

Para mais informações sobre Etiquetas do Ghost CMS, acesse o link da documentação oficial a seguir: