htmx初心者向け勉強会

2024年06月

a-blog cms / post include

a-blog cms には 10年以上前から hx-post のように Ajax で HTML を取得する機能が提供されており post_include 機能と呼ばれています。

<form action="" method="POST" class="js-post_include" target="#result">
<input type="hidden" name="tpl" value="/include/sample.html">
<input type="submit" name="ACMS_POST_2GET_Ajax" value="検索">
</form>
<div id="result">検索結果が表示されるエリア</div>

a-blog cms での実装としては hx-post の代わりに class="js-post_include" という Class を設定し、target="#result" が hx-target の代わりになります。

Ver. 3.1.16 まで

これまでは post_include や htmx を利用する際には、以下のような URL に tpl を許可する設定や、不完全なHTML（ <html> <head> <body> などの無いHTML）を表示可能にするような設定をして運用しておりました。

https://d9hqioo2.ablogcms.io/tpl/include/sample.html

現在は、上記のリンクは、投稿者以上の権限でログインしている時しか表示されません。

config.system.yaml

forbid_tpl_url_context: off
html_format_validate: off

少しセキュリティレベルを落とすことになりますが tpl を指定する事で tpl の後のパス＋ファイル名のテンプレートに置き換えることができるようになります。これで、必要な部分的な HTML が取得可能になります。

Ver. 3.1.17 から（ 2024/6/10 リリース ）

上記のように tpl を指定した URL にアクセスを許可する設定をする必要がなく Ajaxによる部分テンプレートアクセス時に CSRFトークンによる認証が追加 され動作させることができるようになりました。

config.system.yaml

ajax_security_level: 2 
# ajaxリクエストのセキュリティレベルを設定します。
# 0 : チェックなし 
# 1 : RefererとHttpヘッダーを確認（アップデート時デフォルト）
# 2 : CSRFトークン確認（新規インストール時デフォルト）

a-blog cms htmx setup

htmx

<script src="https://unpkg.com/htmx.org@2.0.0" 
integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw" 
crossorigin="anonymous"></script>

<head> に上記のタグを書いて試してみることができますが、長期で運用する際には、自前のサーバーに htmx.min.js をアップロードして利用しましょう。

2024年6月17日に 2.0 がリリースされました。

hx-get

CSRFトークンを GETリクエストでも送信できるようにするための JavaScript になります。

<script>
  document.addEventListener("htmx:configRequest", function(event) {
      const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
      event.detail.headers['X-CSRF-Token'] = csrfToken;
  });
</script>

hx-post

hx-post で hx-push-url を利用する際に必要な JavaScript になります。

<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>

htmx で呼び出すテンプレートファイルは /themes/＊利用するテーマ＊/include/htmx 以下のディレクトリに設置する事で hx-push-url で記録する URL をいい感じにしてくれます。

acms.js

a-blog cms の標準的な 組み込みJS を htmx が動作した後に再度起動するための JavaScript になります。

<script>
  addEventListener('htmx:afterSwap', function (event) {
    ACMS.Dispatch(event.target);
  });
</script>

hx-get hands-on

<a href="/about.html">demo</a>

以下の demo のリンクを htmx の hx-get を利用した記述にしてみましょう。

  • /include/htmx/entry-body.html （コンテンツ表示用）

ヒント

hx-get="/about.html/tpl/include/htmx/entry-body.html"
demo

最新記事

カテゴリー

アーカイブ

ハッシュタグ

©2024 https://d9hqioo2.ablogcms.io/