Blog 更新時の html 修正自動化 その2
修正自動化の進捗です。とりあえず虚無に包まれていた Photography のページを作成しました。
(縮小版写真などを用意してないせいで原寸大の写真を全部読み込んで無理矢理縮小表示させるという、通信量的に邪悪なページです。重くてすみません……。)
とりあえずやったことと言うと
- display:grid の表示調整
- jinja2 ベースのテンプレートファイル作成
- 特定ディレクトリの画像の全パスをテンプレートファイルにねじ込んで render するスクリプト作成
とかです。以下それぞれ書きたいことを書くコーナー。
- display:grid の表示調整
この辺の記事を参考にしました。
特筆すべきこととしては grid-template-columns だけ指定して grid-template-rows を未設定にしているので、最初から row 方向にはみ出てる( grid-auto-rows が適用される)みたいな挙動になってるところですかね。いや大丈夫なのかこれ。
しかも grid-auto-rows も明確なサイズを指定してないので、何か row の間隔がよしなに設定されるようになってます。
あとは写真を単純に一括配置しようとすると縦構図と横構図が混ざってしまうので、取り分けて別の grid に置くか縦横混ざっても良いような class 付けをするか選ぶ必要があるかと思います。
私は後者を選びました。縦構図では vertical クラスを追加で入れて、row のラインを1つ跨るように配置してます。これ上の row サイズ未指定と組み合わせると結構ヤバい挙動しそうな気がしますけど、何か上手くいってるのでとりあえずヨシ！
- jinja2 ベースのテンプレートファイル作成
テンプレートといっても Photography ページは画像をダダ流しにするだけのページにする予定だったので、次のような感じで class と image へのパスを埋め込んでいくための for ループ構造を置いとけば OK.
{% for item in items %}
<div class="{{ item.class }}">
<img loading="lazy" src="{{ item.image }}">
</div>
{% endfor %}
- 特定ディレクトリの画像の全パスをテンプレートファイルにねじ込んで render するスクリプト作成
このブログに載せている写真は /images/photography/ に全て配置しているので、glob モジュールでパスをリスト化してます。
最初は各ブログ記事の .html ファイルを格納したディレクトリ内に写真を保存していたのでそれを巡回して……と考えていたんですが、そのやり方だと写真ではないただの画像(スクショとか)が混ざり得るのでどうしようかなぁと悩んでました。ちくちく例外を決めていくよりはリソース配置から見直したほうが楽だなと思いこうなってます。
パスを集めたら一度画像を読み込んで縦横のサイズを比較し、縦構図であれば class に vertical を追加して、パスも含めて辞書作成→辞書を並べた items リストを作成→ render 時上記テンプレートに item.class と item.image をドカドカ並べていくって感じ。まあ普通に jinja2 の for テンプレにきちんと収まるようデータ用意するってだけです。
ちょい面倒な点(というかまだあんまり解決してない気がする点)としては最終的に render された .html ファイルから見た画像の相対パスが上手いこと設定できてないところでしょうか。photography.html の生成だけやるスクリプトだと割り切ってしまえば決め打ちでいいんですけど。
そんな感じでとりあえず1ページ作ったわけですが、これ修正っていうか毎回まっさらにビルドしてるだけですよね。
SSG について調べるとビルドに時間かかっちゃうからページが多いサイトにはあんまり向いてないよ～みたいな見解が散見されますし、毎回ビルドして差分とか気にせず生成ファイルで元ファイルを上書きして……とやるよりは、元ファイルを見て差分だけ書き込んでいく方が最終的にはベターなのかしら。まあ"元ファイルを見て"の部分で html 解析のオーバーヘッドが入るのでそこを簡略化できないとトントンにさえならないのかもしれませんが。
Tweet