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