Hugoに関するメモ

HugoやMarkdownの書き方などをメモしていく。随時更新。

Gist用のshortcode

Shortcodes | Hugo

{{< gist zono-dev 377e5d76d335f73eb662ffc6dc02a09e >}}

こんな感じでアカウント名とgistのIDを書けば良いらしい。

HugoのTOC設定

HugoのTOC設定はテンプレートで

{{ .TableOfContents}}

で表示できるようだ。

Table of Contents | Hugo

ただ特定のページにだけ目次を表示したいといった場合には標準では切り替えができなさそう。 (個人的には大して分量のないページは目次が要らないと思っている)

やるとすればそれぞれのページの変数(?)で制御する形がいいかな?

Shortcode自体をエスケープする

ショートコードをエスケープするには、コメント化してしまうことが最も手っ取り早い。 つまり、以下のようにする。

{{</* example-shortcode */>}}

同サイト内リンクの書き方

[リンクテキスト]({{< relref "path_to_file.md" >}}) 

現在のページからの相対パスっぽい。

テーマを自分なりに改造する

どのファイルに手をつければいいのか

layouts/partialslayouts/_default に自分なりのテンプレートを配置することで変更することで対応できる。

利用するテーマによって使い方が変わるが、ベースとなるのは以下の3つのファイルのようだ。

layouts/_default/baseof.html
layouts/_default/list.html
layouts/_default/single.html

baseof.html は すべてのベースとなるHTMLファイル。 single.html は ブログの1ページのベースとなるファイル。 list.html は 記事の一覧などを表示するページのベースとなるファイル。

その他、タグやカテゴリを表示するページのベースとなるファイルとして taxonomy.html も定義できる(他にも複数設定できるようだ)

footerやheader, menuに対応するパーツは layouts/partials に設定するテーマが多い。別になくてもbaseof.htmlやsingle.html等で定義しても問題なさそうではある。

layouts/footer.html
layouts/header.html
などなど...

faviconの設定

static/favicon.ico

にfaviconを配置すればページのルートに直接配置してくれるので、あとはブラウザが勝手に読み込んでくれるっぽい。 static配下においたファイルはWEBサイトのルートにおいてくれるので、うまいこと利用すべし。