ページ遷移しないタグ検索

a-blog cms Advent Calendar 2022 2日目の記事です。


定期的に使う a-blog cms の組み込みJS代表といえば、皆さん何を思い浮かべますか?
私は「ポストインクルード」が一番に思い浮かびます。そんなに頻繁に使うわけではないけどいざという時に重宝する機能ではないでしょうか?
今回はそのポストインクルードをタグ検索で使ってみました。

タグ検索でよく使うモジュール

タグ検索でよく使うモジュールの組み合わせはこの3つです。

  • タグクラウド(タグ一覧)
  • タグフィルター(タグ複数選択による絞り込み)
  • エントリーサマリー(絞り込み結果)

今回はこの3つのモジュール内にある主要なボタン全てにポストインクルードを仕込みました。

実装結果

早速ですが実装結果はこちらになります。

注意点

ポストインクルードの基本的なことは説明しませんので、この機能を初めて知ったという方は、後で公式サイトのドキュメント「ポストインクルード」を一読することをおすすめします。

そして、この実装は全てをポストインクルードしようという強い意志のもと作成しています。もちろん他にも実装方法はあるのでプロジェクトに合った実装を模索してみてください。自前でJSを書いたり、a-blog cms の標準でついてくる Vue のサンプルフォルダを活用してみたり(現時点ではdevelopテーマにVue2が入っていますがVue3に上がる未来もそんなに遠くないはず)など。

ポイント

この実装をする上でのポイントは大きく4つあります。

①モジュール設定

忘れがちなのがモジュールの引数チェックです。
タグフィルターの「タグ」、エントリーサマリーの「タグ」「ページャー」に必ずチェックをつけます。

②ポストインクルードで渡すもの

この実装で渡す値は基本的に、URLとテンプレートの2つです。
エントリーサマリーのページャーについては「page」を追加で渡します。

action に URL を入れる

ポストインクルードでの定番実装といえば formの中で細かく値を指定してURLを組み立てていく方法が挙げられますが、今回はモジュールの変数としてかえってくるURLをactionに入れることで、リンク先を指定しました。

Tag_Cloud 例)
<!-- BEGIN tag:loop -->
<!-- ↓actionにURL指定↓ -->
<form action="{url}" method="post" class="js-post_include" target="#sample">
  <button type="submit" name="ACMS_POST_2GET">{name}</button>
  <input type="hidden" name="tpl" value="path/to/file.html">
</form>

エントリーサマリーのページャーには「page」指定

ポストインクルードのURLを action で指定する場合、page 情報が引き継がれないので個別に input で指定する必要があります。

Entry_Summary のページャー例)
<!-- BEGIN page:loop -->
<li{pageCurAttr}[raw]>
  <div><!-- BEGIN link#front -->
    <form action="{url}" method="post" class="js-post_include" target="#sample"><!-- END link#front -->
      <button type="submit" name="ACMS_POST_2GET">{page}</button>
      <input type="hidden" name="tpl" value="ファイルパス/summary.html">
      <!-- ↓page指定必須↓ -->
      <input type="hidden" name="page" value="{page}">

ここでテストしていて気づいたのですが、hiddenで渡せているかを確認するために「bid」も試しに input で指定したところ、今度は action のURLに入っていたはずのタグ情報がポスト時に全て消える現象がおきました。

なので、action でURL指定を行う場合は余計なものを input 指定せず、足りないものだけを input で渡してあげるのがベターです。

③ポストインクルード範囲をタグクリック時とページング時で変える

タグボタンを押したときは、タグとサマリーの両方をポストインクルード範囲にします。
サマリーのページャーを押したときは絞り込みタグに変更はないためサマリーのみポストインクルード範囲にします。

④タグフィルターで選択中のタグが0になる場合とそうでない場合のtplを分ける

タグフィルターは選択中のタグが存在する時に使用できるモジュールです。しかしタグフィルターにはタグを削除する {omitUrl} が存在します。
つまり、タグを削除して選択中のタグが存在しない状態になった場合にはタグフィルターではなく、タグ一覧であるタグクラウドを読み込む必要があります。

タグボタンをクリックした後に選択中のタグが0になるのかならないのか判断するには、送信されるURLに /tag/ が含まれているかどうかで判断します。

Tag_Filter のタグ削除例)
<form action="{omitUrl}" method="post" class="js-post_include" target="#sample">
  <button type="submit" name="ACMS_POST_2GET">x</button>
  <!-- BEGIN_IF [{omitUrl}/re/(/tag/)] -->
  <input type="hidden" name="tpl" value="ファイルパス/タグフィルターが入ってるファイル.html">
  <!-- ELSE -->
  <!-- ↓選択中のタグが0になる場合はタグクラウドを読み込む↓ -->
  <input type="hidden" name="tpl" value="ファイルパス/タグクラウドが入ってるファイル.html">
  <!-- END_IF -->
</form>

参考サイト

最後に

今回紹介している方法はコードが太り気味になるのが気になります。なので今度改良版を作りたいなどうしようかなと考え中です。

明日の a-blog cms Advent Calendar 2022 3日目はいおりさんです。


タグ