帝国CMS如何根据h1/h2/h3自动生成目录结构？前端优化技巧

帝国CMS可通过标签调用和JS解析自动生成文章目录，提升阅读体验：

方法一：内置标签生成

html

[e:loop={"select * from [!db.pre!]ecms_article where id='$GLOBALS[navclassid]'",1,24,0}] <div class="article-content"><?=$ecms_loop['content']?></div> <div class="toc"> <?=GetToc($ecms_loop['content'])?> </div> [/e:loop]

说明：

GetToc()为帝国CMS内置函数，需内容包含<h2>/<h3>标签。
缺点：仅支持简单HTML结构，无法自定义样式。

方法二：前端JS动态生成

优化技巧：

锚点平滑滚动：
```
 
```
css

html { scroll-behavior: smooth; }
目录吸顶效果：
```
 
```
css

.toc { position: sticky; top: 20px; }
懒加载目录：
```
 
```
javascript

document.addEventListener('DOMContentLoaded', () => { const headings = document.querySelectorAll('h2, h3'); const toc = document.createElement('div'); headings.forEach(h => { toc.innerHTML += `<a href="#${h.id}">${h.textContent}</a>`; }); document.body.appendChild(toc); });