如何遍历文章中的H1、H2标签生成导航栏

方法一：纯Liquid手动提取标题（无需额外插件） #

这种方式完全依托Jekyll自带的Liquid语法实现，逻辑和你给出的minima遍历文章的思路一致。

1. 创建目录片段文件
   在项目的_includes文件夹下新建post-toc.html文件，写入以下代码：

{% capture toc_content %}
  {% assign heading_chunks = page.content | split: '<h' %}
  <ul class="article-nav">
    {% for chunk in heading_chunks %}
      {% if chunk contains '1>' or chunk contains '2>' %}
        {% assign heading_level = chunk | slice: 0, 1 %}
        {% assign heading_text = chunk | split: '>' | shift | split: '</h' | first | strip_html %}
        {% assign heading_id = chunk | split: 'id="' | shift | split: '"' | first %}
        <!-- 若标题无自动生成ID，用标题文本转slug作为ID -->
        {% unless heading_id %}
          {% assign heading_id = heading_text | slugify %}
        {% endunless %}
        <li class="nav-item level-{{ heading_level }}">
          <a href="#{{ heading_id }}" 
             {% if page.url contains heading_id %}class="active"{% endif %}>
            {{ heading_text }}
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endcapture %}
{{ toc_content }}

2. 在导航区域引入该片段
   找到需要放置标题导航的模板文件（比如文章模板_layouts/post.html的侧边栏/顶部导航区），添加代码：

{% include post-toc.html %}

方法二：使用Jekyll官方推荐的jekyll-toc插件（更简洁） #

如果不想手动写Liquid逻辑，可借助官方维护的目录插件：

1. 安装并配置插件

• 在项目根目录的Gemfile中添加：

  gem 'jekyll-toc'
  

• 在_config.yml中启用插件并设置参数：

  plugins:
    - jekyll-toc
  toc:
    min_level: 1  # 提取H1及以上
    max_level: 2  # 提取到H2为止
    list_class: 'article-nav'  # 自定义导航列表类名
  

2. 在模板中插入目录
   直接在目标位置添加：

{% toc %}

若要给当前锚点对应的导航项加active类，可结合页面URL的锚点参数用Liquid判断：

{% capture toc %}
  {% toc %}
{% endcapture %}
{{ toc | replace: '<a href="#', '<a href="#' | replace: '">', '" {% if page.url contains "#' | append: '" %}class="active"{% endif %}>' }}

关键注意点 #

• 确保标题有唯一ID：使用Jekyll默认的kramdown渲染器时，会自动给所有标题生成唯一ID，无需手动添加。
• 动态切换active类：上述Liquid逻辑仅能判断页面URL中的锚点参数，若需滚动页面时自动切换active状态，可配合小段JavaScript实现（监听滚动事件，判断当前可见标题，给对应导航项加类）。

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