dede文字颜色源代码

DedeCMS 的文字颜色修改功能，主要依赖于一个名为 color 的自定义表单字段，这个字段会生成一个颜色选择器,让用户在前台发布内容时可以方便地选择颜色。

核心概念：color 类型字段

在 DedeCMS 中，你可以为内容模型（如文章、图集等）添加一个字段，并将其类型设置为 color，当你在后台添加了这个字段后,系统会自动在前台的内容发布表单中生成一个颜色选择输入框。

如何在后台添加颜色字段（图文教程）

这是最关键的一步，你需要告诉 DedeCMS 你需要一个颜色选择功能。

1. 登录后台：使用管理员账号登录你的 DedeCMS 后台。

2. 进入模型管理：

   
   （图片来源网络，侵删）
   • 在顶部菜单栏，找到并点击 【系统】 -> 【核心设置】。
   • 在左侧菜单中，点击 模型管理】。

3. 编辑模型：

   • 在模型列表中，找到你要修改的内容模型（通常是“文章模型”），点击其右侧的 【字段管理】。

4. 添加新字段：

   • 在字段管理页面，点击右上角的 【添加新字段】 按钮。

5. 填写字段信息：

   • 字段名称：填写一个英文或拼音，color。注意：这个名称很重要，后面会用到。
   • 字段别名：填写一个易于理解的中文名称，文字颜色”或“标题颜色”,这个名称会显示在前台编辑器的表单上。
   • 字段类型：这是最关键的一步！务必选择 color。
   • 字段说明：可以填写更详细的描述，选择文字的颜色，留空则使用默认颜色”。
   • **默认值：可以设置一个默认颜色，#000000 (黑色) 或 #FF0000 (红色)。
   • 其他选项：通常保持默认即可。

6. 保存并更新：

   
   （图片来源网络，侵删）
   • 点击底部的 【保存】 按钮。
   • 系统会提示你“成功添加字段”，并让你是否更新表单。点击【是】,以更新数据库结构。

至此，后台的字段添加已经完成，当你在前台发布或编辑文章时,就会看到这个颜色选择器了。

前台如何调用和使用颜色源代码

当你添加了 color 字段后，DedeCMS 会自动在 {dede:field name='body'/} (文章正文) 或其他自定义字段中插入一段 HTML 代码，这段代码就是颜色的“源代码”。

前台发布/编辑时看到的代码

在前台,你会在编辑器下方看到一个类似这样的输入框：

<!-- 这是 DedeCMS 自动生成的颜色选择器 HTML 代码 -->
<div class="dede_field">
    <label for="color">文字颜色:</label>
    <input type="color" id="color" name="color" value="#000000" style="width: 50px; height: 30px; border: 1px solid #ccc;">
</div>

• type="color"：这是 HTML5 的原生颜色输入类型,现代浏览器会自动渲染成一个颜色选择器。
• name="color"：这个 name 属性值必须和你后台添加的字段名称完全一致,这样提交的数据才能被正确接收。
• value="#000000"：这是默认值,也就是你之前在后台设置的。

页调用和显示颜色

这才是最终目的：如何在文章页面让文字显示你选择的颜色。

假设你在后台添加的字段名称是 color,并且你想让文章的标题显示为选择的颜色。

直接在模板中调用（最常用）

在你文章模板文件（通常是 /templets/default/article_article.htm）中，找到显示文章标题的代码,通常是：

<h1 class="article-title">{dede:field.title/}</h1>

我们需要将它修改为，使用 color 字段的值来设置 style 属性。

<h1 class="article-title" style="color: {dede:field.color/};">
    {dede:field.title/}
</h1>

代码解析：

• style="color: ...;"：这是 CSS 内联样式,用于设置元素的文字颜色。
• {dede:field.color/}：这是 DedeCMS 的标签，用于获取当前文章的 color 字段的值，如果用户没有选择颜色，这个值会是空的，style 属性就会失效,文字显示为默认颜色。

示例效果：

• 如果用户选择了红色，{dede:field.color/} 的值就是 #FF0000，最终生成的 HTML

  <h1 class="article-title" style="color: #FF0000;">这是一篇很棒的文章</h1>

• 如果用户没有选择颜色，{dede:field.color/} 的值是空的，最终生成的 HTML

  <h1 class="article-title">这是一篇很棒的文章</h1>

在文章正文中使用

如果你想在文章正文的某个特定部分使用颜色，可以在后台编辑文章时，切换到“HTML”源码模式,手动插入代码。

你想让某句话是蓝色的：

<p>这是一段普通的文字，<span style="color: {dede:field.color/};">这句话的颜色会根据你选择的颜色而改变。</span> 文字又恢复了正常。</p>

注意：这种方法不如在模板中调用灵活,因为它需要手动在每个地方添加。

进阶：为不同字段设置不同颜色

你可以添加多个 color 类型的字段，

• 字段名 title_color，别名为“标题颜色”。
• 字段名 subtitle_color，别名为“副标题颜色”。

然后在模板中分别调用：

<!-- 调用标题颜色 -->
<h1 style="color: {dede:field.title_color/};">{dede:field.title/}</h1>
<!-- 调用副标题颜色 -->
<h2 style="color: {dede:field.subtitle_color/};">{dede:field.subtitle/}</h2>

1. 后台设置：在 【系统】->【核心设置】->【内容模型管理】->【字段管理】 中添加一个类型为 color 的新字段。
2. 前台调用：在文章模板文件中，使用 {dede:field.你的字段名/} 标签来获取颜色值。
3. 应用样式：将获取到的颜色值放入 HTML 标签的 style="color: ...;" 属性中,即可实现文字颜色的动态改变。

通过以上步骤，你就可以在 DedeCMS 中自如地控制文字颜色了。