ヘルプセンターテーマにサブセクションを表示する方法

柔軟な階層を使用すると、ヘルプセンターのナレッジベースのセクション内にサブセクションを追加することができます。サブセクションを追加することで、ナレッジベースに最大6レベルの階層を作成することができます。

メモ：2019年3月29日以前にカスタマイズしたテーマを使用する場合、ヘルプセンターにサブセクションを追加する前に、カスタムのテーマにコードを追加してサブセクションを有効にする必要があります（「ヘルプセンターテーマのサブセクションを有効化する」を参照してください）。

標準的なCopenhagenテーマのセクションページテンプレートは、デフォルトで、各セクションにサブセクションのリストを表示します。テーマのコードを編集することで、他のページテンプレートを使用してサブセクションを表示したり、サブセクションリストの外観を変更したりすることができます。

セクションの直接のサブセクションのみを表示することができます。複数レベルのサブセクションを表示することはできません。

この記事では、次の例について説明します。

• カテゴリページにサブセクションを表示する
• セクションとサブセクションをブロックとして表示する

カテゴリページにサブセクションを表示する

Copenhagenテーマのカテゴリページテンプレートは、デフォルトでは、各セクションのサブセクションを表示しません。テンプレートを編集することで、各セクションの記事の下にサブセクションを表示させることができます。

カテゴリページテンプレートをカスタマイズするには

カテゴリページテンプレートで、以下のコードブロックを

の終了タグの前に挿入します。

{{#if sections}}
  <ul class="section-list">
    {{#each sections}}
      <li class="section-list-item">
        <a href="{{url}}">
          <span>{{name}}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            focusable="false"
            viewBox="0 0 16 16"
            aria-hidden="true"
          >
            <path
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-width="2"
              d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"
            ></path>
          </svg>
        </a>
      </li>
    {{/each}}
  </ul>
{{/if}}

セクションとサブセクションをブロックとして表示する

Copenhagenテーマのカテゴリページテンプレートをカスタマイズすることで、セクションをブロックとして表示させることができます。

同様に、セクションページテンプレートをカスタマイズして、サブセクションをブロックとして表示させることができます。

カテゴリページテンプレートをカスタマイズするには

カテゴリページテンプレートで、

タグとタグで囲んだコードを以下のスニペットで置き換えます。

<section class="categories blocks">
  <ul class="blocks-list">
      {{#each sections}}
      <li class="blocks-item">
            <a href='{{url}}' class="blocks-item-link">
              <h4 class="blocks-item-title">{{name}}</h4>
              <p class="blocks-item-description">{{excerpt description}}</p>
            </a>
      </li>
      {{/each}}
  </ul>
</section>

セクションページテンプレートをカスタマイズするには

セクションページテンプレートで、{{#if section.sections}}>のコードブロックとブロック内のコードを以下のスニペットで置き換えます。

{{#if section.sections}}
  <section class="sections blocks">
    <ul class="blocks-list">
      {{#each section.sections}}
        <li class="blocks-item">
          <a href="{{url}}" class="blocks-item-link">
            <h4 class="blocks-item-title">{{name}}</h4>
            <p class="blocks-item-description">{{excerpt description}}</p>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}