跳至主要內容

彩色文字功能指南

2026/9/13大约 7 分钟

彩色文字功能指南

本指南详细介绍如何在 Demius 主题中使用彩色文字功能。

📋 目录

✨ 功能简介

彩色文字功能允许你在文章中为任意文字添加颜色，让内容更加生动和有层次感。

特性

  • ✅ 多种颜色格式：预设颜色、十六进制、RGB、RGBA
  • ✅ 预设颜色：9种常用颜色名称
  • ✅ 主题适配：支持跟随主题颜色
  • ✅ 组合使用：可与粗体、斜体、代码等组合
  • ✅ 简单易用：语法简洁，上手快速
  • ✅ 响应式：移动端友好
  • ✅ 无副作用：不影响其他样式

🚀 快速开始

基础语法

{{< color "颜色" >}}文字内容{{< /color >}}

第一个例子

这是 {{< color "red" >}}红色文字{{< /color >}}。

效果：这是红色文字。

🎨 颜色格式

1. 预设颜色名

使用预定义的颜色名称（最简单）：

{{< color "red" >}}红色{{< /color >}}
{{< color "blue" >}}蓝色{{< /color >}}
{{< color "green" >}}绿色{{< /color >}}

2. 十六进制（HEX）

使用 # 开头的六位或三位十六进制颜色代码：

{{< color "#ff0000" >}}红色{{< /color >}}
{{< color "#00ff00" >}}绿色{{< /color >}}
{{< color "#0000ff" >}}蓝色{{< /color >}}
{{< color "#f00" >}}简写红色{{< /color >}}

3. RGB格式

使用 rgb() 函数：

{{< color "rgb(255, 0, 0)" >}}红色{{< /color >}}
{{< color "rgb(0, 255, 0)" >}}绿色{{< /color >}}
{{< color "rgb(0, 0, 255)" >}}蓝色{{< /color >}}

4. RGBA格式（带透明度）

使用 rgba() 函数，第四个参数为透明度（0-1）：

{{< color "rgba(255, 0, 0, 1)" >}}不透明{{< /color >}}
{{< color "rgba(255, 0, 0, 0.5)" >}}半透明{{< /color >}}
{{< color "rgba(255, 0, 0, 0.3)" >}}较透明{{< /color >}}

5. 主题颜色

使用主题预设的颜色变量：

{{< color "primary" >}}主题色{{< /color >}}
{{< color "accent" >}}强调色{{< /color >}}

🌈 预设颜色

Demius 主题预设了9种常用颜色：

颜色列表

颜色名颜色值说明常用场景
red#e74c3c红色错误、危险、删除、重要
blue#3498db蓝色信息、提示、链接、冷静
green#2ecc71绿色成功、正确、添加、安全
yellow#f1c40f黄色警告、注意、等待
orange#e67e22橙色重要、高优先级
purple#9b59b6紫色特殊、高级、神秘
pink#e91e63粉色柔和、可爱、温馨
cyan#00bcd4青色清新、科技、冷色调
gray#95a5a6灰色次要、辅助、禁用

其他预设

颜色名说明
black黑色（深色）
white白色（浅色）
primary主题主色调
accent主题强调色

📖 使用示例

基础示例

这是 {{< color "red" >}}红色{{< /color >}} 文字。
这是 {{< color "blue" >}}蓝色{{< /color >}} 文字。
这是 {{< color "green" >}}绿色{{< /color >}} 文字。

强调重点

请注意：{{< color "red" >}}此操作不可撤销{{< /color >}}！

标记状态

- {{< color "green" >}}✓ 已完成{{< /color >}}
- {{< color "blue" >}}● 进行中{{< /color >}}
- {{< color "gray" >}}○ 待处理{{< /color >}}

代码标注

使用 {{< color "blue" >}}`console.log()`{{< /color >}} 输出日志。

数据高亮

销售额 {{< color "green" >}}↑ 15%{{< /color >}}，利润 {{< color "blue" >}}↑ 8%{{< /color >}}。

💡 组合使用

颜色 + 粗体

{{< color "red" >}}**重要提示**{{< /color >}}

颜色 + 斜体

{{< color "blue" >}}*这是提示信息*{{< /color >}}

颜色 + 粗体 + 斜体

{{< color "purple" >}}***特别重要***{{< /color >}}

颜色 + 代码

{{< color "cyan" >}}`npm install`{{< /color >}}

颜色 + 链接

{{< color "blue" >}}[访问官网](https://example.com){{< /color >}}

多色组合

这段包含 {{< color "red" >}}红{{< /color >}}、{{< color "green" >}}绿{{< /color >}}、{{< color "blue" >}}蓝{{< /color >}} 三色。

🎯 实用场景

1. 技术文档

**错误**：{{< color "red" >}}Error: Module not found{{< /color >}}
**成功**：{{< color "green" >}}Build completed{{< /color >}}
**警告**：{{< color "orange" >}}Warning: Deprecated{{< /color >}}

2. 教程指南

**步骤1**：{{< color "blue" >}}下载安装包{{< /color >}}
**步骤2**：{{< color "green" >}}运行安装程序{{< /color >}}
**步骤3**：{{< color "purple" >}}配置环境{{< /color >}}

3. 数据报告

- 营收：{{< color "green" >}}+15.5%{{< /color >}}
- 成本：{{< color "red" >}}+8.3%{{< /color >}}
- 利润：{{< color "blue" >}}+7.2%{{< /color >}}

4. 优先级标记

- {{< color "red" >}}P0 - 紧急重要{{< /color >}}
- {{< color "orange" >}}P1 - 重要{{< /color >}}
- {{< color "blue" >}}P2 - 一般{{< /color >}}
- {{< color "gray" >}}P3 - 低优先级{{< /color >}}

5. 游戏攻略

装备品质：
- {{< color "gray" >}}普通{{< /color >}}
- {{< color "green" >}}优秀{{< /color >}}
- {{< color "blue" >}}精良{{< /color >}}
- {{< color "purple" >}}史诗{{< /color >}}
- {{< color "orange" >}}传说{{< /color >}}

🎨 配色建议

语义化配色

遵循通用的颜色语义：

  • 🔴 红色：错误、危险、删除、停止、重要
  • 🟢 绿色：成功、正确、添加、继续、安全
  • 🔵 蓝色：信息、提示、链接、默认
  • 🟡 黄色：警告、注意、等待、提醒
  • 🟠 橙色：重要、高优先级、紧急
  • 🟣 紫色：特殊、高级、稀有
  • 🌸 粉色：柔和、友好、温馨
  • 💠 青色：清新、科技、现代
  • ⚫ 灰色：次要、禁用、辅助

对比度原则

好的对比度：

  • ✅ 深色文字在浅色背景
  • ✅ 饱和度适中的颜色
  • ✅ 避免颜色过浅

不好的对比度：

  • ❌ 浅色文字在浅色背景
  • ❌ 饱和度过低
  • ❌ 颜色太接近背景

和谐配色

单色系：同一颜色的不同明度

{{< color "#c0392b" >}}深红{{< /color >}}
{{< color "#e74c3c" >}}中红{{< /color >}}
{{< color "#ec7063" >}}浅红{{< /color >}}

互补色：色轮相对的颜色

{{< color "blue" >}}蓝色{{< /color >}} + {{< color "orange" >}}橙色{{< /color >}}

类似色：色轮相邻的颜色

{{< color "blue" >}}蓝{{< /color >}} + {{< color "cyan" >}}青{{< /color >}} + {{< color "green" >}}绿{{< /color >}}

🎯 最佳实践

1. 适度使用

推荐：

  • ✅ 用于关键信息
  • ✅ 保持整体和谐
  • ✅ 颜色种类 ≤ 5种
  • ✅ 同类信息用同色

不推荐：

  • ❌ 过度使用颜色
  • ❌ 颜色种类过多
  • ❌ 随意使用颜色
  • ❌ 彩虹色文字

2. 保持一致

在文章中保持颜色使用的一致性：

<!-- 好的做法 -->
{{< color "red" >}}错误信息1{{< /color >}}
{{< color "red" >}}错误信息2{{< /color >}}
{{< color "green" >}}成功信息1{{< /color >}}
{{< color "green" >}}成功信息2{{< /color >}}

<!-- 不好的做法 -->
{{< color "red" >}}错误信息{{< /color >}}
{{< color "orange" >}}错误信息{{< /color >}}  <!-- 不一致 -->

3. 语义明确

使用颜色传递明确的语义：

✅ {{< color "red" >}}错误{{< /color >}} - 语义明确
✅ {{< color "green" >}}成功{{< /color >}} - 语义明确
❌ {{< color "purple" >}}错误{{< /color >}} - 语义不明

4. 可访问性

考虑色盲用户和可访问性：

  • ✅ 不仅依赖颜色传递信息
  • ✅ 添加文字或图标辅助
  • ✅ 确保足够的对比度
<!-- 好的做法 -->
{{< color "red" >}}❌ 错误{{< /color >}}
{{< color "green" >}}✓ 成功{{< /color >}}

<!-- 不好的做法 -->
{{< color "red" >}}消息{{< /color >}}  <!-- 没有明确说明 -->

5. 响应式考虑

在不同设备上测试颜色效果：

  • 📱 移动端：颜色要醒目
  • 💻 桌面端：颜色要协调
  • 🌙 暗色模式：注意对比度

📝 使用技巧

1. 快速选择颜色

使用预设颜色（推荐）：

{{< color "red" >}}文字{{< /color >}}

使用在线取色器：

2. 批量替换

在编辑器中使用查找替换功能，快速为关键词添加颜色：

  1. 查找：重要
  2. 替换为：{{< color "red" >}}重要{{< /color >}}

3. 创建模板

为常用的彩色文字创建代码片段：

<!-- 错误提示 -->
{{< color "red" >}}错误：{{< /color >}}

<!-- 成功提示 -->
{{< color "green" >}}成功：{{< /color >}}

<!-- 警告提示 -->
{{< color "orange" >}}警告：{{< /color >}}

4. 测试颜色

在文章开头先测试颜色效果：

---
title: "文章标题"
draft: true
---

<!-- 颜色测试 -->
{{< color "red" >}}红{{< /color >}}
{{< color "blue" >}}蓝{{< /color >}}
{{< color "green" >}}绿{{< /color >}}

<!-- 正文内容 -->
...

🔍 常见问题

Q1: 可以在标题中使用吗？

答：可以，但不推荐在一级标题中使用。

<!-- 可以使用 -->
### {{< color "blue" >}}蓝色标题{{< /color >}}

<!-- 不推荐 -->
# {{< color "red" >}}主标题{{< /color >}}

Q2: 可以嵌套使用吗？

答：不建议嵌套使用，保持简单即可。

<!-- 不推荐 -->
{{< color "red" >}}外层{{< color "blue" >}}内层{{< /color >}}{{< /color >}}

<!-- 推荐 -->
{{< color "red" >}}文字1{{< /color >}} 和 {{< color "blue" >}}文字2{{< /color >}}

Q3: 颜色在暗色模式下会变吗？

答：颜色值是固定的，不会自动调整。如需跟随主题，使用 primary 或 accent。

<!-- 固定颜色 -->
{{< color "red" >}}始终红色{{< /color >}}

<!-- 跟随主题 -->
{{< color "primary" >}}跟随主题色{{< /color >}}

Q4: 支持渐变色吗？

答：当前不支持渐变色，仅支持纯色。

Q5: 如何选择合适的颜色？

答：

  1. 遵循语义化配色
  2. 保持整体和谐
  3. 确保可读性
  4. 考虑可访问性
  5. 适度使用

Q6: 颜色太浅看不清？

答：避免使用过浅的颜色，推荐使用预设颜色或深色系。

<!-- 不推荐 -->
{{< color "#ffeeee" >}}太浅{{< /color >}}

<!-- 推荐 -->
{{< color "red" >}}合适{{< /color >}}

Q7: 可以用在代码块中吗？

答：不能在代码块（```）中使用，但可以用在行内代码中。

<!-- 不可以 -->
\`\`\`
{{< color "red" >}}代码{{< /color >}}
\`\`\`

<!-- 可以 -->
{{< color "blue" >}}`console.log()`{{< /color >}}

Q8: 打印时颜色会保留吗？

答：取决于浏览器和打印设置，大多数情况下会保留。

📊 颜色速查表

常用颜色

颜色代码效果预览
红色"red" 或 "#e74c3c"🔴
蓝色"blue" 或 "#3498db"🔵
绿色"green" 或 "#2ecc71"🟢
黄色"yellow" 或 "#f1c40f"🟡
橙色"orange" 或 "#e67e22"🟠
紫色"purple" 或 "#9b59b6"🟣
粉色"pink" 或 "#e91e63"🌸
青色"cyan" 或 "#00bcd4"💠
灰色"gray" 或 "#95a5a6"⚫

Material Design颜色

颜色代码
深红"#c62828"
深蓝"#1565c0"
深绿"#2e7d32"
深橙"#d84315"
深紫"#6a1b9a"

🔄 更新日志

v1.0.0 (2025-10-25)

  • ✨ 首次发布彩色文字功能
  • ✅ 支持9种预设颜色
  • ✅ 支持十六进制、RGB、RGBA
  • ✅ 支持主题颜色变量
  • ✅ 完整的使用文档

祝你使用愉快！让文字更精彩！ 🎨✨

最近更新: