要約

　seriesタグの記事でたびたび書いていたようにこのサイトについていろいろ変えたいと思っていたことがあった¹。 このテーマ(PaperMod)のアップデートがあってたことに気づき、そこでいろいろ機能が追加されていたので俄然やる気が起き、数日前にLINE botもできて調子が上がり取り組んだら、ほとんど解決できたのでそれをまとめる。

何がしたかった

seriesタグの記事を見ながら書き出してみる

• ページ内リンクが飛ばないのを直す
• 画像埋め込み
• コメント
  • 可能らしいという記事は見た
• ライセンス改変
  • CC-BY-SAにしたかったけどいい感じにかけなかった

何をした

Gitを使ってみたかったので、developブランチを作ってそこで主に作業した。VS Codeの拡張機能Git Graphを非常に重宝した(コミットの内容やブランチの視覚化。ただコマンドは覚えられない(覚えたい))。少しはGitの使い方が分かった(?)

画像埋め込み

画像埋め込みについては通常のマークダウンのように

![text](link)

と入力してもできるが(画像は/static)、ショートコードを使ったほうが良い、と書いてあった²。そこで調べていると、画像の位置も/static以外でもよく、その配置はleaf bundleやbranch bundleというものがあるらしい(こちらのサイトや、公式のドキュメント参照)。特に公式ドキュメントを参考にして様々な画像の配置方法を試してみた。以下、試して分かったこと

• 本文自体はindex.md(つまりleaf bundle)に書き、そのURLは/contents以下index.mdのあるディレクトリに依る³(ここら辺はBreadcrumbsに取り掛かるときに役に立った)
• ショートコードを使えば画像のリサイズができる
• ショートコードは自作できる(例えばニコニコ動画埋め込みに使える)

ショートコードの使い方はまだ完全に理解したわけではないが、ちょっとした成果として画像を張り付けてみる

テーマアップデート

今回の本命のアップデート。いろいろ機能が追加されたのでそれに合わせて既存のものも改良した。

readingtimeのバグ修正

記事一覧で表示されるreadingtime(記事分量の目安)の表示が!$s(int=1) minのように表示されていた。/themeから該当のhtmlを探し出したところ、Hugoのprintf()で型が一致していなかったことが原因のようだったので、型を自動で割り当てる%vにかえた。⁴

configファイルの変更(toml → yml)

最初、とりあえずHugo公式に従ってtomlで書いていたconfigを新しいテーマのconfig.ymlの例とデモサイトのconfig.ymlを参考にしつつymlで書き直した。その際、多言語機能を使って書いていたprofileページを削除した(本来の機能通りに使いたかった)。変換するときにいろいろ調べながらしたので、以下の変更も付随した。

アイコン変更

テーマが公式でMastodonのアイコンに対応したので、テーマ公式のMastodonアイコンに変更した。(それまではWikipediaから持ってきたアイコンを改変して使っていた)。そのため、ライセンス表記、svg.htmlの変更を元に戻した。

ファビコンもテーマ側でカスタムに対応したので、その方法に従うようにかえた。

カバー

configを書いてる時に見つけた項目。post一覧にpostのカバー(すなわち画像)を表示できるようになっていた。リサイズはとくに行われないのでリサイズしたものを用意する必要はあるが、postの特徴付けに使えそうだと思った(今回使ってみた)。

検索

テーマのアップデートで使えるようになった。Fuse.jsを利用して実装しているらしい。右上、またはこのリンクから検索ができる。fuzzy-searchを謳っているだけあって、検索はなかなかあいまい⁵だが、オプションを使用することでより詳しい検索ができる(exact-matchとかORとかNOTとか)。そのことは見ている人はわからないだろうから、検索ボックスの上にオプションの説明ページへのリンクを貼っておいた(リンクであることがちょっとわかりずらい)

Breadcrumbs(パンくずリスト)

パンくずリストとは

これもテーマのアップグレードで対応したが、使い方が少しわからなかった。configでonにした時点では/postsのリストしか表示されないのでいろいろ調べたところ、公式によると特に設定しなくても問題なく動くようだった(https://gohugo.io/templates/section-templates/#example-using-sitegetpage)。しかし、動かないので難儀していたが、デモページのリポジトリを見ると、_index.mdがあり、中にtitleとdescriptionが設定されていた。これを設定するとリストが表示されたので、このテーマでは先ほどのドキュメントの前半に当たる機能のみで動くようになってるのだと思う⁶。なので、これに従って既存の記事のリストも整備した。

その他

サイト上部のメニューに検索用のSearchを追加したほか、いままで設定していたけど使い方がわからなかったSeriesも追加した。Tagsとかなり役割は似ているが、Seriesはより本質的なテーマ、Tagsは関連する項目を網羅する、という感じで使い分けたい。

あと、ページ内リンクが飛ばない問題も解決していた。おそらくテーマ側のアップデートで直った。

コメント(ActivityPub利用)

少し前にMastodonでActivityPubをブログのコメントに読み込むというものを見た。その元になっている、Hugo用のものを実装してみた。

もと記事はこれ: https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/

ここに載っているコードを/layouts/partials/comments.htmlに張り付けて、記事冒頭に

comments:
    host: <例えばmstdn.jp>
    username: <例えばnippa>
    id: <postのid(投稿を開いたときのURLの数字)>

を張り付けて終わり！と思ったけど動かなかった⁷。

原因⁸はDOMPurifyが読み込まれないことだった。コードから察するに、assets/jsにpurify.min.jsをおけば動くのだろうが、それではjsが読み込まれなかった。そこで、いろいろ調べ⁹、Hugoの関数を使って以下のように書き直した

• before

<script src="/assets/js/purify.min.js"></script>

• after

{{ with resources.Get "js/purify.min.js" }}
    {{ $js := resources.Get . }}
    <script src="{{ $js.Permalink }}"></script>
{{ end }}

これでjsがちゃんと読み込まれて、コメントも取り込めるようになった。

コメント用CSS作成

このままではコメントはほぼCSSなしで表示されかっこ悪かったので、コメント用にCSSファイルを作ることにした。元のテーマのCSSやMDNなど参考にして大体思っていた通りのものが書けた(モバイルだと少し汚いかも？) おおよそこのような感じ¹⁰

ライセンス変更

いままではデフォルトで©qwjyhと表示されていたけど、CC-BY-SA 4.0にすることにした。ホームページからライセンスを選択し、fotter.htmlに入れ込んだ。ここでも画像によって汚くなったのでコメントのときと同じ要領でCSSも改変した。

纏め

丸3日ほどこれに没頭した甲斐もあってか、大体のことはできるようになった。あとはページ内リンクとかショートコードあたりを深めたいかな…¹¹ だいたいひと段落したのでほかのことにも取り掛かっていきたい。では