a-blog cms template

a-blog cms が呼び出す summary.html のテンプレートと、 htmx が呼び出す summary.html テンプレートを共通化するための方法をご紹介します。

index.html

a-blog cms が動作し、index.html のテンプレートが呼び出されると、Topicpath モジュールや Entry_Summary モジュールがインクルードされています。

@extends("/_layouts/basic.html")

@section("topic-path")
@include("/include/topicpath.html")
@endsection

@section("main")
@include("/include/htmx/summary.html", {"multi_swap": "off"})
@endsection

ここで a-blog cms の一覧ページのテンプレート index.html から summary.html がインクルードされる際には、変数 multi_swap に off がセットされるように設定されています。

summary.html

<div id="main-contents">
<!-- BEGIN_MODULE Entry_Summary -->
（略）
<!-- END_MODULE Entry_Summary -->
</div>

<!-- BEGIN_IF [{{multi_swap}}/neq/off] -->

<div id="topicpath" hx-swap-oob="true">
<!-- BEGIN_MODULE Topicpath -->
（略）
<!-- END_MODULE Topicpath -->
</div>
<!-- BEGIN_MODULE Ogp -->
<title>{title}</title>
<!-- END_MODULE Ogp -->

<!-- END_IF -->

IFブロックで変数 multi_swap が off でない時（ htmx で呼ばれる時 ）に、Topicpathモジュールと <title> が表示されるように書かれています。

1. <title> 〜 </title> は、タイトルタグと置き換えが行われます。
2. hx-swap-oob="true"属性の付いている id のコンテンツは、現在表示されている HTML の同じ id と置き換えられます。
3. 残った <div id="main-contents"> の部分が、hx-target のエリアに hx-swap の方法で置き換えが実行されます。