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>