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>
