ブログの一覧と記事をCMS化してみてつまづいたことと解決策

さいしょに

ブログの一覧ページと記事の内容のページをa-blog cmsでCMS化してみるという課題に取り組みました。そこでつまづいたこととその解決策を3つに絞って書いていこうと思います。

パンくずリスト：カテゴリー名とタグ名を動的に表示する方法

パンくずリストの部分で「HOME/タグ検索/」とあるのですがタグ検索の次にカテゴリーをクリックしたときはカテゴリー名を、タグをクリックしたときはタグ名を出るようにしたかったのですがどのモジュールを使えば良いかがわかりませんでした。

タッチモジュール

解決策としてタッチモジュールを活用しました。
タッチモジュールは現在見ているページが条件に当てはまる時だけ表示されます。
だから今回のようにパンくずリストなどこの条件の時はこの表示にしたいという動きに最適でした。
タッチモジュールを活用したソースコードがこちらになります。

<!-- パンくずリスト -->
<!-- BEGIN_MODULE Topicpath -->
<nav class="w-full overflow-x-auto mb-4 not-prose" id="topicpath">
 <ol class="inline-flex text-sm whitespace-nowrap gap-2 p-0">

  <li><a href="sample.html" class="no-underline hover:text-sky-600 hover:underline">HOME</a> /</li>
  <li><a href="sample.html" class="no-underline hover:text-sky-600 hover:underline">タグ検索</a> /</li>

  <!-- ここからはタッチモジュール -->
  <!-- BEGIN_MODULE Touch_Category -->
  <li><a href="{url}" class="no-underline hover:text-sky-600 hover:underline">%{CATEGORY_NAME}</a></li>
  <!-- END_MODULE Touch_Category -->

  <!-- BEGIN_MODULE Touch_Tag -->
  <li><a href="{url}" class="no-underline hover:text-sky-600 hover:underline">%{TAG}</a></li>
  <!-- END_MODULE Touch_Tag -->
                        
 </ol>
</nav>

絞り込み検索：関連するタグを出したい

絞り込み検索をする際にタグに関するモジュールがいくつかあり最初はTag_Cloudで囲んでいたけど絞り込み検索ができなくて困っていました。

Tag_Filter（タグフィルター）

解決策としてTag_Filterというモジュールを活用しました。
Tag_Cloudを活用すると登録されてあるタグが出てきましたが、Tag_Filterを活用することで1つタグをクリックすると関連するタグが出てきて絞り込み検索ができるようになりました。

条件設定：モジュールIDを作成する上で意識すること

記事が6つ並んでいて下に「もっとみる」というボタンがあるのですがそのボタンを押しても次のページに移動することはできるけどURLが「/page/2/」というふうになりませんでした。
また、カテゴリーやハッシュタグの項目では「〜　◯件」というふうに表示されているのですがアーカイブの項目だけは表示されていませんでした。

条件設定のチェックボックスに注目

原因としてモジュールIDを作成した際にチェックボックスのチェック漏れでした。
まずページのURLについてですが、「ページ」という部分にチェックをつけていなかったのでURLが上記のように「/page/2/」という表示になっていませんでした。

次にアーカイブについてですが、「開始日時」と「終了日時」の部分にチェックをつけていなかったのでアーカイブの項目に「〜　◯件」と表示されていませんでした。
条件設定のこの部分にチェックをつけるとこのように表示されるということがわかっていなかったことに気づけました。

まとめ

今回はブログの一覧ページと記事の内容ページをa-blog cmsでCMS化した際につまづいたところとその解決策についてまとめました。
まだまだa-blog cmsについて知識が足りないので学んで活用していこうと思います。