I wanted to sort the tags in the “Tags” page by the count of child pages. This can be achieved by creating a terms.html template page. From there the data can be fetched nicely:
{{ range .Data.Terms.ByCount }}
{{ partial "widgets/tag.html" (dict "tag" .Page.Title "count" .Count)}}
{{ end }}
When implementing the Hugo Zettel theme I wanted to extract the tag element as a reusable widget inside the theme. The input requirements are:
However, the Hugo partials only take one input parameter where we typically pass the context. However, this didn’t feel like the right approach because the partial would need to know do different things based on the context it is in.
The solution turned out to be quite simple as you can pass a dictionary as …
Continue readingDue to the nature of the Tailwind CSS library there is no pre-built support for handling Markdown. Luckily, there is this GitHub repository iandinwoodie/github-markdown-tailwindcss that has implemented support for it.
Add class markdown to the element that you want to style. With Hugo you can add this kind of snippet:
<div class="markdown">
{{ .Content }}
</div>
Hugo is a static site generator written in Go.
Continue readingTaxonomies are user defined groupings of content. 1
Taxonomies are configured in the config.toml file like this
[taxonomies]
category = "categories"
tag = "tags"
The first part defines the singular form and the scond part the plural form.
Taxonomies can be accessed on special taxonomy pages or sitewide with the .Site.Taxonomies variable. For example the .Site.Taxonomies.tags can be used to fetch a map of tags which will return a mapping of taxonomy keys with lists of pages …
Sections are defined by the content structure based on the first directory under the content directory, so called root sections. Nested sections require an _index.md file inside the directory. 1
Hugo theme for taking notes with the Zettelkasten method.
Zettelkasten can be considered as an extension to your brain where you process and store data and make connections between ideas.
Prerequisites for Hugo Pipe’s PostCSS 1
npm install -g postcss-cli
npm install -g autoprefixer
Add tags to the front matter of each note. This gives some categorization of topics for the note and makes it possible to find related items later if there are no direct links …
Continue readingHow to use NPM packages in Hugo?
Prerequisites for Hugo Pipe’s PostCSS 1
npm install -g postcss-cli
npm install -g autoprefixer
Tailwind is a low-level CSS framework for building web pages with building blocks.