Chirpy主题page布局启用ToC失败，求解决方案

我想在Chirpy主题的page布局中启用ToC（目录），实现和post布局一致的效果，使用的是修改版的Chirpy模板。

已完成的修改：

1. 修改_layouts/page.html，代码如下：

---
layout: default
refactor: true
panel_includes:
  - toc
---

{% include lang.html %}

{% include toc-status.html %}

<article class="px-1" data-toc="{{ enable_toc }}">
  {% if page.layout == 'page' or page.collection == 'pages' %}
    {% assign page_key = page.title | downcase %}
    {% assign title = site.data.locales[lang].pages[page_key] | default: page.title %}
    <header>
      <h1>
        {{ title }}
      </h1>
      {% if page.description %}
      <blockquote class="prompt-info">{{ page.description }}</blockquote>
      {% endif %}
    </header>

  {% if enable_toc %}
    <div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
      <span class="label text-truncate">{{ page.title }}</span>
      <button type="button" class="toc-trigger btn me-1">
        <i class="fa-solid fa-list-ul fa-fw"></i>
      </button>
    </div>

    <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
      <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
      <i class="fa-solid fa-angle-right fa-fw"></i>
    </button>

    <dialog id="toc-popup" class="p-0">
      <div class="header d-flex flex-row align-items-center justify-content-between">
        <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
        <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
          <i class="fas fa-close"></i>
        </button>
      </div>
      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
    </dialog>
  {% endif %}

    <div class="content" style="text-align: justify;">
      {{ content }}
    </div>
  {% else %}
    {{ content }}
  {% endif %}
    <!-- lastmod date -->
    <!-- pageviews -->
</article>

2. 在测试页面_pages/about.md中添加toc: true配置：

---
layout: page
title: About
permalink: /about/
toc: true
---

# H1 

## H2

### H3 

但ToC仍然没有显示，求解决方法。

1. 修正toc-status.html的逻辑适配page布局 #

Chirpy主题的_includes/toc-status.html默认可能只针对post布局设置enable_toc变量，需要修改它让其识别page页面的toc: true配置：

{% comment %} 决定是否显示目录 {% endcomment %}
{% assign enable_toc = false %}
{% if page.toc %}
  {% if page.layout == 'post' or page.layout == 'page' %} <!-- 添加page布局判断 -->
    {% assign enable_toc = true %}
  {% endif %}
{% endif %}

如果原文件中有检查文章字数的条件，可按需调整，确保page页面不受字数限制影响ToC显示。

2. 修复page.html中的逻辑结构错误 #

你当前的page.html存在代码嵌套错误：{% if enable_toc %}的代码块被包含在page.layout == 'page'的条件内，但后续的{% else %}会错误覆盖内容渲染逻辑。调整后的正确结构如下：

---
layout: default
refactor: true
panel_includes:
  - toc
---

{% include lang.html %}
{% include toc-status.html %}

<article class="px-1" data-toc="{{ enable_toc }}">
  {% if page.layout == 'page' or page.collection == 'pages' %}
    {% assign page_key = page.title | downcase %}
    {% assign title = site.data.locales[lang].pages[page_key] | default: page.title %}
    <header>
      <h1>{{ title }}</h1>
      {% if page.description %}
        <blockquote class="prompt-info">{{ page.description }}</blockquote>
      {% endif %}
    </header>

    {% if enable_toc %}
      <div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
        <span class="label text-truncate">{{ page.title }}</span>
        <button type="button" class="toc-trigger btn me-1">
          <i class="fa-solid fa-list-ul fa-fw"></i>
        </button>
      </div>

      <button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
        <span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
        <i class="fa-solid fa-angle-right fa-fw"></i>
      </button>

      <dialog id="toc-popup" class="p-0">
        <div class="header d-flex flex-row align-items-center justify-content-between">
          <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
          <button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75">
            <i class="fas fa-close"></i>
          </button>
        </div>
        <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
      </dialog>
    {% endif %}

    <div class="content" style="text-align: justify;">
      {{ content }}
    </div>
  {% else %}
    {{ content }}
  {% endif %}
  <!-- lastmod date -->
  <!-- pageviews -->
</article>

3. 确认标题层级符合ToC生成规则 #

Chirpy默认只抓取h2到h4层级的标题生成ToC，h1作为页面主标题不会被纳入。可以调整测试页面的标题结构，或者修改_config.yml中的ToC配置：

toc:
  min_level: 2
  max_level: 4

确保配置的层级与页面中的标题匹配。

4. 清除缓存并重新构建站点 #

Jekyll可能缓存旧内容，执行以下命令强制重新构建：

bundle exec jekyll clean
bundle exec jekyll serve

5. 检查ToC相关JavaScript是否加载 #

Chirpy的ToC通过JS动态生成，需确保_layouts/default.html中包含了assets/js/toc.js等相关脚本，若修改版主题移除了这部分，需重新添加。

内容的提问来源于stack exchange，提问作者raf