如题：客户提出这样一个奇怪的需求。

自动获取网页内容中的h2标签并添加到侧边栏作为定位，然后点击侧边栏的标题，右边的文章侧定位到对应的位置。

经过多次修改测试后，以下方法非常简单就实现了这个功能。

要是在WP上，不得又是各种插件才能实现。

第一步：

给新闻详情加上class类：例如我给详情添加了new-pages来作为唯一标识。

如：

<div class="content new-pages fs-14 fs-sm-16 lh-2 mb-3" >
              新闻详情内容
 </div>

然后在侧边栏添加：

 <div class="nav ">          
                <div id="outputnav" class="nav-left-menu mb-2"></div>
           </div>

用于接收输出获取到的H2标题。

然后使用JS如下：

document.addEventListener("DOMContentLoaded", function () {
  const content = document.querySelector('.new-pages'); // 固定容器
  const tocContainer = document.getElementById('outputnav');

  if (!content || !tocContainer) return;

  // 递归查找 .new-pages 中的所有 h2（不管嵌套在哪个 div 中）
  const headings = content.querySelectorAll('h2');

  headings.forEach((heading, index) => {
    const anchorId = 'page' + (index + 1);

    // 避免重复添加锚点
    if (document.getElementById(anchorId)) return;

    // 创建锚点偏移
    const offsetDiv = document.createElement('div');
    offsetDiv.className = 'anchor-offset';
    offsetDiv.id = anchorId;
    heading.parentNode.insertBefore(offsetDiv, heading); // 插入到 h2 前面

    // 创建目录链接
    const link = document.createElement('a');
    link.href = '#' + anchorId;
    link.className = 'toc-link';
    link.innerHTML = `
      <div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div>
      <div class="name">${heading.textContent.trim()}</div>
    `;

    tocContainer.appendChild(link);
  });
});

JS的作用就是：

1：递归查找H2标签，并获取到他的标题，存入到：outputnav中，

2：添加A标签，链接为：#page1, #page2,#page3等，同时添加：toc-link

最终形成：

<div class="nav ">          
                <div id="outputnav" class="nav-left-menu mb-2">
                <a href="#page1" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">标题1</div></a>
                <a href="#page2" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">标题2</div></a>
                <a href="#page3" class="toc-link"><div class="i"><i class="bi bi-info-circle-fill fs-12"></i></div><div class="name">标题3</div></a>
              </div>             
  </div>

3：给文章中添加偏移锚点：

<div class="anchor-offset" id="pageID号"></div>

最后稍微写一下样式就可以了。

.anchor-offset {
    display: block;
    position: relative;
    top: -80px;
    height: 0;
    visibility: hidden;
}
.nav-left-menu .toc-link{
   display: flex;
   margin-bottom: 15px;
    font-size: 16px;
}

.nav-left-menu .toc-link .i{
  width:20px;
}

.nav-left-menu .toc-link .i i{
   transform: scale(1.5);
}

.nav-left-menu .toc-link .name{
   width:calc(100% - 20px);
}