htmx と a-blog cms で作る「もっと見る」ボタンの実装方法
まず、実践的な実装方法の一つとして、標準的なページャー UI を Ajax を使用した動的コンテンツ読み込みに置き換える方法を紹介します。これを実現するために、htmx を利用します。
htmx sample
htmx を活用した a-blog cms 用のテーマ作成のためのサンプルサイトになります。タイトルタグが cms: で始まるものは a-blog cms による出力、htmx: で始まるものは htmx による Ajax更新を...
head に htmx のライブラリを読み込み
<script src="https://unpkg.com/htmx.org@1.9.10"></script> <script src="https://unpkg.com/htmx.org/dist/ext/ajax-header.js"></script>
a-blog cms を htmx のバックエンドに利用する場合、ajax-header.js の読み込みが必要ですので、ご注意ください。
リスト表示のモジュールのページャーをカスタマイズ
リスト表示用のモジュールのページャーをカスタマイズします。以下の例では、次のページへのリンクをカスタマイズしています。
<!-- BEGIN pager:veil -->
<!-- BEGIN forwardLink -->
<form hx-post="" hx-ext="ajax-header" hx-trigger="click" hx-target="this" hx-swap="outerHTML" class="acms-text-center">
<input type="hidden" name="bid" value="1">
<input type="hidden" name="cid" value="7">
<input type="hidden" name="tpl" value="/include/htmx/headline.html">
<input type="hidden" name="page" value="{forwardPage}">
<p class="acms-text-center">
<input type="submit" name="ACMS_POST_2GET" value="次の{forwardNum}件へ"
class="acms-btn acms-btn-primary acms-btn-large">
</p>
</form><!-- END forwardLink -->
<!-- END pager:veil -->tpl を利用する際の private/cofig.system.yaml 設定
設定を全体を解除する（非推奨）
forbid_tpl_url_context: off
設定を部分的に解除する（推奨）
forbid_tpl_url_context: on allow_tpl_path: [include/htmx/headline.html]
テンプレートファイルの html チェック
拡張子が .html のファイルが HTML フォーマットでない場合に 404 エラーを返す設定を無効にします。これは、a-blog cms が部分的な HTML を読み込めるようにするために必要です。
html_format_validate: off
続きを読み込む際の HTML で気を付けること
モジュールを <ul><li>〜</li></ul> で読み込む設定をすると、複数の <ul> タグが生成されることがあります。<li>〜</li> 部分だけを読み込み、全体として1つの <ul> タグで済むようなマークアップを心がけましょう。
_top.html
<h2 class="section-heading acms-text-center">お知らせ</h2>
<div class="module-section">
<ul class="headline headline-1col acms-list-group clearfix" aria-labelledby="layout-top_headline">
@include("/include/htmx/headline.html")
</ul>
</div>include/htmx/headline.html
<!-- BEGIN_MODULE Entry_Headline id="headline_news" -->
@include("/admin/module/setting.html")
<!-- BEGIN entry:loop -->
<li class="headline-item {entry:loop.class}">
<!-- BEGIN url#front --><a href="{url}" class="acms-list-group-item headline-link"><!-- END url#front -->
<time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#week} )</time>
<!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
<span class="headline-title">{title}</span><!-- BEGIN new --><span class="acms-label acms-label-danger">NEW</span><!-- END new -->
<!-- BEGIN url#rear --></a><!-- END url#rear -->
</li><!-- END entry:loop -->
<!-- BEGIN pager:veil -->
<li>
<!-- BEGIN forwardLink -->
<form hx-post="" hx-ext="ajax-header" hx-trigger="click" hx-target="this" hx-swap="outerHTML"
class="acms-text-center">
<input type="hidden" name="bid" value="1">
<input type="hidden" name="cid" value="7">
<input type="hidden" name="tpl" value="/include/htmx/headline.html">
<input type="hidden" name="page" value="{forwardPage}">
<p class="acms-text-center">
<input type="submit" name="ACMS_POST_2GET" value="次の{forwardNum}件へ"
class="acms-btn acms-btn-primary acms-btn-large">
</p>
</form><!-- END forwardLink -->
</li>
<!-- END pager:veil -->
<!-- END_MODULE Entry_Headline -->
