织梦获取文章目录代码

使用织梦自带的 [catalog] 标签（最简单、最推荐）

这是织梦官方内置的功能，使用起来非常简单,无需修改任何代码。

适用场景页，通常放在文章内容的末尾。

代码示例模板（通常是 article_article.htm）中，您只需要在需要显示目录的地方插入以下标签即可：

{dede:catalog}

如何让目录生效？

仅仅插入标签是不够的，您还需要在编辑文章时，手动为需要生成目录的段落添加“锚点”。

操作步骤：

1. 登录织梦后台，进入“文章管理” -> “文档列表”。
2. 找到并编辑您需要添加目录的文章。
3. 在编辑器中,将光标定位到您希望生成目录标题的段落开头。
4. 点击编辑器工具栏上的 “插入/编辑锚点” 按钮（通常是一个锚点🔗图标）。
5. 在弹出的对话框中，为这个锚点起一个名字（section1、introduction 等），然后点击“确定”。
6. 重复此操作,为所有需要作为目录项的段落添加锚点。
7. 保存文章。

重要提示：

• 锚点名称必须是唯一的,不能在同一个文章中重复。
• 锚点名称最好使用英文、数字或下划线，避免使用中文和特殊符号,以确保兼容性。
• 添加了锚点的段落，会自动在文章内容中生成一个 <a name="锚点名称"></a> 的标签。

效果

当您在文章中添加了锚点并保存后，前台页面在 {dede:catalog} 标签的位置就会自动生成一个类似下面这样的目录列表：

<ul class="catalog">
    <li><a href="#section1">第一章：引言</a></li>
    <li><a href="#section2">第二章：技术实现</a></li>
    <li><a href="#section3">第三章：lt;/a></li>
</ul>

点击目录项,页面会平滑滚动到对应的章节。

使用自定义函数实现（更灵活、自动提取）

如果您不想在编辑文章时手动添加锚点，希望织梦能自动从文章标题中提取目录,那么就需要通过修改模板文件并引入自定义函数来实现。

实现原理

1. 模板中调用一个自定义函数。
2. 该函数会解析文章内容，查找符合规则的标题标签（如 <h2>, <h3>）。
3. 将找到的标题提取出来,并自动生成带有锚点的目录列表。

操作步骤

第一步：创建并上传自定义函数文件

1. 在您的织梦网站根目录下的 /include/extend.func.php 文件中（如果此文件不存在，请手动创建一个）,添加以下PHP代码：

/**
 * 自动从文章内容中提取目录
 * @param string $content 文章内容
 * @return string 生成的HTML目录
 */
function GetArticleCatalog($content) {
    // 匹配 H2, H3, H4 标签，您可以根据需要修改正则表达式
    // preg_match_all('/<h([2-4])[^>]*>(.*?)<\/h\\1>/i', $content, $matches);
    // 更精确的匹配，获取标签内的文本内容
    preg_match_all('/<h([2-4])[^>]*>(.*?)<\/h\\1>/i', $content, $matches);
    $catalog = '';
    if (isset($matches[2]) && is_array($matches[2])) {
        $catalog .= '<ul class="article-catalog">' . "\r\n";
        foreach ($matches[2] as $key => $title) {
            // 清理标题内容，移除可能存在的HTML标签
            $title_text = strip_tags($title);
            // 生成一个安全的锚点ID (将空格和特殊字符替换为连字符)
            $anchor_id = 'catalog-' . $key;
            $catalog .= '<li><a href="#' . $anchor_id . '" title="' . $title_text . '">' . $title_text . '</a></li>' . "\r\n";
            // 为了让目录能跳转，需要在原文的标题处添加锚点
            // 注意：这里直接修改$content字符串，可能会影响后续显示，所以更推荐在第二步处理
            $content = preg_replace('/(<h([2-4])[^>]*>)(.*?)(<\/h\\2>)/i', '$1<a name="' . $anchor_id . '" id="' . $anchor_id . '"></a>$3$4', $content, 1);
        }
        $catalog .= '</ul>' . "\r\n";
        // 将处理过的（带锚点的）内容替换掉原来的内容
        $GLOBALS['arcid'] = $content; // 这种方法比较hack，有风险
        // 更安全的方法是在调用此函数后，再输出处理后的内容
        // 但为了简化，这里我们采用一个更巧妙的方法，在模板中直接处理
    }
    // 返回目录HTML
    return $catalog;
}

注意：上面的函数只生成目录，不修改原文，一个更完整的方案是同时返回目录和修改后的内容，但为了模板清晰,我们采用分步处理。

（图片来源网络，侵删）

第二步：修改文章内容模板

1. 打开您的文章内容模板文件，通常是 /templets/default/article_article.htm。
2. {dede:field.body/} 的上方或下方,添加以下代码来调用函数并生成目录：

<!-- 文章目录开始 -->
<div class="article-catalog-wrapper">
    <h3>文章目录</h3>
    {dede:geturl function='GetArticleCatalog(@me)'/}
</div>
<!-- 文章目录结束 -->
<!-- 文章内容开始 -->
{dede:field.body/}
<!-- 文章内容结束 -->

说明：这里使用了 {dede:geturl function='...'/} 来调用 extend.func.php 里的函数。@me 代表当前字段的值，在这里就是 {dede:field.body/} 的内容。

第三步：处理文章内容以添加锚点 上面的函数只生成了目录列表，但文章本身的标题还没有锚点，我们需要再修改一下模板,让文章内容在被输出前就带上锚点。

在 article_article.htm 中，找到 {dede:field.body/},将其替换为：

{dede:field.body function='AddAnchorsToHeaders(@me)'/}

在 extend.func.php 中添加 AddAnchorsToHeaders 函数：

/**
 * 为文章内容中的标题添加锚点
 * @param string $content 文章内容
 * @return string 添加了锚点后的内容
 */
function AddAnchorsToHeaders($content) {
    // 为 H2, H3, H4 标签添加锚点
    // 使用回调函数来确保每个锚点ID都是唯一的
    return preg_replace_callback(
        '/<h([2-4])[^>]*>(.*?)<\/h\\1>/i',
        function($matches) {
            $level = $matches[1];
            $title_text = strip_tags($matches[2]);
            // 生成一个基于标题内容的唯一ID
            $anchor_id = 'header-' . preg_replace('/[^a-z0-9\u4e00-\u9fa5]/u', '-', strtolower(trim($title_text)));
            // 返回带有锚点的新标签
            return '<h' . $level . ' id="' . $anchor_id . '"><a name="' . $anchor_id . '" class="anchor-link"></a>' . $matches[2] . '</h' . $level . '>';
        },
        $content
    );
}

第四步：添加CSS样式（可选） 为了让目录和锚点链接更好看,可以在您的CSS文件中添加一些样式：

/* 文章目录样式 */
.article-catalog-wrapper {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin: 20px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
}
.article-catalog-wrapper h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
}
.article-catalog ul {
    list-style: none;
    padding-left: 20px;
}
.article-catalog li {
    margin: 5px 0;
}
.article-catalog a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}
.article-catalog a:hover {
    color: #0056b3;
    text-decoration: underline;
}
/* 锚点链接样式，当鼠标悬停在标题上时显示一个链接图标 */
.anchor-link {
    display: none;
    margin-left: 8px;
    color: #999;
    text-decoration: none;
}
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link {
    display: inline;
}

总结与对比

推荐选择：

• 如果您是网站管理员，文章更新不频繁，希望简单易用，请选择方法一。
• 如果您是开发者，或者运营一个内容量大、以长文章为主的网站，希望自动化和更好的用户体验，请选择方法二。