Abstract Archives

Hugo の注釈デザインを変更する

1. はじめに

 Hugo は,Ver.0.60 から Go 言語で実装された Goldmark という Markdown パーサを採用しています。そのため,注釈も問題なく変換され出力されます。しかし,注釈のデザインを変更する設定項目が存在しません。そこで,本記事では Hugo に標準実装されている関数を用いて注釈デザインを変更する方法について記述します。

2. 環境構築

 Hugo Theme Basic を用いて動作確認するためのデモサイトを構築します。まず初めに,Hugo コマンドを用いて新規サイトを生成し,Git コマンドを用いて最新の Hugo Theme Basic をダウンロードします。

$ pwd
~
$ hugo new site demo
$ cd ./demo/themes/
$ git clone https://github.com/siegerts/hugo-theme-basic.git

 次に,./hugo-theme-basic/exampleSite/content/post/ に移動し,注釈を含んだMarkdown ファイルを生成します。ファイル名は任意ですが index.md にすると表示されないので避けます。

$ pwd
~/demo/themes
$ cd ./hugo-theme-basic/exampleSite/content/post/
$ cat <<EOF > annotation.md
> +++
> title = "Annotation"
> date = 2020-01-25
> +++
> テキスト[^1]
> [^1]: 注釈内容
> EOF

 最後に,./hugo-theme-basic/exampleSite に移動し,Hugo コマンドを用いて仮想サーバーを起動します。起動後,ブラウザで http://localhost:1313/post/annotation/ にアクセスし,以下のような画面が表示されればデモサイトの構築は完了です。

$ pwd
~/demo/themes/hugo-theme-basic/exampleSite/content/post
$ cd ../..
$ pwd
~/demo/themes/hugo-theme-basic/exampleSite
$ hugo server --themesDir ../..

3. 実装

 ~/demo/themes/hugo-theme-basic/layouts/post 直下に存在する single.html の 19 行目に replaceRE 関数と safeHTML 関数を追記します。replaceRE 関数の第 2 引数を変更することで任意の文字を設定できます。

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<section id="main" class="mt5">
<h1 itemprop="name" id="title">{{ .Title }}</h1>
<span class="f6 gray">{{ .Date.Format "January 2, 2006" }}</span>

<article itemprop="articleBody" id="content" class="w-90 lh-copy">
    {{ .Content | replaceRE "&#x21a9;" "変更箇所" | safeHTML }}
</article>

<!-- last modified note -->
<span class="f6 gray mv3"
    title="Lastmod: {{ .Lastmod.Format "January 2, 2006" }}. Published at: {{ .PublishDate.Format "2006-01-02" }}.">
    {{ if ne .Lastmod .PublishDate }}
    <span class="i">last modified</span> {{ dateFormat "January 2, 2006" .Lastmod }}
    {{ end }}
</span>

4. 実行結果

 replaceRE 関数の第 2 引数に設定した文字列が表示されていることが確認できます。文字列の他に HTML タグや絵文字なども設定することが可能です。

5. おわりに

 ここまで,Hugo に標準実装されている関数を用いて注釈デザインを変更する方法について記述してきました。細かい部分ですが,工夫すればユーザービリティの向上や他サイトとの差別化などに活用できると思います。

環境情報

  • Hugo Ver.0.62.2
  • Google Chrome Ver.79.0.3945.130
  • Zorin OS 15 Core (Ubuntu 18.04 LTS)

Admin

Dutch

コンピュータサイエンスを専攻している大学院生です。研究の合間に,アニメを観たりブログサイトを運営しながら生きています。

TOC

Pick Up