Ein bisschen Hands-On an meine neue Blogging Engine. Bevor ich den Blog migrieren konnte fehlten noch einige Anpassungen am Theme.
Da keines der Themes mir Out-of-the-Box gefallen hat, musste ich das Hyde Theme ziemlich aufbohren.
Pagination
Pages. Alle Blogposts auf der Startseite laden ist echt ungünstig. Pagination ist allerdings ziemlich gut dokumentiert.
<div class="posts">
{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
{{ range $paginator.Pages }}
<div class="post">
<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
<span class="post-date">{{ .Date.Format "2006-01-02" }}</span>
{{ .Content }}
</div>
{{ end }}
</div>
{{ partial "pagination.html" $paginator }}
Kurz gesagt, Variable $paginator mit Content befüllen und mit range
drüber integrieren. Paginate greift dabei auf die Variablen aus der Config
zurück.
$ cat config.yaml
paginate: 10
paginatePath: "page"
Danach kann man durch die Seiten pagen.
Das komplette Fils gibts auf github
Archive Page
Damit man aber trotzdem nicht alle Seiten einzeln durchkramen muss, fand ich ’ne Archivseite auf Blogs schon immer sinnvoll. Gerade wenn die Site an sich statisch ist und es somit keine Suche gibt.
Was man im Endeffekt erreichen möchte ist also eine statische Seite erzeugen, die kein Blogpost und aber zur Build-Zeit dynamischen Content hat.
Pages können dazu konfiguriert werden einem bestimmten Typ zu entsprechen.
$ hugo new archives.md
$ vim content/archives.md
---
date: "2012-03-31T21:38:03+02:00"
draft: false
title: "Archives"
type: archives
url: "/archives/"
---
Für den type muss ein Layout gleichen Namens im Theme enthalten sein:
$ tree themes/noqqe/layouts/
themes/noqqe/layouts/
├── 404.html
├── _default
│ ├── list.html
│ └── single.html
├── archives
│ └── single.html
├── index.html
├── page
│ ├── list.html
│ └── single.html
├── partials
│ ├── head.html
│ ├── isso.html
│ ├── pagination.html
│ └── sidebar.html
└── post
├── list.html
└── single.html
Hier erkennt man auch, dass ich neben archives auch noch post und
page als Types definiert habe.
Der Single View für das Archiv ist das einzige was benötigt wird.
{{ partial "head.html" . }}
<body class="theme-base-0b">
{{ partial "sidebar.html" . }}
<div class="content container">
<div class="post">
<h1>{{ .Title }}</h1>
{{ range (where .Site.Pages "Type" "post").GroupByDate "2006" }}
<h2>{{ .Key }}</h2>
<ul>
{{ range .Pages }}
<li>
<span>{{ .Date.Format "02.01" }}</span>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>
{{ end }}
</div>
</div>
</body>
</html>
Im Endeffekt ist die Syntax ziemlich ähnlich wie bei der Pagination. Nur
der range-Query ist etwas mehr advanced. Im Endeffekt for-Loop über
allen Content mit WHERE und GROUP BY Command.
An dem “2006” nicht stören. Die Templating Engine funktioniert nicht mit
wilden %Y-%m-%d Commands, sondern einem Referenz-Datum. Schön sehen kann
man das auch
hier
Tags und Categories
Was auch gefehlt hat war, dass Tags und Kategorien im Single-View der
einzelnen Posts angezeigt werden. In themes/noqqe/layouts/post/single.html:
<div class="post">
<h1>{{ .Title }}</h1>
<span class="post-date">{{ .Date.Format "2006-01-02" }}</span>
{{ .Content }}
<span class="meta">Categories:
{{ range .Params.categories}}
<a href="/categories/{{ . | urlize }}">{{ . }}</a>
{{ end }}
</span>
<br/>
<span class="meta">Tags:
{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}">{{ . }}</a>
{{ end }}
</span>
</div>
Genau die Funktion urlize macht dann noch Links aus den Tagnamen.
So schön <3 Macht Spaß
Comments (2)