[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をクリックすると記事の末尾までジャンプすることができ、脚注の内容という表示がされていると思います。
この矢印をクリックすると、先程したジャンプ元の文章2に戻ってくることができます。
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をパーサに指定している場合は変更することができます。
Hugoの Configure Markupページにあるblackfridayの項目 に、 footnoteReturnLinkContentsを使ったサンプルがあるので、こちらを参考にして自分の好きな文字に変更することが可能です。
goldmarkは今のところ設定項目がないので、設定から変更することはできないようです。
ここもどうしても変更したい場合は、こちらもJavaScriptで対応する必要がありそうですね。
おわりに
今回は、Hugoでfootnote（脚注）を使ってみた、という内容でした。
脚注を使うと、本のような文章の見た目になるのでちょうちょい使ってみようと思います。
それでは、このへんで。
バイナリー！
