BASEでカテゴリー一覧を表示する方法

BASE(ベイス)でカテゴリー一覧を表示する際の方法と注意点をまとめました。

前提として、公式資料であるBASE Developersより、カテゴリーは以下の名称がついています。

３階層あるカテゴリの各階層について、上位階層の方から順に 大カテゴリ > 中カテゴリ > 小カテゴリ という名称を用いています。
また、ある階層における一つ下の階層を子カテゴリと呼びます。大カテゴリの子カテゴリは中カテゴリ、中カテゴリの子カテゴリは小カテゴリとなります。

そして一つ。ナビゲーション内では第二階層（中カテゴリ）までしか表示されません。

BASEでは、ナビゲーション内では第二階層（中カテゴリ）までしか表示させない前提の設計となっております。

つまり、プルダウンなどで表示できるのは第二階層までとなります。
これらを踏まえてコードを確認して下さい。

コードはこちら

html

{block:AppsItemCategory}
    <ul class="category">
    {block:AppsItemCategoryCategories}
        <!-- 大カテゴリのループ -->
        <li class="category__item"><a href="{AppsItemCategoryCategoryPageURL}">{AppsItemCategoryCategoryName}</a>
            <ul class="category category--medium">
            {block:AppsItemCategoryMediumCategories}
                <!-- 中カテゴリのループ -->
                <li class="category__item"><a href="{AppsItemCategoryMediumCategoryPageURL}">{AppsItemCategoryMediumCategoryName}</a></li>
            {/block:AppsItemCategoryMediumCategories}
            </ul>
        </li>
    {/block:AppsItemCategoryCategories}
    </ul>
{/block:AppsItemCategory}

カテゴリーページで良く使われるパンくずリストの記載方法はこちら

html

{block:AppsItemCategory}
{block:IndexPageCategory}
    <!-- カテゴリ名をページの見出しとして表示 -->
    <h2 class="categoryTitle01">{IndexPageCategory}</h2>
    {block:HasAppsItemCategoryChildCategories}
        <!-- 子カテゴリの一覧を表示 -->
        <ul>
            {block:AppsItemCategoryChildCategories}
                <li><a href="{AppsItemCategoryChildCategoryPageURL}">{AppsItemCategoryChildCategoryName}</a></li>
            {/block:AppsItemCategoryChildCategories}
        </ul>
    {/block:HasAppsItemCategoryChildCategories}
{/block:IndexPageCategory}
{/block:AppsItemCategory}

カテゴリー関連の資料は公式からの情報で網羅されている印象です。