This guide assumes prior knowledge of hugo. You may want to check first the hugo documentation.
The hugo-theme-primer is not quite a full fledge theme. This is on purpose:
although it comes with some sort of default layouts,
the intention is to leave it to you to design the layouts that best match your needs.
Instead, the theme provides utilities and components that you can mix and match to build your site according to your needs.
The theme provides helpers in the form of:
This is work in progress, and you mind find a primer item that is not available yet in the theme. Good news: you can still use it! Here is how, depending on your need.
🚀 Of course, you can contribute to implement the missing feature. That would be terrific!
Templates can take any html; so you can directly include primer classes in your code, as needed.
The default markdown processor for hugo is Goldmark. It allows including (primer) classes in two ways.
In some cases, you can include classes directly inside markdown, as follows:
# My title { .Box }<h1 class="Box" id="my-title">My title</h1>
At the time of writing, this is possible for headings only. You can check the Goldmark documentation.
Also, Goldmark lets you inline html directly in your markdown content files. You need to set the unsafe option in the hugo configuration, though. With this, you can do the following:
<h1 class="Box">My Title</h1>
And by the way, yes, source is a markdown file, even though it includes html tags!<h1 class="Box">My Title</h1>
<p>And by the way, yes, source is a markdown file, even though it includes html tags!The theme ships with version 21.0.7 by default. Should you wish to use another version, create a file layouts/partials/primer/version.html with the desired version, e.g.
20.0.1
This will override the default.