見出し画像

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

まりん | Shopifyフロントエンジニア+SNSマーケティング

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

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

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

対象テーマ:Dawn

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

✔️今回のゴール

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

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

デモページ(PW:stahsk40jw1Mf)


✔️CMSの特徴

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

✔️設置方法

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

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

Step2 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で確認。

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


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

一応、デモページ

Step6 CSSでレイアウト整える

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

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

この続きをみるには

この続き: 14,650文字
記事を購入する

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

まりん | Shopifyフロントエンジニア+SNSマーケティング

800円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
まりん | Shopifyフロントエンジニア+SNSマーケティング
国内外にてShopifyでECサイトを構築★EC構築実績:ファッション|食材|サニタリーなど★ また、EC繋がりでSNSマーケティング、PythonでTwitter BotやInsta Bot作ってSNS集客したり、データ分析もしています♪