1. HOME
  2. フロントエンド
  3. イベントなどの情報を日付とカテゴリーで分類表示する【a-blog cms】

イベントなどの情報を日付とカテゴリーで分類表示する【a-blog cms】

フロントエンド

イベントなど「○月のエントリー」で分けた状態でさらに「カテゴリーでも分類した状態」で表示するカスタマイズの紹介です。
機能とモジュールとしては下記を使用しています。


データ構成


オレンジ.....ブログ
グリーン.....カテゴリー
グレー........エントリー


実装


まずはEntry_ArchiveListを置いてみましょう。
今回は見出しとして使用するためスニペットから少し下記のように変更を加えています。

<!-- BEGIN_MODULE Entry_ArchiveList -->
<div class="acms-margin-bottom-medium">
 @include("/admin/module/setting.html")
 <ul class="acms-list-group">
  <!-- BEGIN archive:loop -->
  <li>
   <h2>{date#Y}年 {date#n}月 開催イベント</h2>
  </li>
  <!-- END archive:loop -->
 </ul>
</div>
<!-- END_MODULE Entry_ArchiveList -->

続いてarchive:loop内にCategory_EntryListを置いていきます。
h2要素の後に下記のソースを貼り付けます。
スニペットよりエントリーの件数など不要な情報を少し削除しています。

<!-- BEGIN_MODULE Category_EntryList id="category_event" -->
			<div>
				<!-- BEGIN categoryEntryList:loop --><!-- BEGIN categoryUl#front -->
				<div class="txtListMenu"><!-- END categoryUl#front --><!-- BEGIN category:loop -->
					<div class="p-event-list"><h3>{categoryName}</h3><!-- BEGIN entry:veil -->
						<ul class="txtListMenu"><!-- BEGIN entry:loop -->
							<li><a href="{entryUrl}">{entryTitle}</a></li><!-- END entry:loop -->
						</ul><!-- END entry:veil --><!-- END category:loop --><!-- BEGIN categoryLi#rear -->
					</div><!-- END categoryLi#rear --><!-- BEGIN categoryUl#rear -->
				</div><!-- END categoryUl#rear --><!-- END categoryEntryList:loop -->
			</div>
			<!-- END_MODULE Category_EntryList -->

このまま貼り付けても下の画像のように日付が絞り込まれない状態で表示されてしまいます。



きちんと日付で絞り込まれる+カテゴリーで分類されるように2つの作業をおこないます。

  • Category_EntryList モジュールのエスケープ
  • 日付で絞りこむコンテキストを指定する

Category_EntryList モジュールのエスケープ

先ほどのCategory_EntryListモジュールのエスケープ処理を行います。
a-blog cmsではモジュールが内側から解決されるため、エスケープをすることで処理を遅らすことができます。

今回の場合ではのちの作業でEntry_ArchiveListモジュールの変数を使用してCategory_EntryListを絞り込みます。
内側から解決されてしまうとEntry_ArchiveListよりCategory_EntryListが解決されることになり、日付で絞り込むことができません。

今回の場合エスケープはCategory_EntryListモジュール以下、全ての変数・ブロックをエスケープします。
デベロッパーサイトにエスケープメーカーがありますのでそちらを使用すると簡単にエスケープが可能です。

<!-- BEGIN_MODULE\ Category_EntryList id="category_event" -->
			<div>
				<!-- BEGIN\ categoryEntryList:loop --><!-- BEGIN\ categoryUl#front -->
				<div class="txtListMenu"><!-- END\ categoryUl#front --><!-- BEGIN\ category:loop -->
					<div class="p-event-list"><h3>\{categoryName\}</h3><!-- BEGIN\ entry:veil -->
						<ul class="txtListMenu"><!-- BEGIN\ entry:loop -->
							<li><a href="\{entryUrl\}">\{entryTitle\}</a></li><!-- END\ entry:loop -->
						</ul><!-- END\ entry:veil --><!-- END\ category:loop --><!-- BEGIN\ categoryLi#rear -->
					</div><!-- END\ categoryLi#rear --><!-- BEGIN\ categoryUl#rear -->
				</div><!-- END\ categoryUl#rear --><!-- END\ categoryEntryList:loop -->
			</div>
			<!-- END_MODULE\ Category_EntryList -->

日付で絞りこむコンテキストを指定する

コンテキスト挿入機能ではモジュール開始ブロックにctx="xxxx"とURLコンテキスト同様に値を渡すことができる機能です。
今回はEntry_ArchiveListモジュールの変数をCategory_EntryListモジュールにコンテキストとして渡して絞り込みます。

ctx="/{date#Y}-{date#m}-01/-/{date#Y}-{date#m}-3123:59:59/

例として上記の実行結果ごの出力は、「09月01日の00:00:00 から 09月31日の23:59:59まで」となります。
もちろん9月は30日までですが、月の最大として31日を指定しています。

また01日の部分には時間の指定をせず、31日部分には時間の指定を行なっています。
時間を指定せず日付のみで指定した場合には00:00:00が設定され、日付が変わった瞬間となりますので
最終日の31日には23:59:59と指定します。
この指定がないと31日のエントリーが表示されなくなりますので注意が必要です。

完成形のソースコード


<!-- BEGIN_MODULE Entry_ArchiveList -->
<div class="acms-margin-bottom-medium">
	@include("/admin/module/setting.html")
	<ul class="acms-list-group">
		<!-- BEGIN archive:loop -->
		<li>
			<h2>{date#Y}年 {date#n}月 開催イベント</h2>
			<!-- BEGIN_MODULE\ Category_EntryList id="category_event" ctx="/{date#Y}-{date#m}-01/-/{date#Y}-{date#m}-3123:59:59/" -->
			<div>
				<!-- BEGIN\ categoryEntryList:loop --><!-- BEGIN\ categoryUl#front -->
				<div class="txtListMenu"><!-- END\ categoryUl#front --><!-- BEGIN\ category:loop -->
					<div class="p-event-list"><h3>\{categoryName\}</h3><!-- BEGIN\ entry:veil -->
						<ul class="txtListMenu"><!-- BEGIN\ entry:loop -->
							<li><a href="\{entryUrl\}">\{entryTitle\}</a></li><!-- END\ entry:loop -->
						</ul><!-- END\ entry:veil --><!-- END\ category:loop --><!-- BEGIN\ categoryLi#rear -->
					</div><!-- END\ categoryLi#rear --><!-- BEGIN\ categoryUl#rear -->
				</div><!-- END\ categoryUl#rear --><!-- END\ categoryEntryList:loop -->
			</div>
			<!-- END_MODULE\ Category_EntryList -->
		</li>
		<!-- END archive:loop -->
	</ul>
</div>
<!-- END_MODULE Entry_ArchiveList -->

今回この記事にあるソース、スクリーンショットで見せているデモでは下記のようなCSSを当てています。

<style>
	.p-event-list {
		margin-top: 10px;
		margin-bottom: 40px;
		padding: 5px 10px 20px;
		border-radius: 5px;
		border: 2px solid #DDD;
	}

	h2 {
		margin: 20px 0 40px;
		color: #70bbd4;
	}

	h3 {
		display: inline;
		position: relative;
		top: -20px;
		margin: 0 0 15px;
		padding: 5px 15px;
		background: #FFF;
	}
</style>