dede标签样式如何自定义？

核心概念：[field:typename/]

在 DedeCMS 的列表页、文章页等模板中，当你使用标签调用时（如 {dede:tag row='10'}），系统会循环输出每一个标签，在每个标签的循环体内，你可以使用 field:属性名/ 来获取该标签的具体信息。

[field:typename/] 是最关键的。它代表的是当前标签所在的栏目名称，利用这个特性,我们可以为不同栏目下的标签赋予不同的样式。

通过 CSS 类名（最常用、最推荐）

这是最简单、最灵活的方法，通过为每个标签添加一个独特的 CSS 类名，然后在 CSS 文件中定义这个类名的样式。

步骤 1：修改标签调用代码

在需要显示标签的模板文件中（通常是 list_article.htm 或 article_article.htm），找到 {dede:tag} 标签，并修改它，为每个标签循环项添加一个 class 属性。

{dede:tag row='20' getall='1'}
    <a href="[field:link/]" class="tag-item">[field:tagname/]</a>
{/dede:tag}

这里我们添加了一个名为 tag-item 的基础类，用于统一所有标签的公共样式（如颜色、间距等）。

步骤 2：利用 typename 为不同栏目添加不同类名

我们要实现“不同栏目下的标签样式不同”，这就要用到 [field:typename/] 了。

示例： 假设我们有两个栏目：“前端技术”和“后端开发”，我们想给“前端技术”下的标签一个蓝色样式，给“后端开发”下的标签一个绿色样式。

修改标签调用代码如下：

{dede:tag row='20' getall='1'}
    <a href="[field:link/]" class="tag-item tag-[field:typename/]">[field:tagname/]</a>
{/dede:tag}

代码解释：

• class="tag-item": 所有标签共有的基础样式。
• tag-[field:typename/]: 这是关键。[field:typename/] 会被替换成当前栏目的名称，如果当前栏目是“前端技术”，那么生成的 HTML 类名就是 tag-前端技术；如果是“后端开发”，生成的类名就是 tag-后端开发。

注意： 栏目名称中可能包含空格或特殊字符，这可能会影响 CSS 选择器，一个更稳健的方法是使用栏目的 ID。

更稳健的写法（使用栏目ID）：

{dede:tag row='20' getall='1'}
    <a href="[field:link/]" class="tag-item tag-cid-[field:typeid/]">[field:tagname/]</a>
{/dede:tag}

• [field:typeid/] 获取的是当前栏目的数字ID，这样生成的类名就是 tag-cid-1、tag-cid-2 等，非常适合 CSS 选择器。

步骤 3：在 CSS 文件中定义样式

打开你的 CSS 文件（/static/style.css）,根据上面生成的类名来定义不同的样式。

使用栏目名称的 CSS：

/* 所有标签的公共样式 */
.tag-item {
    display: inline-block; /* 让标签可以设置宽高和边距 */
    padding: 3px 10px;
    margin: 5px;
    border-radius: 15px; /* 圆角 */
    text-decoration: none;
    font-size: 14px;
    background-color: #f0f0f0;
    color: #333;
    transition: all 0.3s ease;
}
/* 前端技术栏目的标签样式 */
.tag-前端技术 {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #90caf9;
}
/* 后端开发栏目的标签样式 */
.tag-后端开发 {
    background-color: #e8f5e9;
    color: #388e3c;
    border: 1px solid #a5d6a7;
}
/* 鼠标悬停效果 */
.tag-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

使用栏目ID的 CSS（推荐）：

/* 所有标签的公共样式 */
.tag-item {
    display: inline-block;
    padding: 3px 10px;
    margin: 5px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 14px;
    background-color: #f0f0f0;
    color: #333;
    transition: all 0.3s ease;
}
/* 栏目ID为1的标签样式 (假设1是“前端技术”) */
.tag-cid-1 {
    background-color: #e3f2fd;
    color: #1976d2;
}
/* 栏目ID为2的标签样式 (假设2是“后端开发”) */
.tag-cid-2 {
    background-color: #e8f5e9;
    color: #388e3c;
}
/* 鼠标悬停效果 */
.tag-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

通过内联 Style 属性

如果你只需要简单的颜色或背景色变化，不希望增加太多 CSS 类，可以直接在内联样式中使用 arccattitle 或 typename。

注意： {dede:tag} 标签默认没有提供 typename 字段，我们需要修改 /include/taglib/tag.lib.php 文件才能使用 [field:typename/]，这种方法不如使用 typeid 稳健。

步骤 1：修改 tag.lib.php (可选，用于获取 typename)

打开 /include/taglib/tag.lib.php，找到 $ctp->LoadSource($InnerText); 这一行,在它前面添加以下代码：

// 在这里添加，用于获取typename
$tags .= ($tags=='' ? '' : ',').$row['tag'];
$row['typename'] = $GLOBALS['typename'];

步骤 2：修改模板文件

{dede:tag row='20' getall='1'}
    <a href="[field:link/]" style="background-color: [field:typename function='(strtolower(@me)=="前端技术")?"#e3f2fd":"#e8f5e9"/];">
        [field:tagname/]
    </a>
{/dede:tag}

代码解释： 这里我们使用了 DedeCMS 的 function 属性，通过一个简单的 PHP 判断语句来返回不同的颜色值。

• function='(strtolower(@me)=="前端技术")?"#e3f2fd":"#e8f5e9"' 的意思是：typename (存放在 @me 变量中) 转为小写后等于 "前端技术"，则返回颜色值 #e3f2fd，否则返回 #e8f5e9。

缺点：

• 模板代码臃肿,可读性差。
• 逻辑判断写在模板里,不符合前后端分离的思想。
• 需要修改核心文件,有升级风险。

除非有特殊且简单的需求，否则强烈推荐使用【方法一】。

使用 JavaScript 动态修改（高级用法）

如果你需要非常复杂的、无法用纯 CSS 实现的样式逻辑，或者需要根据用户行为动态改变标签样式，可以使用 JavaScript。

步骤 1：在模板中给标签一个基础类

{dede:tag row='20' getall='1'}
    <a href="[field:link/]" class="tag-js" data-cid="[field:typeid/]">[field:tagname/]</a>
{/dede:tag}

这里我们添加了 class="tag-js" 和一个自定义属性 data-cid 来存储栏目ID。

步骤 2：编写 JavaScript 代码

将以下代码放在你的页面底部，</body> 标签之前。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带有 'tag-js' 类的标签
    const tags = document.querySelectorAll('.tag-js');
    // 定义一个样式映射对象，可以根据需要扩展
    const styleMap = {
        '1': { // 栏目ID为1的样式
            backgroundColor: '#e3f2fd',
            color: '#1976d2',
            border: '1px solid #90caf9'
        },
        '2': { // 栏目ID为2的样式
            backgroundColor: '#e8f5e9',
            color: '#388e3c',
            border: '1px solid #a5d6a7'
        },
        // 可以继续添加更多栏目ID和对应的样式
    };
    // 遍历每个标签
    tags.forEach(tag => {
        const cid = tag.getAttribute('data-cid'); // 获取data-cid属性值
        const styles = styleMap[cid]; // 从映射对象中查找对应的样式
        // 如果找到了对应的样式，就应用到标签上
        if (styles) {
            Object.assign(tag.style, styles);
        }
    });
});
</script>

优点：

• 非常灵活,可以实现复杂的逻辑。
• 样式逻辑与 HTML 结构分离。
• 不需要修改 DedeCMS 核心文件。

缺点：

• 依赖 JavaScript，如果用户禁用了 JS,样式将不会生效。
• 相比 CSS，性能稍差,尤其是在标签数量非常多时。

总结与推荐

对于绝大多数 DedeCMS 强烈推荐使用【方法一：通过 CSS 类名】，这是最规范、最稳定、最易于维护的方案，记住使用 [field:typeid/] 来生成类名，会比 [field:typename/] 更稳健。