dede文章目录形式如何实现？-DEDE建站-盈思创科技

不直接使用文章的默认字段，而是创建一个专门的“目录”模型，将目录内容作为独立的条目来管理，然后通过关联或列表的方式在前台展示。

（图片来源网络，侵删）

下面我将分步介绍几种常见的目录形式及其实现方法。

最简单的纯文本目录

这种目录就是一个静态的文本列表,通常放在文章内容的最前面，不包含任何链接，实现起来最简单。

适用场景：章节划分非常规整，不需要点击跳转，只是作为内容结构展示。

实现方法：

（图片来源网络，侵删）

手动添加：在后台编辑文章时，直接在文章内容的开头，手动输入目录文本，

【文章目录】
一、引言
二、项目背景
三、技术实现
&nbsp;&nbsp;&nbsp;&nbsp;3.1 前端框架
&nbsp;&nbsp;&nbsp;&nbsp;3.2 后端服务
四、总结

使用编辑器功能：一些富文本编辑器（如百度编辑器）支持“插入目录”功能，可以自动根据文章的标题样式生成目录，但通常也是静态文本。

优点：

极其简单,无需任何额外设置。
对服务器和数据库无额外负担。

缺点：

（图片来源网络，侵删）

不灵活,每次修改目录都需要手动编辑文章。
无法实现点击跳转。

带锚点链接的动态目录（最常用）

这是最主流、最实用的目录形式，目录中的每一项都指向文章内部对应章节的锚点，用户点击后可以快速跳转。

实现方法：这种方法结合了后台设置和前台模板修改。

第一步：后台设置（为文章添加锚点）

DedeCMS 默认的文章内容（body 字段）在保存时，如果检测到类似 <h1>, <h2>, <h3> 这样的标题标签，会自动为其添加 id 属性作为锚点。

编辑文章时使用标准标题：在撰写文章时，不要手动输入标题，而是要使用编辑器工具栏上的按钮（H1, H2, H3）来设置章节标题。
- 将“一、引言”设置为 H2 标题。
- 将“3.1 前端框架”设置为 H3 标签。
确保自动添加锚点功能开启：这个功能通常是默认开启的，如果不确定，可以检查 DedeCMS 的系统设置，但一般情况下无需修改，当你保存文章后，查看文章源代码，你会发现类似 <h2 id="t_1">一、引言</h2> 的代码。

第二步：前台模板修改（自动提取并生成目录）

这是最关键的一步,我们需要修改文章内容页模板 (article_article.htm)，让它在显示文章内容的同时，自动提取出所有标题并生成一个目录列表。

打开模板文件：在后台的【模板】->【默认模板管理】中，找到并打开 article_article.htm 文件。

添加目录生成代码：在 {dede:field.body/} 标签之前或之后，添加以下 PHP 代码，这段代码会使用正则表达式匹配文章内容中的所有 H2, H3 标签，并提取其 id 和文本内容，最终生成一个带链接的目录列表。

{dede:field.body runphp='yes'}
$content = @me;
// 定义目录的HTML样式
$catalog = '<div class="article-catalog"><strong>文章目录</strong><ul>';
// 使用正则表达式匹配所有H2和H3标签
// <h2[^>]*id="([^"]*)">([^<]*)</h2>
// <h3[^>]*id="([^"]*)">([^<]*)</h3>
if (preg_match_all('/<h([23])[^>]*id="([^"]*)">([^<]*)<\/h\\1>/i', $content, $matches)) {
    $h_level = $matches[1]; // 标签级别 (2 or 3)
    $h_ids = $matches[2];   // 标签ID
    $h_titles = $matches[3]; // 标题文本
    for ($i = 0; $i < count($h_ids); $i++) {
        $level = $h_level[$i];
        $id = $h_ids[$i];
        $title = $h_titles[$i];
        // 根据标题级别决定缩进
        $indent = ($level == '3') ? '&nbsp;&nbsp;&nbsp;&nbsp;' : '';
        // 生成目录项
        $catalog .= '<li>' . $indent . '<a href="#' . $id . '" title="' . $title . '">' . $title . '</a></li>';
    }
}
$catalog .= '</ul></div>';
// 将目录插入到文章内容的最前面
@me = $catalog . $content;
{/dede:field.body}

添加CSS样式：为了让目录看起来更美观，你需要在模板的CSS文件中（通常是 style/dedecms.css）或直接在 <head> 标签内添加一些样式。

.article-catalog {
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    float: right; /* 可选：让目录浮动在右侧 */
    width: 250px; /* 可选：固定宽度 */
    margin-right: 0; /* 配合float使用 */
    margin-left: 20px; /* 配合float使用，与内容隔开 */
}
.article-catalog strong {
    display: block;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.article-catalog ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.article-catalog li {
    line-height: 1.8;
}
.article-catalog a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}
.article-catalog a:hover {
    color: #0066cc;
    text-decoration: underline;
}

优点：

自动化：只需按规范写文章，目录自动生成，非常方便。
用户体验好：读者可以快速导航，提升阅读体验。
SEO友好：清晰的页面结构有助于搜索引擎理解文章层次。

缺点：

需要修改模板文件,对新手有一定门槛。
依赖文章内容的HTML标签结构,如果手动写 <h2> 标签忘记加 id，则目录项会失效。

使用自定义模型创建独立目录

这种方法最为强大和灵活,特别适合书籍、文档、教程等结构化非常强的内容，目录和文章内容完全分离，管理起来非常清晰。

适用场景：需要为多篇文章生成一个统一、可管理的目录，或者目录结构非常复杂，需要独立编辑。

实现方法：

创建自定义模型：
- 进入后台【核心】->【内容模型管理】->【增加一个内容模型】。
- 模型名称：文档目录”。
- 表前缀：dede_archives_（保持默认即可）。
- 字段列表：添加必要的字段，如 catalog_name (目录名称), catalog_link (链接地址，可以是本站文章链接或外部链接), catalog_order (排序权重)。
添加自定义字段：
- 在新创建的模型中,进入【字段管理】，添加字段。
- 字段名：catalog_name，字段类型：单行文本，字段说明：目录项名称。
- 字段名：catalog_link，字段类型：页面跳转，字段说明：链接地址，这个类型可以让你选择本站的文章或输入外部URL。
- 字段名：catalog_order，字段类型：数字，字段说明：显示顺序。
创建目录文档：
- 在后台【新增内容】，选择你刚创建的“文档目录”模型。
- 填写目录项,你可以创建一个名为“《DedeCMS开发指南》目录”的文档，然后在自定义字段中添加多个目录项：
  - catalog_name: "第一章：环境搭建"
  - catalog_link: "选择或输入第一章文章的URL"
  - catalog_order: 1
  - catalog_name: "第二章：模板开发"
  - catalog_link: "选择或输入第二章文章的URL"
  - catalog_order: 2
- 保存文档。

前台调用目录：

创建一个专门用于展示目录的模板文件,catalog_list.htm。
在模板中使用 {dede:list} 或 {dedarclist} 标签来调用这个“文档目录”模型下的所有内容，并按 catalog_order 排序。

<!-- catalog_list.htm -->
<div class="book-catalog">
    <h2>{dede:field.title/}</h2>
    <ul>
        {dede:list pagesize='20' orderby='catalog_order'}
            <li><a href="[field:catalog_link/]" title="[field:catalog_name/]">[field:catalog_name/]</a></li>
        {/dede:list}
    </ul>
</div>

优点：

结构清晰：目录与内容完全分离，管理独立。
灵活性极高：可以添加任意自定义字段（如描述、图片等），实现图文并茂的目录。
可复用：一个目录模型可以为多个“书籍”或“专题”服务。

缺点：

设置过程最复杂,需要理解 DedeCMS 的自定义模型机制。
的关联需要手动维护,当文章地址变更时，需要同步更新目录中的链接。

总结与推荐

目录形式	实现复杂度	灵活性	适用场景	推荐指数
纯文本目录	★☆☆☆☆	★☆☆☆☆	简单的章节划分，无需跳转	★☆☆☆☆
带锚点链接的动态目录	★★★☆☆	★★★★☆	绝大多数文章、博客、教程	★★★★★
自定义模型独立目录	★★★★★	★★★★★	书籍、文档、专题、复杂导航结构	★★★★☆

对于绝大多数 DedeCMS 用户，我强烈推荐使用【形式二：带锚点链接的动态目录】，它在实现难度和功能实用性之间取得了最佳平衡，能够满足大部分网站的需求，并且对SEO和用户体验都有显著提升。

dede文章目录形式如何实现？

最简单的纯文本目录

带锚点链接的动态目录（最常用）

第一步：后台设置（为文章添加锚点）

第二步：前台模板修改（自动提取并生成目录）

使用自定义模型创建独立目录

总结与推荐

相关文章

目录[+]