如图，博客/新闻详情里如何插入内容目录，提升阅读体验？

内容目录是根据博客/新闻详情里的H2,H3标签自动生成的，所以在上传博客/新闻时，需要标示出H2,H3体现出内容层级，不仅可以自动生成内容目录，还有利于SEO的结构优化，操作步骤如下：

第一步：上传博客/新闻时突出H2,H3标题

1.在高级编辑里编辑选择标题组件，如图：

2.输入标题文字，并全选输入的文字，如图：

3.点击H编辑框，并选择H2标签，如图：

4.这样H2标签就设置好了，H3标签的设置方式在H编辑框下选择H3就可以了，设置H3标签时，可选择更多其他组件，把对应的标题设置成H3即可，如图：

只要在上传博客/新闻时，有明确层级的H2，H3标签，目录就可以自动生成。接下来我们加入js脚本和目录样式.

第二步：添加插件脚本

1.添加js脚本，点击插件配置-添加插件，如图：

2.插件配置如下：

3.在插件代码框输入以下代码并保存：

<script>
  function generateTOC() {
    const allHeadings = document.querySelectorAll('.detail-content h2, .detail-content h3');


    // Filter out headings with empty text
    const headings = Array.from(allHeadings).filter(h => h.textContent.trim() !== '');


    // Only proceed if there are valid headings
    if (headings.length === 0) return;


    // Create and insert TOC container
    const tocContainer = document.createElement('div');
    tocContainer.id = 'toc-container';
    tocContainer.innerHTML = '<b class="tableContents">Table of Contents</b>';
    document.querySelector('.mod-content-detail .detail-content').before(tocContainer);


    const toc = document.createElement('ul');
    toc.style.listStyleType = 'none';


    let h2Count = 0;
    let h3Count = 0;


    headings.forEach(heading => {
      const tagName = heading.tagName;
      if (tagName === 'H2') {
        h2Count++;
        h3Count = 0; // reset h3 counter when a new h2 starts
      } else if (tagName === 'H3') {
        h3Count++;
      }


      const number = tagName === 'H2' ? `${h2Count}.` : `${h2Count}.${h3Count}.`;


      const id = heading.id || heading.textContent.toLowerCase().trim()
        .replace(/\s+/g, '-')      // Replace spaces with hyphens
        .replace(/[^\w\-]/g, '');  // Remove invalid characters


      heading.id = id;


      const li = document.createElement('li');
      const tagLevel = parseInt(tagName[1], 10);
      const fontWeight = tagName === 'H2' ? 'bold' : 'normal';


      const link = document.createElement('a');
      link.href = `#${id}`;
      link.style.marginLeft = `${tagLevel * 5}px`;
      link.style.fontWeight = fontWeight;
      link.textContent = `${number} ${heading.textContent}`;


      // Add custom scroll behavior
      link.addEventListener('click', function (e) {
        e.preventDefault();


        const nav = document.querySelector('.layout-nav.fixed');
        const navHeight = nav ? nav.offsetHeight : 0;


        const target = document.getElementById(id);
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;


        window.scrollTo({
          top: targetPosition - navHeight,
          behavior: 'smooth'
        });
      });


      li.appendChild(link);
      toc.appendChild(li);
    });


    tocContainer.appendChild(toc);
  }


  window.addEventListener('DOMContentLoaded', generateTOC);
</script>

4.添加内容目录样式，继续在插件配置里添加插件，插件配置如图：

5.将以下代码复制到代码框并保存：

<style>
#toc-container{background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 5px;
max-width: 100%;
margin-top:15px;
    padding: 10px;
    position:relative;}
#toc-container li {
    margin: 15px 0;
    line-height: 20px;
}
#toc-container a:hover{scale:1.03;}
.tableContents{    
    background: var(--main);
    display: block;
    padding: 10px 5px;
    color: #fff;}


</style>

大功告成，这样博客/新闻详情的内容目录就添加好了，系统会根据页面内容自动生成目录，如果页面内容里未包含H2,H3标签，将不会生成内容目录