[Hugo] Markdownでfootnote(脚注)を使ってみる



Nプログラマ(@Nprog128)です。

出典や引用を示す際に使っている脚注(きゃくちゅう)ですが、みなさんは使っていますか?

自分は文章中に直接引用を書くことが多く、あまり使っていません。。。

脚注をよく見かけるのは、Wikipedia1ですかね。

なプ

ああ、そうそう!こんな感じ!

Wikipediaでは文章中にやや小さな字で[数字]が書いてあり、それをクリックするとページ下に書いてある引用情報の方に移動できるページ内リンクですね。

移動先にある^をクリックすると、また文章の方にページ内リンクで戻れたりします。

このようなfootnote(脚注)をHugoで使ってみた、という内容になります。

環境

アプリ名 バージョン
Mac OSX 10.13.6
High Sierra
Hugo v0.62.0

書き方

HugoのMarkdownでは以下のように記述します。

脚注のサンプル コードを開く
脚注のサンプル
1# 脚注 
2サンプル文章[^footnote_sample]
3
4# 脚注の内容
5[^footnote_sample]: 脚注の内容

このように記述することで、脚注を使うことができます。

結果はこんな風になります。

サンプル文章2

2という数字が小さいフォントで表示されているはずです。

脚注と脚注の内容の両方を記述しないと、うまく表示されないので注意です。

なプ

数字が2と表示されているのは、上の方でWikipediaの例で脚注を使っているからです。

この2をクリックすると記事の末尾までジャンプすることができ、脚注の内容という表示がされていると思います。

/img/article/2020/01/02/01.png
ページ下の脚注

この矢印をクリックすると、先程したジャンプ元の文章2に戻ってくることができます。

footnoteのドキュメントについて

Hugoのバージョンが0.60.0になってからMarkdownのデフォルトパーサがblackfridayからgoldmarkに変更になりました。

Release v0.60.0 · gohugoio/hugo · GitHub

使っているパーサによりfootnoteの書き方のドキュメント先が異なります。

blackfridayはGithubリポジトリのREADME.md(Extensions > Footnotes)に、 goldmarkはGithubリポジトリのREADME.md(Built-in extensions > extension.Footnote)に記載されています。

どちらも同じ記法ですね。

脚注のデザインについて

CSSでデザインを変更することも可能です。

sectionタグに囲まれた構造になっているので、これをDeveloperToolなどで確認してCSSでクラスを書いてあげればオッケーです。

以下は今回の記事の下に表示されている脚注のhtmlです。

 1<section class="footnotes" role="doc-endnotes">
 2  <hr>
 3  <ol>
 4    <li id="fn:1" role="doc-endnote">
 5      <p><a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">Wikipedia</a> <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
 6    </li>
 7    <li id="fn:2" role="doc-endnote">
 8      <p>脚注の内容 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
 9    </li>
10  </ol>
11</section>

ただ、脚注は組み込まれた機能なので出力されたhtml構造をカスタマイズすることは難しいと思います。

なプ

おそらく、ソースコードを変更してビルドする必要があるかなと。。。

お手軽にどうしてもdom構造自体を変更したい時は、JavaScriptでゴリゴリすればなんとなると思います。

脚注のアイコンの変更

脚注にReturnキーのような曲がった矢印が表示されていますが、blackfridayをパーサに指定している場合は変更することができます。

/img/article/2020/01/02/01.png
ページ下の脚注 再掲

Hugoの Configure Markupページにあるblackfridayの項目 に、 footnoteReturnLinkContentsを使ったサンプルがあるので、こちらを参考にして自分の好きな文字に変更することが可能です。

goldmarkは今のところ設定項目がないので、設定から変更することはできないようです。

ここもどうしても変更したい場合は、こちらもJavaScriptで対応する必要がありそうですね。

おわりに

今回は、Hugoでfootnote(脚注)を使ってみた、という内容でした。

脚注を使うと、本のような文章の見た目になるのでちょうちょい使ってみようと思います。

それでは、このへんで。
バイナリー!


  1. Wikipedia ↩︎

  2. 脚注の内容 ↩︎

\ ちょっとお買い物 /


関連した記事