Hacking hugo mainroad template

How to hack the hugo mainroad

研究

Since many visiter outside Japan come Japanese counterpart of this hugo mainroad page (hugo mainroadを改造する), I (crudely) translated it into English here. I’m happy if this article will help you.

This blog is generated via hugo, which is one of the Static Site Generator (SSG). In particular, I exploited the Mainroad template of hugo.

However, it seems that the structure of Mainroad is a little bit different from the other hugo’s template. Here, I would like to summarize how it differs from the others.

Google analytics

In this blog, we analyze the accesses to this blog through Google analysis. In the standard template of hugo, all we have to do is modifying config.toml as

googleAnalytics = "UA-XXXXXXXXX-X"

However, the Mainroad does not work even in this modification.

Alternatively, I copied the embedded tag of the Google analysis, and paste it to the following html file:

Mainroad/layouts/_default/baseof.html

between <head> ~ </head>.

Th html file, baseof.html, would be the basis of all relevant pages, and therefore, when we want to adopt the modification to all pages, we need to modify this html file.

Making archive sidebar

We do not have an archive sidebar. This is the week point of not Mainroad but the hugo itself. Therefore, we need to make the sidebar ourselves.

The explicit changes are as follows.

Modifications in config.toml

[Params.sidebar]
  home = "right"
  list = "right"
  single = "right"
  widgets = ["taglist", "archive", "recent"]

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

Making Mainroad/layouts/partials/widgets/archive.html (this original is taken from categories.html)

{{- $archives := .Site.Taxonomies.archives }}
{{- if gt (len $archives) 0 }}
<div class="widget-archives widget">
	<h4 class="widget__title">{{ T "archives_title" }}</h4>
	<div class="widget__content">
    <ul>
      {{ range $items := .Site.Taxonomies.archives.Alphabetical.Reverse }}
        <li><a href="{{ $.Site.BaseURL }}archives/{{ .Name | urlize | lower }}">{{ .Name }} ({{ .Count }})</a></li>
      {{ end }}
    </ul>
	</div>
</div>
{{- end }}

Adding archives in the front matter:

archives: "2021/02"

The shell script to generate a new article with the date

Before using hugo, I used hexo. In the default setting, the hexo can generate the new article with the date by

hexo new XXX

and then we have the new article named YYYY-MM-DD-XXX.md. However, we have no corresponding command in hugo, and I made the shell script.

Many people are bothered by this problem, and at the same time, we have many proposed shell scripts. Finally, I decided to use this shell.

html tags do not work in markdown file

In the markdown files of articles, we can use the html codes. However, it does not work in the default setting, and we will find the following errors in generated html files:

<!-- raw HTML omitted -->

This problem can be resolved by adding the following settings in config.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Hierarchical categories

Following のい太ろぐ, we can straightforwardly make the categories hierarchical form.

However, according to the code in this webpage, we will observe a large number of new lines in the generated html files. To avoid this problem, we have to modify the original code in のい太ろぐ, so as to suppress the generation of new lines, by adding the hyphen that is a part of GO language.

For example, let us consider this original code (which generates many new lines in the html sources):

{{ $archives := .Site.Taxonomies.archives }}
{{ if gt (len $archives) 0 }}
{{ range $items := .Site.Taxonomies.archives.Alphabetical.Reverse }}

When we add the hyphen which suppresses generating new lines in GO language:

{{- $archives := .Site.Taxonomies.archives }}
{{- if gt (len $archives) 0 }}
{{-  range $items := .Site.Taxonomies.archives.Alphabetical.Reverse }}

then we will observe polished html sources!

関連記事