Hugo - Criando um Shortcode

Durante a elaboração de um post para este blog, me deparei com a necessidade de inserir uma tabela que não seria viável usando Markdown. Então encontrei uma forma de fazer o que precisava criando um shortcode.

Shortcodes são fragmentos de código dentro de arquivos de conteúdo chamando um componente ou template customizado.

Neste artigo apresento um exemplo de tabela gerada dinamicamente a partir de um arquivo de dados referenciado.

Abaixo o código do shortcode propriamente dito:

{{ $arg := .Get 0 }}
{{ $dataFile := index .Site.Data $arg }}
{{ $.Scratch.Set "count" 0 }}

<table>
{{ range $table := $dataFile }}  
  {{ range $row := $table }}
    <tr>
    {{ range $datas := $row }}
      {{ range $data := $datas }}
        {{ if eq 0 ($.Scratch.Get "count") }}
        <th> 
          {{ . }}
        </th>
        {{ else }}
        <td> 
          {{ . }}
        </td>
        {{ end }}
      {{ end }}
    {{ end }}
    </tr>
    {{ $.Scratch.Add "count" 1 }}
  {{ end }}
{{ end }}
</table>

Como arquivo de dados usaremos o arquivo exemplo.toml (data/exemplo.toml):

[table]
  [[row]]
  data = ["Animal", "Som"]
  [[row]]
  data = ["Gato", "Miau"]
  [[row]]
  data = ["Vaca", "Muuuu"]

Para usar o shortcode, no arquivo do post basta inserir:

{{< table "exemplo" >}}

O Resultado será uma tabela como esta:

Você pode usar CSS para estilizar o shortcode de acordo com seu gosto e necessidades.

Deixe seu comentário se tiver alguma contribuição. Até a próxima!