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

内容目录是根据博客/新闻详情里的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';


    headings.forEach(heading => {
      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(heading.tagName[1], 10);
      const fontWeight = heading.tagName === 'H2' ? 'bold' : 'normal';


      li.innerHTML = `<a href="#${id}" style="margin-left: ${tagLevel * 5}px; font-weight: ${fontWeight};">
        ${heading.textContent}
      </a>`;


      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: 800px;
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标签，将不会生成内容目录