Hugo で 関連記事 を表示する

Uncategorized
397 words

Go言語(Golang) 製の 静的サイトジェネレーター「Hugo」で 関連記事 を表示できるようにします。

レイアウトの修正をすると、記事の末尾に 関連記事が表示されるようになります。

はじめに

テーマ「Robust」のレイアウトを元に説明をしていきます。

使いやすくて、見た目も良いのでオススメです。

関連記事 のレイアウトを作成

まず初めに、関連記事 のレイアウトを作成します。

レイアウト名は「related.html」にします。

場所は「\themes\hugo_theme_robust\layouts\partials\related.html」に作ります。

内容は下記を貼り付けます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<div class="adj">
    <div class="row">
        <div class="col m12">
            <header>関連記事</header>
            <ul>
                {{ range . }}
                {{ .Render "li_sm" }}
                {{ end }}
            </ul>
        </div>
    </div>
</div>
{{ end }}

記事の末尾で 読み込むように修正

記事の末尾で 関連記事レイアウトを 読み込むように修正します。

修正するファイルは「\themes\hugo_theme_robust\layouts_default\single.html」です。

記事の末尾と コメントの間に {{ partial "related.html" . }} を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mrow">
  <div class="mcol c8">
    {{ .Render "summary" }}
    <div class="adj">
      <div class="mrow">
        <!-- 省略 -->
      </div>
    </div>

    {{ partial "related.html" . }}  ← 追加

    {{ template "_internal/disqus.html" . }}
  </div>
  <div class="mcol c4">
    {{ partial "sidebar.html" . }}
  </div>
</div>

おわりに

これだけで 関連記事 が表示されるようになります。

JavaScript 製の 静的サイトジェネレーター「Hexo」だと、関連記事を出すために、有志のプラグインが必要でしたが、Hugo は公式でサポートされていていい感じですね。

ジェネレートも早いし。

生成が早い Hugo を取るか、カスタマイズがしやすい Hexo を取るか、悩みどころです。