织梦自动目录列表功能如何实现？

• 工作流程：
  1. 你在编辑文章时,将文章的各个章节标题用 <h2>, <h3> 等标签进行格式化。
  2. 的某个位置（通常是开头）插入一个特定的织梦标签，{dede:field.body/} 或 [field:body /]。
  3. 当文章被前台调用时,织梦系统会解析 {dede:field.body/} 这个标签。
  4. 如果系统配置开启此功能,它会扫描 {dede:field.body/} 所包含的内容，找到所有使用了 <h> 标签的文本。
  5. 自动将这些 <h> 标签的文本提取出来，生成一个无序列表（<ul>）。
  6. 为每个 <h> 标签添加一个锚点（<a name="..."> 或 id="..."），使目录列表中的链接可以正确跳转到文章的对应位置。

配置步骤

步骤 1：后台全局设置（开启功能）

这是最关键的一步,如果没开启，前台将无法生成目录。

1. 登录织梦CMS后台。
2. 在左侧菜单栏中,找到并点击 “系统” -> “系统基本参数”。
3. 在打开的页面中,切换到 “核心设置” 选项卡。
4. 找到 “是否启用自动目录列表” 这个选项。
5. 将其值设置为 “是”。
6. 点击页面底部的 “确定” 按钮保存设置。

注意：这个设置是全局性的，意味着所有开启了此功能的文章都会自动生成目录。

步骤 2：在文章编辑器中实现

有两种主要方法可以实现目录,一种是简单方法，另一种是更灵活的方法。

使用 [toc] 短标签（推荐，更灵活）

这是织梦后期版本中一个非常方便的功能。

1. 编辑文章：在后台进入“所有文档”或“添加文档”页面，打开文章编辑器。
2. ：在文章内容中，将你的章节标题用“标题”工具栏中的 H2, H3, H4 等格式进行设置。
   • • <h2>第一章：织梦CMS介绍</h2>
     • <h3>1.1 什么是织梦CMS</h3>
     • <h3>1.2 织梦的特点</h3>
     • <h2>第二章：安装指南</h2>
3. 插入目录标签：在你希望目录出现的位置（通常是文章开头），直接输入短标签 [toc]。
4. 更新或保存文章。
5. 前台查看效果：访问这篇文章的前台页面，你会在 [toc] 标签的位置看到一个自动生成的、带有锚点链接的目录列表。

优点：

• 简单直接,只需输入 [toc]。
• 位置可以随意放置。
• 目录的样式可以通过CSS进行自定义。

修改文章模板（传统方法）

如果你使用的模板没有集成 [toc] 功能，或者你希望所有文章都自动在固定位置显示目录，可以修改文章内容页模板。

1. 找到模板文件：在后台，进入 “模板” -> “默认模板管理”。
2. 找到并点击 页模板” (通常是 article_article.htm)。
3. 编辑模板：打开这个模板文件，找到输出文章正文的代码，它通常是 {dede:field.body/}。
4. 添加目录代码：在 {dede:field.body/} 的前面或后面，插入以下代码：

   {dede:field name='body' runphp='yes'}
       if(@me['showtoc']){
           @me = "<div id='toc'>".$this->GetAutoCatid()."</div>".@me;
       }
   {/dede:field}

   • 代码解释：
     • if(@me['showtoc'])：这是一个判断条件，表示只有当文章的 showtoc 字段为真时才执行，这是一种更严谨的做法，可以避免所有文章都强制生成目录。
     • $this->GetAutoCatid()：这是织梦调用自动目录的核心函数。
     • <div id='toc'>...</div>：将生成的目录包裹在一个 div 中，方便你用CSS来控制样式和位置。
5. 保存模板：修改后，点击“保存”。
6. 更新HTML：为了使修改生效，你需要更新网站HTML，进入 “生成” -> “更新HTML”，选择“所有文档”并执行。

自定义目录样式（CSS）

自动生成的目录通常会有一些默认样式,但你可能希望让它更美观，你可以通过CSS来轻松实现。

1. 找到CSS文件：通常位于 /templets/你的模板名/style/ 目录下，文件名可能是 style.css, main.css 等。
2. 添加CSS代码：在CSS文件中添加以下样式规则来控制目录的外观。

示例CSS代码：

/* 目录容器样式 */
#toc {
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}
样式 */
#toc h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
/* 目录列表样式 */
#toc ul {
    list-style-type: none; /* 去掉默认的圆点 */
    padding-left: 20px;
    margin: 0;
}
#toc li {
    margin-bottom: 5px;
}
/* 目录链接样式 */
#toc a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}
#toc a:hover {
    color: #007bff; /* 鼠标悬停时的颜色 */
}
/* 当前所在章节的链接样式（如果支持） */
#toc .toc-active {
    font-weight: bold;
    color: #007bff;
}

将上述代码添加到你的CSS文件中,然后刷新前台页面，你就能看到目录样式的变化了。

常见问题与解决方法

1. 问题：目录没有生成。

   • 检查1：后台“系统基本参数”中的“是否启用自动目录列表”是否设置为“是”。
   • 检查2：文章中的章节标题是否正确使用了 <h2>, <h3> 等标签，而不是手动加粗或改变字体大小。
   • 检查3：你是否在正确位置插入了 [toc] 标签或修改了模板？

2. 问题：目录生成了，但点击链接无法跳转。

   • 原因：这通常是模板问题，织梦在生成文章时，需要将 <h2>标签</h2> 转换成 <h2><a name="锚点ID"></a>标签</h2> 的格式。
   • 解决：检查你的文章内容页模板 (article_article.htm) 中，调用文章正文的代码 {dede:field.body/} 是否被其他标签错误地包裹或修改了，确保它能被系统正常解析。

3. 问题：目录样式很丑，想自定义。

   • 解决：如第三部分所述，通过添加自定义CSS来覆盖默认样式，使用浏览器开发者工具（F12）可以很方便地找到目录对应的HTML结构，从而精准地添加CSS样式。

织梦的自动目录列表功能是一个很实用的SEO和用户体验优化工具,掌握它的关键在于：

1. 后台全局设置：开启总开关。
2. 内容编辑：用 <h> 标签格式化章节标题。
3. 调用方式：在模板中用 [toc] 短标签或 $this->GetAutoCatid() 函数来生成目录。
4. 美化样式：通过CSS进行个性化定制。

希望这个详细的指南能帮助你成功地在织梦网站上实现自动目录列表功能！