Entry_Continueモジュールと組み合わせて記事の続きをページ遷移なしで表示する

通常は「続きを読む」リンクをクリックすると、新しいページに遷移して記事の続きが表示されます。ですが、Entry_Continue モジュール と htmx を組み合わせることで、ページ遷移なし（非同期） に続き部分を読み込むことが可能です。

この方法を利用すると、一覧ページや記事ページ上で「続きを読む」を押すだけで、スムーズに続きを展開するインタラクションが実現できます。

実装の流れ

1. 続きを表示するテンプレートを作成（例：include/entry/continue.html）

2. 一覧テンプレートの continueLink:veil 部分を htmx に対応させる

1. 続きを表示するテンプレートを準備

include/entry/continue.html

<!-- BEGIN_MODULE Entry_Continue -->
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<!-- END unit:veil -->
<!-- END_MODULE Entry_Continue -->

このテンプレートでは、Entry_Continue モジュールを使用して記事の続き部分を出力します。ここでは unit.html を読み込んでおり、本文後半のユニット構成をそのまま再利用しています。

2. 一覧テンプレートの修正（htmx 対応）

一覧テンプレート内で continueLink:veil のブロックを探し、以下のように修正します。

変更前

<!-- BEGIN continueLink:veil -->
<p><a href="{continueUrl}" class="acms-btn-flat"><span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

変更後

<!-- BEGIN continueLink:veil -->
<p class="continueLink">
<a href="{continueUrl}" class="acms-btn-flat"
   hx-get="{continueUrl}/tpl/include/entry/continue.html"
   hx-target="closest .continueLink"
   hx-swap="outerHTML">
<span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

この変更により、クリック時に htmx が {url}/tpl/include/entry/continue.html にリクエストを送り、クリックした要素から最も近い .continueLink 要素を置き換えます。

このように Entry_Continue モジュール と htmx を組み合わせることで、JavaScript コードを書かずに ページ遷移なしの続きを表示 できます。htmx は HTML 属性のみで制御できるため、シンプルで保守性が高く、既存テンプレートにも容易に導入可能です。