Estou montando um novo Blog, e com isso, decidi separar bem o conteúdo dele em mais de uma pasta. Mas eu tinha um problema: O link que exibe todos os posts, apenas exibe o que está na pasta /content/posts, e não nas outras e com isso, eu tive que fazer uma solução para poder fazer uma página de Arquivo mais competente.

Uma ideia inicial

Um dos recursos mais legais que o tema que estou usando tanto na Toca quanto no meu novo Blog tem, é a possibilidade de separar o conteúdo em pastas e exibir essas pastas adicionais como se fossem seções do site. Assim, separei o Blog em quatro áreas:

• Posts: Para os posts mais longos, como os Arquivos de Poses;
• Artes: Para os posts de Artes, que tem o Processo Criativo;
• Notas: Para posts de texto mais curtinhos;
• Doodles: Para posts de desenhos mais bobinhos e despretensiosos.

Mas tinha um problema nisso: Não teria um “arquivo” único para o Blog. Eu tinha que pensar numa solução, e com isso olhei para o PaperMod-X, que é um dos temas que testei, e vi que eu precisava de dois arquivos: Um arquivo para criar a página de Arquivo e um para fazer o Template.

Criando a Página de Arquivo

Essa foi a parte mais fácil. Apenas precisei criar o arquivo archive.md na pasta /content com esse conteúdo:

---
title: Arquivo
layout: archives
---

Sim, apenas isso. O parâmetro title serve para o título da página e o layout serve para definir qual template será usado para gerar essa página.

Criando o Template para a página

Inicialmente, eu precisava de duas coisas: Que a página de arquivos reunisse todas as postagens de todas as seções do Blog e que ele exibisse ícones de acordo com o tipo da postagem. O que cheguei nesse código:

{{- define "main" }}

	{{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
	{{ $type := .Params.type | default "art" }}

	<div class="content">
	  <h1>{{ .Title }}</h1>
	  	  
	<main class="content" role="main">
	    <div class="inner">
			<ul class="archive-list">
				{{ range (where site.RegularPages "Section" "in" $postsDir) }}
					<li>
						{{ .PublishDate.Format "02 Jan" }}
						- 
						{{ if eq .Params.type "art" }}
							🖼️
						{{ else if eq .Params.type "post" }}
							📰
						{{ else if eq .Params.type "note" }}
							📝
						{{ else if eq .Params.type "doodle" }}
							✏️
						{{ end }}
						<a href="{{ .RelPermalink }}">{{ .Title }}</a>
					</li>
				{{ end }}
			</ul>
	    </div>
	</main>
{{ end }}

No começo, esse template tem isso aqui:

{{ $postsDir := .Site.Params.Posts | default (slice "posts" "post") }}
{{ $type := .Params.type | default "art" }}

Somente a primeira linha foi usada, já que consegui extrair o tipo da postagem diretamente do arquivo .md da postagem. Sendo assim, o que a variávei $postsDir faz é pegar o array das pastas das seções que está no Arquivo de Configuração do Blog.

E outra parte importante é essa aqui:

{{ range (where site.RegularPages "Section" "in" $postsDir) }}
	<li>
		{{ .PublishDate.Format "02 Jan" }}
		- 
		{{ if eq .Params.type "art" }}
			🖼️
		{{ else if eq .Params.type "post" }}
			📰
		{{ else if eq .Params.type "note" }}
			📝
		{{ else if eq .Params.type "doodle" }}
			✏️
		{{ end }}
		<a href="{{ .RelPermalink }}">{{ .Title }}</a>
	</li>
{{ end }}

O que essa parte faz? Ela pega todas as postagens das seções e faz uma lista com as postagens, colocando a Data de Publicação, o Ícone e o Título da Postagem. Basicamente, é esse aqui o resultado:

Primeiro você cria, depois melhora

Mas eu estava insatisfeito. Eu queria realmente melhorar isso, fazendo uma separação por mês e ano, como seria essa área de arquivos. E assim eu fiz. Voltei ao PaperMod e vasculhei como eles fizeram a parte de Arquivos do Tema, e testando aos poucos, cheguei num código muito mais completo, e a parte mais importante desse código é essa aqui, a qual irei comentar:¹

<ul class="archive-list">
	{{ range (.Site.RegularPages.GroupByDate "2006") }}
		{{- if ne .Key "0001" }}
			{{- $year := replace .Key "0001" "" }}
			<h2 class="archive-year-header" id="{{ $year }}">
				{{- $year -}}	
			</h2>
			{{- range .Pages.GroupByDate "January" }}
				<h3 class="archive-month-header" id="{{ $year }}-{{ .Key }}">
					{{- .Key -}}
				</h3>
					
				{{- range .Pages }}
					{{- if eq .Kind "page" }}
							{{- partial "date.html" .Date -}}
							
							&nbsp;
							
							{{ if eq .Params.type "art" }}
								🖼️
							{{ else if eq .Params.type "post" }}
								📰
							{{ else if eq .Params.type "note" }}
								📝
							{{ else if eq .Params.type "doodle" }}
								✏️
							{{ end }}
							-
						<a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
					{{ end }}
				{{ end }}
			{{ end }}
		{{ end }}
	{{ end }}
</ul>

Começando pelo <ul class="archive-list">, isso está criando uma lista não ordenada para os anos. Isso vai dar um espaço a mais para deixar mais organizado. Mas como alimentar essa lista por ano?

Para isso vem o comando: {{ range (.Site.RegularPages.GroupByDate "2006") }}, o que ele faz é basicamente separar as páginas por ano. Isso é importante em Blogs que tem vários e vários anos.

E logo em seguida, esse comando é filtrado pelo {{- if ne .Key "0001" }}, que basicamente faz com que os posts e páginas sem data não sejam exibidos. Com isso, vem a listagem dos anos.

{{- $year := replace .Key "0001" "" }}
<h2 class="archive-year-header" id="{{ $year }}">
	{{- $year -}}	
</h2>

Mas separar apenas por ano, não é o suficiente. Eu quero separar por mês também. Com isso, vem outro loop, com o {{- range .Pages.GroupByDate "January" }}. O que ele faz, é separar os posts por mês. Com isso, é criado os títulos para separar os meses.

  <h3 class="archive-month-header" id="{{ $year }}-{{ .Key }}">
    {{- .Key -}}
  </h3>

E por fim, vem o loop final, que é o das páginas.

{{- range .Pages }}
  {{- if eq .Kind "page" }}
    <span class="date">
      {{- partial "date.html" .Date -}}
      
      &nbsp;

      {{ if eq .Params.type "art" }}
        🖼️
      {{ else if eq .Params.type "post" }}
        📰
      {{ else if eq .Params.type "note" }}
        📝
      {{ else if eq .Params.type "doodle" }}
        ✏️
      {{ end }}
      -
    </span>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
  {{ end }}
{{ end }}

Ele começa listando cada uma das páginas que foram feitas naquele mês e verificando se ela é uma página válida, e depois começa a montar a lista das páginas, com a data, ícone e o título da postagem.

Melhorando aos poucos:

E inicialmente, esse foi o resultado:

Porém, eu estava incomodado com o espaço entre as postagens. Não estava bom, realmente. Depois, adicionei a formatação nas datas, e pra mim ficou bem melhor.

Para mim, isso ficou ainda melhor. Mas como foi visto antes, tinha classes CSS no código HTML. Com isso, porque não aplicar essas classes? E foi o que fiz. Formatei as cores e a margem inferior…

.archive-year-header {
	color: var(--default_accent);
	margin-bottom: 0;
	padding: 0;
}

.archive-month-header {
	color: var(--default_dim_fg);
	margin-bottom: 0;
	padding: 0;
}

… e o resultado foi esse:

Já estava muito melhor. Mas faltava uma coisa, eu sentia isso. Com isso, eu coloquei os meses e os posts em cascata e isso melhorou muito mais.

Palavras Finais

Posso dizer que estou adorando fazer esse novo Blog. Eu estou buscando inovar mais do que eu fiz no Cantinho do Romeo e adaptar o tema que estou usando para esse novo Blog, e acho que o que estou fazendo nesse novo Blog daria uma boa série de postagens por aqui. Eu gosto muito dessa ideia.

Dito isso, estou adorando como modificar as coisas no Hugo parece ser muito mais fácil do que no Wordpress. Os Templates não são tão intimidadores quanto pareciam, eles são bem agradáveis de se lidar e são muito mais flexíveis. Isso tudo está me dando uma vontade de realmente fazer um tema para o Hugo, ou no mínimo pegar o tema que estou usando e limpar tudo o que eu não estou usando. Essa é outra ideia que gosto muito.