dede面包屑导航标签

DedeCMS 提供了非常灵活的标签来实现面包屑导航，主要分为两种方式：内置标签 和 自定义标签。

内置标签 {dede:field name='position'/}

这是最简单、最常用的方法，适用于绝大多数标准页面（如文章列表页、文章内容页、栏目页等）。

标签语法

{dede:field name='position'/}

工作原理

这个标签会自动解析当前页面的层级路径,并生成一个由 > 分隔的链接列表，它的逻辑是：

1. 获取当前栏目ID：根据当前页面所在的栏目，获取其ID。
2. 向上追溯父栏目：从当前栏目开始，一直向上查找其父栏目、父父栏目，直到顶级栏目。
3. 生成链接：将每一个层级的栏目都生成一个指向该栏目列表页的 <a> 链接。
4. 组合输出：将这些链接用 > 连接起来，并在最后加上当前页的标题（如果是内容页）。

示例输出

假设你的网站结构如下： 首页 > 新闻中心 > 公司新闻

• 在“公司新闻”栏目列表页，{dede:field.name='position'} 的输出会是：

  <a href='https://www.yoursite.com/'>首页</a> > <a href='https://www.yoursite.com/news/'>新闻中心</a> > 公司新闻

• 在“公司新闻”里的一篇文章页，输出会是：

  <a href='https://www.yoursite.com/'>首页</a> > <a href='https://www.yoursite.com/news/'>新闻中心</a> > <a href='https://www.yoursite.com/company/'>公司新闻</a> > 文章标题

优缺点

• 优点：使用极其简单，无需任何额外配置，系统自动完成。
• 缺点：
  • 样式控制较弱,链接和分隔符是固定的。
  • 无法自定义链接文字或链接地址。
  • 在某些特殊页面（如自定义的单页面、搜索结果页）可能无法正常工作。

自定义标签 {dede:global name='position'/} 与结合 typelink

为了获得更多的灵活性,比如修改分隔符、添加首页链接文字等，我们可以使用 {dede:global name='position'/} 并结合其他标签。

标签语法

<a href='{dede:global name='cfg_homeurl'/}'>首页</a> {dede:global name='position'/}

工作原理

• {dede:global name='cfg_homeurl'/}：调用网站的全局配置中的“网站首页地址”。
• {dede:global name='position'/}：与 {dede:field name='position'} 功能类似，但它会不包含“首页”，它输出的是从当前栏目的顶级父栏目开始的路径。

示例输出

同样以 首页 > 新闻中心 > 公司新闻 为例：

• 在“公司新闻”栏目列表页，{dede:global name='position'/} 的输出是：

  <a href='https://www.yoursite.com/news/'>新闻中心</a> > 公司新闻

• 结合上面的完整代码，最终的输出是：

  <a href='https://www.yoursite.com/'>首页</a> <a href='https://www.yoursite.com/news/'>新闻中心</a> > 公司新闻

  注意这里 首页 和 新闻中心 之间的分隔符是空格，你可以根据需要修改。

更灵活的用法：结合 {dede:field name='typelink'/}

{dede:field name='typelink'/} 可以获取当前栏目的完整链接（包括所有父级栏目），比 position 更底层，可以组合出更复杂的面包屑。

<a href='{dede:global name='cfg_homeurl'/}'>首页</a> > {dede:field name='typelink'/}

• 在“公司新闻”栏目列表页，{dede:field name='typelink'/} 的输出是：

  <a href='https://www.yoursite.com/news/'>新闻中心</a> > <a href='https://www.yoursite.com/company/'>公司新闻</a>

• 最终的面包屑输出：

  <a href='https://www.yoursite.com/'>首页</a> > <a href='https://www.yoursite.com/news/'>新闻中心</a> > <a href='https://www.yoursite.com/company/'>公司新闻</a>

完整的、可自定义的面包屑导航代码（推荐）

在实际项目中,我们通常需要一个既包含首页，又能自定义分隔符，并且样式清晰的面包屑，下面是一个最佳实践，你可以直接复制到你的模板文件中（通常是 templets/default/article_article.htm 或 list_article.htm 等）。

<div class="breadcrumb">
    <a href="{dede:global name='cfg_cmsurl'/}/">首页</a>
    {dede:field name='position' runphp='yes'}
        $tc = "<span class='separator'> > </span>"; // 定义你的分隔符，可以用图片或CSS样式
        $tw = "@";
        $tf = str_replace($tw, $tc, @me);
        $tf = str_replace(' > ', $tc, $tf); // 替换系统默认的 >
        @me = $tf;
    {/dede:field}
</div>

代码解析

1. <div class="breadcrumb">：用一个 div 包裹，方便用 CSS 控制样式。
2. <a href="{dede:global name='cfg_cmsurl'/}/">首页</a>：手动添加首页链接，cfg_cmsurl 是获取网站根目录地址。
3. {dede:field name='position' runphp='yes'}：
   • runphp='yes'：这是一个关键属性，它允许我们在标签内使用 PHP 代码来处理输出结果。
   • $tc = "<span class='separator'> > </span>";：我们定义一个新的分隔符，这里我们用一个带 separator 类的 span 标签，这样你就可以在 CSS 中轻松地修改它的样式（比如换成 或一张小图标）。
   • $tw = "@"; 和 $tf = str_replace($tw, $tc, @me);：这部分代码是为了防止 PHP 解析错误而设置的占位符替换，通常可以忽略，但保留它更安全。
   • $tf = str_replace(' > ', $tc, $tf);：这是核心，它将系统默认生成的 > 字符串替换成我们自定义的 $tc（即 <span class='separator'> > </span>）。
   • @me = $tf;：将处理后的结果赋值给 @me，@me 是 runphp 中输出变量的固定写法。

对应的 CSS 样式

在你的 CSS 文件中添加以下代码，可以美化面包屑：

.breadcrumb {
    font-size: 12px;
    color: #666;
    margin: 10px 0;
    padding: 5px 0;
}
.breadcrumb a {
    color: #333;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #ff6600;
    text-decoration: underline;
}
.breadcrumb .separator {
    color: #999;
    margin: 0 5px;
}

总结与选择建议

对于绝大多数 DedeCMS 用户，第三种“最佳实践”的方法是首选，因为它在易用性和灵活性之间取得了最好的平衡。