2024年5月22日(水) に大阪市北区の会議室をお借りして、htmx初心者向け勉強会（a-blog cms 勉強会 in 大阪 2024/05） を開催しました。平日のお昼に、お仕事の一環として参加された参加者は、9人での勉強会ということになりました。
最近、a-blog cms との連携についてブログの記事を公開したり、ablogcms.io の選択テーマの中に出てくる htmx とは、どんなものなのかをご紹介を行いました。
htmx 自体簡単な属性を設定するだけで実行が可能なライブラリという事で、基本のご紹介というだけだと短時間で終わってしまうので
実際に、a-blog cms と htmx の連携でどう実装していくのかを事例を交えてしっかりご紹介しました。
サーバー環境によって、ダイレクト編集ONなどに利用しているCookie情報がうまく取得できず、ダイレクト編集をONにできないという不具合が確認されています。
下記のパッチの適応をお願いいたします。
この度は、ご迷惑をおかけしてしまい大変申し訳ございませんでした。
今後ともa-blog cmsをよろしくお願いいたします。
a-blog cms では、ブログ単位で会員コンテンツとしてログインしないと見えないコンテンツを管理するような実装は標準で用意されております。しかし、今回は、もう少し簡単にエントリーのカスタムフィールドでエントリー毎の個別パスワードを設定できるような実装を考えてみます。
エントリー編集ページは、管理ページ側と表ページ側（ダイレクト編集含む）があり、カスタムJSやCSSを適用するにはその両ページに反映する必要があります。
管理画面にJSやCSSを読み込むには、使用しているテーマフォルダ直下に admin.html を設置します。
themes/使用しているテーマ/admin.html
admin.html には下記のような記述をします。エントリー編集ページのみにカスタムJSとCSSを反映させたい場合は下記のように追記したlinkタグやscriptタグを Touch_Edit モジュールで囲います。
@extends("/_layouts/admin.html")
@section("admin-css")
@parent
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_Edit -->
@endsection
@section("admin-js")
@parent
<!-- BEGIN_MODULE Touch_Edit -->
<script src="カスタムJSのファイルパス"></script>
<!-- END_MODULE Touch_Edit -->
@endsection@extends や @section は a-blog cms の「テンプレートの継承」機能です。テンプレートの継承機能を使えるのは Ver. 2.8.0 以降になります。
表画面にJSやCSSを読み込むには、他のJSファイルやCSSファイルを読み込んでいる箇所にscriptタグやlinkタグを追加してください。
a-blog cms 標準テーマ使用の場合は下記ファイルが該当します。
themes/標準テーマ/include/head/js.html
themes/標準テーマ/include/head/link.html
js.html や link.html には下記のような追記をします。CMSに投稿者以上でログインしている時しかエントリー編集画面を表示することはないので、下記のように Touch_SessionWithContribution モジュールで囲い、投稿者以上がログインしている時しかファイル読み込みされないようにます。
サイト表側全体のスタイルファイル読み込みの下あたりに記述します。
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<script src="カスタムJSのファイルパス"></script>
<!-- END_MODULE Touch_SessionWithContribution -->
サイト表側全体のJSファイル読み込みの下あたりに記述します。
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_SessionWithContribution -->
エントリー編集時にしか読み込みたくない場合は、エントリー編集時とダイレクト編集ONの時に読み込む必要があるため、Touch_Edit と Touch_EditInplace で囲います。
<!-- BEGIN_MODULE Touch_EditInplace -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_EditInplace -->
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="カスタムCSSのファイルパス">
<!-- END_MODULE Touch_Edit -->