dede面包屑导航代码如何使用？-DEDE建站-盈思创科技

最常用和最核心的代码

这是在DedeCMS中实现面包屑导航最标准、最常用的方法，它通常放在你的 head.htm 或 index.htm 等公共模板文件中。

（图片来源网络，侵删）

{dede:field name='position'/}

代码解释：

这是一行非常简洁的 底层模板标签。
name='position'：这个 name 属性指定了要获取的字段是 position，也就是“当前位置”。
position 字段是 DedeCMS 系统在生成页面时自动根据当前栏目的层级关系生成的，一个文章属于“栏目A” -> “子栏目B”，position 的值就是 首页 > 栏目A > 子栏目B。

这个标签会自动为你生成类似这样的 HTML 结构：

<a href='http://你的域名/'>首页</a> > <a href='http://你的域名/plus/list.php?tid=2'>栏目A</a> > <a href='http://你的域名/plus/list.php?tid=5'>子栏目B</a>

代码使用示例

假设你的模板文件是 templets/default/index.htm，你希望在网站标题下方显示面包屑导航。

找到合适的位置 在你的模板文件中，找到你希望显示面包屑的地方，<head> 标签之后，或者主要内容区域的开头。

插入代码

（图片来源网络，侵删）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:field.seotitle/}</title>
    <link rel="stylesheet" href="/templets/default/style.css">
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
        <!-- 在这里插入面包屑导航代码 -->
        <div class="breadcrumb">
            {dede:field name='position'/}
        </div>
    </div>
    <div class="main-content">
        <!-- 页面主要内容，如文章列表、文章内容等 -->
        {dede:arclist titlelen='42' row='10'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </div>
</body>
</html>

效果： 当访问一个栏目页时，<div class="breadcrumb"> 内部会自动填充类似 首页 > 关于我们 > 公司简介 的链接。

自定义面包屑样式（CSS）

为了让面包屑导航更好看,你需要添加一些 CSS 样式，在你的样式文件 style.css 中添加如下代码：

/* 面包屑导航容器样式 */
.breadcrumb {
    font-size: 14px;
    color: #666;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
/* 面包屑中的链接样式 */
.breadcrumb a {
    color: #007bff; /* 蓝色链接 */
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #0056b3; /* 鼠标悬停时颜色变深 */
    text-decoration: underline;
}
/* 面包屑中的分隔符 ">" 样式 */
.breadcrumb span {
    color: #999;
    margin: 0 8px; /* 左右留出一些空间 */
}

进阶用法与常见变化

有时候默认的代码可能无法满足你的需求,比如你想修改分隔符，或者想在面包屑最后显示当前页面的标题。

修改分隔符

默认的分隔符是 >，如果你想换成或者，可以使用 function 函数。

（图片来源网络，侵删）

代码示例（将分隔符改为）：

{dede:field name='position' function='str_replace("»", "/", @me)'/}

解释：

function='str_replace("»", "/", @me)'：这是一个自定义函数。
str_replace() 是 PHP 的字符串替换函数。
@me 是 DedeCMS 模板中的特殊变量，代表当前标签的原始输出值（即 首页 > 栏目A）。
这行代码的意思是：把原始输出中的替换成。注意：这里替换的是 DedeCMS 默认生成的，而不是 >，如果你想把 > 换成，需要使用更复杂的方法，通常是在 include/typelink.class.php 文件中修改，但最简单的方法还是用 JS 或 CSS 来模拟。

更简单的方法：用 CSS 隐藏默认的 >，然后自定义伪元素 :after 这是目前最推荐、最灵活的方法。

HTML 代码：

<div class="breadcrumb">
    {dede:field name='position'/}
</div>

CSS 代码：

.breadcrumb {
    font-size: 14px;
}
.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}
/* 隐藏系统默认的 > 分隔符 */
.breadcrumb > * + *::before {
    content: "/"; /* 自定义分隔符 */
    padding: 0 8px;
    color: #999;
}

解释：

.breadcrumb > * + *::before 这个 CSS 选择器非常强大。
- >：选择直接子元素。
- 任意元素。
- 选择任意一个紧跟在另一个元素后面的元素。
- :before：在被选中的元素内部的前面插入内容。
这行 CSS 的效果是：在面包屑容器中，除了第一个元素之外的每一个元素的前面，都插入一个符号，并添加样式，这样就能完美覆盖默认的 >。

在面包屑最后显示当前页面标题

这个需求很常见,比如在文章详情页，面包屑希望显示 首页 > 新闻中心 > 文章标题。

HTML 代码：

<div class="breadcrumb">
    {dede:field name='position'/}
    <span class="current-page">{dede:field.title/}</span>
</div>

CSS 代码：

/* 让当前页面标题不可点击，并添加样式 */
.current-page {
    color: #333; /* 深色，表示当前所在位置 */
    font-weight: bold;
    /* 利用上面的 CSS 规则，它前面也会有一个 /，我们可以用下面的方法覆盖掉 */
}
/* 覆盖 current-page 前面的分隔符 */
.breadcrumb > .current-page::before {
    content: none;
}

解释：

{dede:field.title/} 获取的是当前页面的标题（文章标题、栏目名称等）。
我们用一个 <span> 把它包裹起来，并赋予 current-page 类，方便用 CSS 单独控制样式。
通过 CSS，我们移除了 current-page 前面的分隔符，让它看起来更自然。

需求	推荐代码	说明
基本面包屑	`{dede:field name='position'/}`	最常用，自动生成带链接的导航路径。
修改分隔符	CSS方法	使用 `.breadcrumb > * + *::before` 在 CSS 中自定义分隔符，最灵活。
显示当前页标题	`{dede:field name='position'/}<span class="current-page">{dede:field.title/}</span>`	在面包屑末尾添加当前页面标题，并用CSS优化样式。

对于绝大多数 DedeCMS 第一种 {dede:field name='position'/} 就足够了，如果需要更精细的控制，推荐使用 第四种 CSS 自定义分隔符 的方法，它既灵活又不会对系统文件进行任何修改，是最佳实践。

dede面包屑导航代码如何使用？

最常用和最核心的代码

代码使用示例

自定义面包屑样式（CSS）

进阶用法与常见变化

修改分隔符

在面包屑最后显示当前页面标题

相关文章

目录[+]