<form action="" method="POST" class="js-post_include" target="#result">
<input type="text" name="keyword" value="">
<input type="hidden" name="tpl" value="/include/htmx/result.html">
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>
<div id="result">検索結果が表示されるエリア</div>class="js-post_include" を書くことで起動し、target="#result" の場所を置き換えます。
config.system.default.yaml に以下の設定があります。
このままでは post include & htmx
で必要なコンテンツの配信ができません。
適切に設定を変更する必要があり、その設定を変更したい設定は config.system.yaml に記述してください。
forbid_tpl_url_context: on # on | off 読者以下のURLコンテキストのtplを許可しない。（例: https://example.com/news/tpl/custom.html）
allow_tpl_path: [] # forbid_tpl_inheritance_when_path_unresolved や forbid_tpl_url_context が on の場合、除外するパスを設定します。例:
[news.html,hoge/custom.html] カンマ区切りで指定
html_format_validate: on # on | off htmlフォーマットでない場合は404で返すpost include & htmx 実装中は、以下の設定にしておいてください。
forbid_tpl_url_context: off
html_format_validate: off将来的には、この設定を変更しないでも大丈夫にできないかを検討中です。
<script src="https://unpkg.com/htmx.org@1.9.12"
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ajax-header.js"></script>
a-blog cms をバックエンドに利用する際には ajax-header.js を追加で設定が必要になります。
これを知らないと、a-blog cms で htmx を動かすことはできません。
<form action="" method="POST" hx-ext="ajax-header" hx-post="" hx-trigger="submit" hx-target="#result" hx-swap="outerHTML">
<input type="text" name="keyword" value="">
<input type="hidden" name="tpl" value="/include/htmx/result.html">
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>
<div id="result">検索結果が表示されるエリア</div>a-blog cms の post include を htmx に書き換えてみます。
hx-post と post include は、ほぼ同じ記述で OK
ですが、hx-ext="ajax-header" を付けるようにしてください。
hx-get などでも同様です。
<script>
addEventListener('htmx:beforeHistoryUpdate', function (event) {
const proposedUrl = event.detail.history.path;
const customUrl = proposedUrl.replace(/\/include\/htmx\/.*\.html/, '');
event.detail.history.path = customUrl;
});
</script>a-blog cms で tpl を POST すると、URL に tpl で指定したパス＋ファイル名が追加されます。
hx-push-url でそのまま URL を表示させないようにするための対策の JavaScript です。
a-blog cms が呼び出すテンプレートと htmx が呼び出すテンプレートを共通化するための方法をご紹介します。
a-blog cms が表示する際には、1つのモジュール分だけですが、htmx は複数のエリアを更新するための記述が必要なので IFブロック で制御させています。
@extends("/_layouts/basic.html")
@section("main")
@include("/include/htmx/recruit/summary.html", {"multi_swap": "off"})
@endsection<div id="main-contents" hx-swap-oob="true">
<!-- BEGIN_MODULE Entry_Summary -->
（略）
<!-- END_MODULE Entry_Summary -->
</div>
<!-- BEGIN_IF [{{multi_swap}}/neq/off] -->
@include("/include/header/topicpath.html")
<!-- BEGIN_MODULE Ogp -->
<title>{title}</title>
<!-- END_MODULE Ogp -->
<!-- END_IF --><script>
addEventListener('htmx:afterSwap', function (event) {
ACMS.Dispatch(event.target);
});
</script>htmx で Ajax でコンテンツが読み込まれた後に、a-blog cms の利用している acms.js を実行する必要があれば、上記のコードを <head> タグの中に設定します。
siteテーマを htmx 化した https://htmx.sakuraweb.com/ ( htmx@site テーマ ) を作ってみました。
また、blogテーマは htmx@blog を kazumich.com で実装したものを利用しています。
ablogcms.io を利用するか、ローカル環境に a-blog cms を準備してください。
blog テーマを選択すると記事が1件しかないので、blogで試しに実装してみるのであれば、
htmx@blog を選択し、htmx@blog を消してチャレンジください。
// --------------------------
// 特製テーマ設定
// --------------------------
# $theme_zip_file = "square@ec.zip";
# $theme_zip_file = "smartblock@blog.zip";setup.php の 50行目くらいに上記の設定があります。
// --------------------------
// 特製テーマ設定
// --------------------------
$theme_zip_file = "htmx@blog.zip";のように # を削除して htmx@blog.zip または htmx@site.zip にすることで
ローカル環境に htmx を利用したサイトがインストールされます。