a-blog cms と htmx で作る SPA(Single Page Application) なブログテーマの実装方法
今回、この a-blog cms で作られているブログを htmx を利用して SPA(Single Page Application) にする実験をしてみましたので、その点について紹介をしてみます。
a-blog cms 1.4で搭載される1ユニット更新機能
これまでの a-blog cms では、エントリーの情報を更新する際には、全てのユニットを全部表示し更新していまし た。次期バージョン1.4では、1つのユニットのみのフォームを表示させ更新する機能 が実装される予定です。
a-blog cmsの続きを読むをAjax対応にする方法
検索部分のAjax対応について company3で試すjs-post_inculde機能 | kazumich.log で書きましたが、今回は続きを読むのリンクについてカスタマイズしてみようと思います。カスタマイズのベースとなるテーマとしては、1.3.0bより同梱されるようになった company3 です。
初期状態の続きを読む部分
まずは、今回のカスタマイズをする部分を見てみましょう。 一覧用のテンプレートになりますので、index.html というファイルになります。company3 には
- /themes/company3/index.html（標準的に利用される日付がない一覧）
- /themes/company3/news/index.html（日付がある一覧）
- /themes/company3/search.html（検索結果一覧）
- /themes/company3/search.html（タグ検索結果一覧）
の4つの一覧表示のテンプレートがあるようです。まずは、お知らせ（/news/）のテンプレートを修正していきましょう。
<!-- BEGIN continueLink:veil -->
<p class="continueLink clear"><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->company3で試すjs-post_inculde機能
a-blog cms 1.3.0b では、JavaScriptが分からない人でもAjax機能を実装する事が簡単に出来る機能が用意されております。その方法を簡単に書いておきますので、よろしければ以下の手順のようにお試し下さい。
サイト内検索した時にリロード無しにメインのコンテンツエリアを書き換える
修正するファイルは、/themes/company3/include/subInfo.html のみで、最初は以下のような感じになっております。
<!-- エントリー検索 開始▼▼ -->
<div id="freewordSearch" class="menuListBox">
<h2>検索</h2>
<form action="" method="post" name="searchForm" id="searchForm">
<input type="text" name="keyword" value="%{KEYWORD}" size="15" />
<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />
</form>
</div>
<!-- エントリー検索 終了▲▲ -->a-blog cmsでAjax検索機能を実装 (1.2.2b) その3
の続きです。今回は検索エンジンからのリファラーを元に、検索した結果を表示させてみましょう。
<form action="" method="post" class="js-post_include-ready"> <input type="hidden" name="keyword" size="30" value="CSS" /> <input type="submit" name="ACMS_POST_2GET" /> <input type="hidden" name="tpl" value="searchList.html" /> </form>
上記であれば、CSS というキーワードが固定されています。これを以下のようにしてみます。
<form action="" class="js-post_include-ready" onsubmit="return ACMS.Config.searchEngineKeyword;"> <input type="hidden" name="tpl" value="searchList.html" /> <input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-input-eval_value" /> <input type="hidden" name="ACMS_POST_2GET" /> </form>
form に onsubmit="return ACMS.Config.searchEngineKeyword;" を、検索条件のvalueには ACMS.Config.searchEngineKeyword と書き、classを class="js-input-eval_value" のように付けます。
あと、元はsubmitボタンになっていましたが、hiddenでも大丈夫ですので、hidden に変更してあります。
これで、検索エンジンからのリンクで検索ワードがセットされるようになるハズです。
うまく動けば、以下に何か表示されるようになります。この下に何か出てますか？
a-blog cmsでAjax検索機能を実装 (1.2.2b) その2
昨晩書いた a-blog cmsでAjax検索機能を実装 (1.2.2b) では、以下のように書いています。
<form action="" method="post" class="js-post_include" target="#result"> <input type="text" name="keyword" size="30" value="" /> <input type="submit" name="ACMS_POST_2GET" value="検索" id="submit" class="submit" /> <input type="hidden" name="tpl" value="searchList.html" /> </form> <div id="result"> <p>（検索されるとココが置き換わります）</p> </div>
（検索されるとココが置き換わります）
