Yatというテーマにした

元々Chirpyというテーマを使用していました。
このテーマは結構高機能で弄りがいがあってよかったのですが、jekyll-remote-themeで使用すると微妙におかしくなる点や
デカすぎて改造するのに手に余った点、自分が雑にアップデートしようとして失敗したため、一旦やめることにしました。

まあ、気分一新したかったというのもあります。

今回使用したのはYatというもので、
自分がブログに欲しい機能はだいたい揃えていることと、jekyll-remote-themeに公式対応しているところ、いい感じのヘッダーがある点、弄りやすそうってところがあり、こちらにしました。

いじった点

ページ

以下のページに関してはYatのデフォルトだとPremalinkが設定されておらず、/categories/や/archives/みたいなパスになってしまうのですが、
Yatの各ページへのリンクは/categories.htmlや/archives.htmlのような形になっており、正しくリンクされていなかったので簡単に直せるよう、
Premalinkの方を指定してリンクされるようにしました。

categories.html
archives.html
tags.html

翻訳機能

YatにはGoogle翻訳を使用した翻訳ボタンがあるのですが、デザイン的に邪魔なのと、
そもそも日本語話者向けのサイトなので不必要かなぁ・・・。という考えでオミットしました。
配列を空にするだけで良さそうでした。

translate_langs: []

共有ボタン

Yatというテーマには共有ボタンが存在しないのですが、流石に寂しいのと自分が不便なのでつけることにしました。

いい感じの方法が思い浮かばなかったので、相当雑に/inclues/custom/share_button.htmlで共有ボタンの本体を作成し、/_layouts/post.htmlのページネーションと(非表示だけど)コメントの間にincludeするようにしました。

本当はCSSも直書きではなくsassとかでコンパイルしてやるようにしたらよいのでしょうが、影響範囲狭めたかったので、直書きにしました・・・。
最近のCSSはネストができたりfloatじゃなくてflexという便利なものができたり、数値計算ができたりといろいろ便利になっていて驚きました。

共有先はTwitterとMisskey、Mastodon、はてブにしました。最近のテーマだとMastodon対応はたまに見るのですが、
Misskey対応はまあめったに見ないので、自作してよかったかなぁ・・・って感じがします。

共有リンクに関してはSNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】を参考にさせていただきました。
また、MisskeyとMastodonの共有に関してはそれぞれMisskey Shareとdonshareというものをそのまま使用させていただきました。

まとめ

ということで、ブログの見た目が少し変わりました。
前から気になっていた画像の上で謎のアニメーションが出る問題からもララバイできたのでいい感じです。