長いこと適当に運用していたHugoのブログですが、旧ブログはFC2ブログで使い慣れていたレイアウトを無理くり再現したレトロなもので、自分は見やすいけどユーザーフレンドリーかは甚だ疑問でした。
それで、昔ちょっとだけウェブデザインの勉強をしたときに、Tailwind CSSが使いやすかったので、Hugoでも使いたいと思っていたのですが、この組み合わせって一昔前のHugoのバージョンだと両立がめんどくさかったんですよね。
なので一時的にPico.cssを使ってごまかしてきたのですが、なんか最近のアップデートでHugoがTailwindに対応していたし、Tailwindのほうもメジャーアップデートで使いやすくなっているみたいでした。
最近はほぼPythonしか書いてないので不安でしたが、とりあえずやってみようということで改装に着手。
まずwinget経由でNode.jsのLTSとHugo（Extendedじゃないほう）の最新版を導入しました。
読んだ記事は以下。
Node.jsバブちゃんなのでなにもわからんのですが、node_modulesは.gitignoreしていいらしいです。
で、FC2とかWordpress時代に見慣れていた、年と月をNumericで表示するアーカイブがほしかったのでこちらを参考に作成した。
で、いちいちアーカイブmdをはやすのも面倒なので、そこはChatGPTに聞いてPythonを書いてもらった。 月を跨いだらローカルでさくっとArchive用mdを増やして、Forkから記事ごとコミットしている。なんかもっといい方法があるのかもしれないが、一旦シンプルな実装でよかろう。
文字列検索に関してはいろいろな方法があるので、もう少し調べてみる予定。
あと、Luminous.jsとTailwindの相性が悪く、モーダルの画像が左にずれることがあった。
@layer components {
.lum-lightbox-position-helper {
text-align: center;
}
.lum-img {
display: inline-block;
max-width: none;
margin: 0;
}
}
とすれば中央に寄ってくれるみたい。