hugo mainroadを改造する

このサイトはhugoを利用して作成しています

研究

このサイトは静的サイトジェネレータhugoを利用して作成しました。 特にテンプレートはMainroadを利用させてもらっています。

ところが、Mainroadは少し他のテンプレートの形式と異なる部分があったように思うのでここに(マニアックですが)まとめていきたいと思います。

Googleアナリティクス

このサイトはGoogleアナリティクスを利用してアクセスを解析しています。 通常であればconfig.tomlの

googleAnalytics = "UA-XXXXXXXXX-X"

として書けばいいのですがMainroadはうまくいきませんでした。

その代わり、直接Googleアナリティクスの埋め込みタグをコピーして、

Mainroad/layouts/_default/baseof.html

の<head> ~ </head>に直接埋め込みました。 baseof.htmlはおそらく全てのページに埋め込む基礎となるので、ページ全てに影響を与えたい時はここをいじります。

月別記事(アーカイブ)の表示

これはMainroadというより、hugo自体の欠点ですがアーカイブ機能がありません。 そのため自分で作る必要があります。

具体的な変更は以下の通りです(私はcategoriesは利用せずタグだけで完結させています)。

config.tomlに以下を加える。

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

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

Mainroad/layouts/partials/widgets/archive.htmlを作成(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 }}

記事作成時のFront matterにarchivesを加える。

archives: "2021/02"

基本的には以上でできました。

hugo new XXX で日付入りファイルを作成

実はhugoを利用する前は、hexoを利用していました。 hexoは

hexo new XXX

でYYYY-MM-DD-XXX.mdのようなファイルを作ってくれましたが、hugoには見つからずシェルスクリプトを書きました。

多くの人が同じ悩みを持っているようで、たくさんの財産があります。結局私はこちらのサイトのシェルスクリプトをもらいました。

記事作成時にhtmlタグが機能しない

基本Markdown形式で書いて、たまにhtmlも使う感じで書いています。

最初htmlタグが効かず

<!-- raw HTML omitted -->

と書き換えられて出力されていました。

これは、config.tomlに

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

を書き足すことで解決しました。

カテゴリーを階層化したい

タグが増えてきたのでカテゴリーを階層化することで整頓しようと思いました。 こちらののい太ろぐを読めばすぐ実装できました。

ただし、上記サイトのコードをそのまま利用したらhtmlのソースコードに不要な改行が挿入されてしまいます。 これを回避するには、単純にGo言語の改行制御を行うためのハイフン-を加えます。

例えば以下のようなコードに対して、

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

にハイフンを加える

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

関連記事