dede position 样式

{dede:position} 标签主要用于显示当前页面的“面包屑导航”（Breadcrumb），也就是“首页 > 栏目 > 子栏目 > 当前页面”这样的路径，它的样式完全由 HTML 结构和 CSS 样式共同决定,标签本身只负责生成内容。

下面我将从 基础用法、自定义样式、常见场景 和 高级技巧 四个方面来讲解如何控制 {dede:position} 的样式。

基础用法与默认 HTML 结构

我们需要了解 {dede:position} 标签在模板中是如何使用的，以及它默认生成的 HTML 是什么样子。

模板中的调用

你会将它放在页面头部，<title> 标签之后。

...
<div class="breadcrumb">
    {dede:position runphp='yes'}
        $tagstring = str_replace(' >', ' /', $tagstring);
        @me = $tagstring;
    {/dede:position}
</div>
...

说明：

• {dede:position}: 调用位置标签。
• runphp='yes': 这是一个非常重要的属性，它允许我们在标签内使用 PHP 代码来处理输出的内容。
• $tagstring: 这是系统变量，代表 {dede:position} 默认生成的 HTML 字符串，<a href='/'><span>首页</span></a> > <a href='/category/1/'><span>新闻中心</span></a> > <span>公司新闻</span>。
• str_replace(' >', ' /', $tagstring): 这行代码将默认的 > 分隔符替换成了 ,这是一种常见的面包屑样式。
• @me = $tagstring;: 将处理后的结果赋值给 @me 变量,最终输出。

默认生成的 HTML 结构

如果不使用 runphp 进行处理，{dede:position} 默认生成的 HTML 大致如下：

<a href='/'><span>首页</span></a>
&gt; <!-- 这是 ">" 的 HTML 实体 -->
<a href='/category/1/'><span>新闻中心</span></a>
&gt;
<span>公司新闻</span>

关键点：

• 首页和栏目 是 <a> 链接标签。
• 当前页面 是 <span> 标签（不是链接）。
• 分隔符 是 > (即 >)。

自定义样式

有了清晰的 HTML 结构，我们就可以用 CSS 来轻松地控制它的样式了。

简单的文本样式

假设我们只需要一个简单的文本路径，像这样：首页 > 新闻中心 > 公司新闻

模板代码 (简化版):

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

CSS 样式:

.breadcrumb {
    font-size: 14px;
    color: #666;
    padding: 10px 0;
}
/* 链接样式 */
.breadcrumb a {
    color: #0066cc;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #ff6600;
    text-decoration: underline;
}
/* 当前页面（非链接）样式 */
.breadcrumb span {
    color: #333;
    font-weight: bold;
}
/* 分隔符 " >" 的样式 */
.breadcrumb a::after {
    content: ' >';
    color: #999;
    margin: 0 5px;
}
/* 去掉最后一个元素后面的分隔符 */
.breadcrumb span::after {
    content: '';
}

效果分析：

• 整体字体大小和颜色被设置。
• 所有链接都是蓝色,鼠标悬停时变橙色并加下划线。
• :after 伪元素在每个 <a> 标签后面添加了一个 > 符号,并设置了间距和颜色。
• 最后一个 <span>（当前页面）后面的 :after 内容为空,从而移除了末尾的分隔符。

带图标的面包屑

这是一个非常流行的设计，使用 > 或 图标代替文本分隔符。

模板代码 (使用 runphp 处理):

<div class="breadcrumb breadcrumb-icon">
    {dede:position runphp='yes'}
        // 将 > 替换为一个空格，方便 CSS 添加背景图
        $tagstring = str_replace(' &gt; ', ' ', $tagstring);
        @me = $tagstring;
    {/dede:position}
</div>

CSS 样式:

.breadcrumb-icon {
    font-size: 14px;
    padding: 10px 0;
}
.breadcrumb-icon a {
    color: #333;
    text-decoration: none;
    background-image: url('/images/arrow-icon.png'); /* 准备一个 > 或 / 的图标 */
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px; /* 给图标留出空间 */
}
.breadcrumb-icon a:hover {
    color: #0066cc;
}
/* 当前页面不加图标 */
.breadcrumb-icon span {
    color: #666;
    padding-right: 0;
}

效果分析：

• 通过 runphp 移除了 >，用空格代替，这样我们就可以用 CSS 的 background-image 来添加图标了。
• 每个链接都添加了一个右对齐的背景图标。
• 当前页面 <span> 没有背景图标,样式更简洁。

常见场景与技巧

使用 CSS :after 伪元素（推荐）

这种方法比在模板里处理更灵活，是现代 CSS 的推荐做法。

模板代码：

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

CSS 样式：

.breadcrumb {
    font-size: 14px;
    color: #666;
}
.breadcrumb a {
    color: #0066cc;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
/* 核心样式：为所有 a 标签后面添加内容 */
.breadcrumb a:not(:last-child)::after {
    content: ' / '; /* 或者 ' > ' */
    color: #999;
    padding: 0 8px;
}
/* 当前页面 span 的样式 */
.breadcrumb span {
    color: #333;
    font-weight: 500;
}

代码解释：

• a:not(:last-child)::after 是一个强大的选择器。
  • a::after: 为每个 <a> 标签的末尾添加内容。
  • not(:last-child): 排除掉最后一个 <a> 标签,这样就不会在最后一个链接后面也加上分隔符了。
• 这种方法完全不需要修改模板的 runphp 逻辑，代码更干净,维护性更强。

处理首页名称

默认情况下，首页显示的是“首页”二字，如果你想改成“Home”或者其他文字，可以在后台的“系统” -> “系统基本参数” -> “核心设置”中修改。

路径： 系统 -> 系统基本参数 -> 核心设置 -> “主页链接名称” (Home Page Name)

修改这里后，所有 {dede:position} 中的首页文字都会被替换。

最佳实践建议：

1. 优先使用 CSS :after 伪元素：这是最干净、最灵活的方案，能将样式与结构分离，避免不必要的 PHP 代码。
2. 仅在必要时使用 runphp：当需要对输出内容进行复杂逻辑处理（如完全改变 HTML 结构）时，再使用 runphp。
3. 为面包屑容器添加类名：如 .breadcrumb，这样你的 CSS 样式就不会影响页面其他地方的链接或文本。

通过以上方法，你就可以完全掌控 {dede:position} 的外观,使其完美融入你的网站设计中。