In a recent episode of my podcast, I told Manton, the creator of Micro.blog, that I would prefer if the blog categories on the Archive page were horizontally displayed, instead of the current list. To my surprise, the solution arrived a day after I published the video.

When Otávio finished listening to the episode, he wrote a code (below) to do just the task. Now it’s my turn to give back to the community. The video below shows how you can use Otavio’s code to customize your own Archive page.


Otávio’s code:

{{ define "main" }}
<div class="archive">
	<h2 class="p-name">Archive</h2>
	{{ if templates.Exists "partials/microhook-archive-lead.html" }}
	{{ partial "microhook-archive-lead.html" . }}
	{{ end }}
	{{ $list := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
	{{ if gt (len $list) 0 }}
	<div class="archive-categories">
		<h3>Categories</h3>
        <span>
	        {{ $sortedList := sort $list "Title" }}
	        {{ $length := len $sortedList }}
    	    {{ range $index, $element := $sortedList }}
        	    <a href="{{ $element.Permalink }}">{{ $element.Title }}</a>{{ if lt $index (sub $length 1) }}, {{ end }}
	        {{ end }}
        </span>
	</div>
	{{ end }}
	<div class="full-archives h-feed">
		<h3>Full Post List</h3>
		{{ $list := (where .Site.Pages "Type" "post") }}
		{{ range $list }}

		<p class="h-entry">
			<a href="{{ .Permalink }}" class="u-url"><span class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05-0700" }}">{{ .Date.Format "Jan 2, 2006" }}</span></a>:
			{{ if .Title }}
			<span class="p-name"><b>{{ .Title }}</b></span>
			{{ end }}
			<span class="p-summary">{{ .Summary | truncate 150 }}</span>
		</p>

		{{ end }}
	</div>

</div>
{{ end }}