Hugoで著者ページを作りプロフィールとユーザ執筆記事一覧を表示させる【Authorページ】

概要

Hugoで著者ページを作成する方法を解説します。

著者プロフィール、SNS一覧、著者記事などを掲載します。
著者が複数いる場合に対応しています。

当サイトで作成したものと同じ仕上がりになりますので、出来上がりが気になる方は以下を確認していただければと思います。

タクソノミーの変更

まずはconfigファイルを変更します。

config.toml またはconfig.yaml において、authorというタクソノミーを追加します。

1
2


[taxonomies]
  author = "authors"

1
2


taxonomies:
  author: authors

注意点

disableKindsにauthorが存在しないようにします

プロフィールデータの作成

content/ 以下にユーザのプロフィール情報を追加します。

まず直下にauthors/ というフォルダを作り、以下にユーザごとにフォルダを作成します。
ユーザのフォルダごとに_index.md というファイルを作成します。ここにプロフィールをマークダウン形式で記載します。

authors直下のフォルダ名は任意のものに変更可能ですが、_index.mdはファイル名固定なので変更しないようにしてください。

1
2
3
4
5
6


└── content/
    └── authors/
        ├── taro-tanaka/
        │   └── _index.md
        └── hanako-yamada/
            └── _index.md

以下は_index.mdの書き方の例です。

1
2
3
4
5


title: 田中太郎
bio: こんにちは！！
social:
  - link: https://x.com
  - link: https://github.com

注意点

例示のようにsocialをリスト形式で扱う場合は、social以下の要素が1つだったとしても必ずリスト形式にしてください（のちにエラーの原因になります）

著者ページの作成

layouts/ 以下にauthors というフォルダを作成して、list.html を作成します。

1
2
3


└── layouts/
    └── authors/
        └── list.html

list.htmlは以下のように記入します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


{{ range .Site.Pages }}
  {{ if and (eq .Section "authors") (ne .Title "Authors") }}
    <div class="author-profile">
      <!-- 著者プロフィール -->
      <h2>{{ .Title }}</h2>
      <p>{{ .Params.bio }}</p>
      <!-- SNSアイコン -->
      <p>
        <ul>
          {{ range .Params.social }}
            <li><a href="{{ .link }}"></a></li>
          {{ end }}
        </ul>
      </p>

      <!-- 著者が書いた直近の5記事を表示する -->
      <ul>
        {{ range first 5 (sort (where .Site.RegularPages "Params.author" .Title) "Date" "desc") }}
          <li>
            <a href="{{ .RelPermalink }}">{{ .Title | truncate 50 }}</a> - {{ .Date.Format "2006年01月02日" }}
          </li>
        {{ else }}
          <li>記事はありません。</li>
        {{ end }}
      </ul>
    </div>
  {{ end }}
{{ end }}

その他カスタマイズ

アイコンを使用している場合

アイコンツールキットを使ってSNSのアイコンを表示させる場合は、各ファイルを以下のように書き換えます。

_index.md :

1
2
3
4
5
6
7
8
9


title: 田中太郎
bio: こんにちは！！
social:
  - title: X
    icon: "fa-brands fa-x-twitter"
    link: https://x.com
  - title: GitHub
	  icon: "fa-brands fa-github"
	  link: https://github.com

list.html のSNSアイコン部分:

1
2
3
4
5
6
7
8


      <!-- SNSアイコン -->
      <p>
        <ul class="author-social">
          {{ range .Params.social }}
            <li><a href="{{ .link }}"><i class="{{ .icon }}"></i></a></li>
          {{ end }}
        </ul>
      </p>