[Shopify]コピペで簡単設置♪ブログに目次ブロックを追加（Dawn）50/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

ようやくDawnの100本ノックシリーズが５０記事になりました♪

今回はブログ記事の中に目次をつけたいと思って、目次セクションを作ってみました。H2とH3が反映される目次にしています。

対象テーマ：Dawn

コードの解説記事ではないのでご了承ください。

✔️今回のゴール

本文内のH2とH３を自動で表示します。

目次タイトルをクリックすると折りたためる

デモページ（PW：stahsk40jw1Mf）

Malin's 100

✔️CMSの特徴

変えれるところ
・目次のタイトル
・目次の背景カラー

✔️設置方法

Step1  Sectionファイル内のmain-article.liquidを探す

既存ファイル「main-article.liquid」を編集していきます。

Step２　Schemaに目次ブロックを追加

◆下記のSchemaをコピペ

{
      "type": "toc",
      "name": "目次",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "タイトル",
          "default": "Table of Contents"
        },
        {
          "type": "color",
          "id": "color_bk",
          "label": "◆背景カラー",
          "default": "#ECECE6"
        }
      ]
    }

Step3 　目次SchemaをHTMLに反映

Shareの下あたりに入れました。caseの間ならどこでも。

{%- when 'toc' -%}
          <div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
            <div class="toc_container" style="background-color: {{ block.settings.color_bk }};">
              <details id="toc" open>
                <summary class="toc-title">{{ block.settings.heading }}</summary>
              </details>
            </div>
          </div>

Step4 　{%- when 'content'-%}のところを差し替え

下記を探して、

{%- when 'content'-%}

下記を

<div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
              {{ article.content }}
</div>

これで囲む

<div class="post-body"></div>

Step5　JSを好きなところに追記

<script>
    (function(window, document) {
      const toc = document.getElementById('toc');
      const selector = document.querySelector('.post-body'); // 処理対象セレクタ
      if (!toc || !selector) {
        return
      }
      const list = document.createElement('ul');
      list.className = 'toc-container';
      toc.appendChild(list);
    
      const headings = selector.querySelectorAll('h2, h3'); // 対象見出しタグ
      const order = [];
      const stack = [{level: 1, element: list}];
    
      // 事前処理
      headings.forEach((heading) => {
        const level = parseInt(heading.tagName.substring(1))
        order.push(level);
      });
    
      headings.forEach((heading, i) => {
        const level = parseInt(heading.tagName.substring(1));
        const next = order[i + 1];
        const li = document.createElement('li');
        const a = document.createElement('a');
        const id = 'toc-' + (i + 1);
        const ul = document.createElement('ul');
    
        // 目次要素の生成
        a.textContent = heading.textContent;
        a.href = `#${id}`;
        li.appendChild(a);
        if (level < next) {
          li.appendChild(ul);
        }
    
        // リンク先の生成
        heading.id = id;
    
        // 階層構造の生成
        let parent;
        do {
          parent = stack.pop();
        } while (parent.level >= level);
        parent.element.appendChild(li);
        stack.push(parent);
        stack.push({level: level, element: ul});
      });
    }(window, document));
    </script>

参照元：
https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html

この辺りで一度、CMSで確認。

目次が追加されているので好きなところに挿入。

あとはお好みでレイアウト整えて下さい♪

一応、デモページ

Step６　CSSでレイアウト整える

下記のCSSを<article class="article-template">の上あたりにコピペ。

レイアウト崩れていたりCSSはお好みで変更して下さい。