跳至主要內容

分类/标签页面配置指南

2026/9/13大约 5 分钟

分类/标签页面配置指南

本指南详细介绍如何在 Demius 主题中配置分类和标签详情页的文章列表背景色。

📋 目录

✨ 功能特性

  • ✅ 双色模式：随机彩色 / 自定义颜色
  • ✅ 8种渐变：随机模式提供8种精美渐变色
  • ✅ 纯黑日期：随机模式下日期纯黑色更醒目
  • ✅ 自定义颜色：支持任意 #RRGGBB 格式颜色
  • ✅ 暗色适配：自动适配暗色主题
  • ✅ 响应式：完美适配各种屏幕

🚀 快速开始

1. 配置颜色模式

在 hugo.toml 中配置：

[params.taxonomy]
  colorMode = "random"      # 或 "custom"
  customColor = "#454141"   # 自定义颜色（当 colorMode="custom" 时生效）

2. 重新构建

hugo server

3. 查看效果

访问任意分类或标签页面查看效果

🎨 配置模式

模式一：随机彩色 (random)

配置：

[params.taxonomy]
  colorMode = "random"

效果：

  • ✅ 文章列表使用8种渐变色轮播
  • ✅ 日期文字为纯黑色 (#000000)
  • ✅ 日期字重加粗 (font-weight: 500)
  • ✅ 标题文字为白色带阴影

8种渐变颜色：

  1. 紫蓝渐变

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  2. 粉红渐变

    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  3. 蓝青渐变

    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  4. 绿青渐变

    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

  5. 橙黄渐变

    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

  6. 粉蓝渐变

    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

  7. 粉橙渐变

    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);

  8. 天蓝渐变

    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);

视觉效果：

┌─────────────────────────────────┐
│ 文章1 (白色)    2024-10-24 (黑) │ ← 紫蓝渐变
├─────────────────────────────────┤
│ 文章2 (白色)    2024-10-23 (黑) │ ← 粉红渐变
├─────────────────────────────────┤
│ 文章3 (白色)    2024-10-22 (黑) │ ← 蓝青渐变
└─────────────────────────────────┘

模式二：自定义颜色 (custom)

配置：

[params.taxonomy]
  colorMode = "custom"
  customColor = "#454141"  # 深灰色

效果：

  • ✅ 所有文章列表使用统一背景色
  • ✅ 标题和日期文字为白色
  • ✅ 文字带阴影确保可读性
  • ✅ 支持任意 #RRGGBB 格式颜色

视觉效果：

┌─────────────────────────────────┐
│ 文章1 (白色)    2024-10-24 (白) │ ← #454141
├─────────────────────────────────┤
│ 文章2 (白色)    2024-10-23 (白) │ ← #454141
├─────────────────────────────────┤
│ 文章3 (白色)    2024-10-22 (白) │ ← #454141
└─────────────────────────────────┘

📝 使用示例

示例一：默认随机彩色

[params.taxonomy]
  colorMode = "random"

适合：

  • 活泼的个人博客
  • 设计类网站
  • 追求视觉冲击力

示例二：深灰色背景

[params.taxonomy]
  colorMode = "custom"
  customColor = "#454141"

适合：

  • 专业技术博客
  • 低调内敛风格
  • 统一视觉设计

示例三：深蓝色背景

[params.taxonomy]
  colorMode = "custom"
  customColor = "#2c3e50"

适合：

  • 商务网站
  • 科技博客
  • 深色系设计

示例四：深绿色背景

[params.taxonomy]
  colorMode = "custom"
  customColor = "#27ae60"

适合：

  • 环保主题
  • 自然风格
  • 清新配色

示例五：深紫色背景

[params.taxonomy]
  colorMode = "custom"
  customColor = "#8e44ad"

适合：

  • 创意设计
  • 艺术博客
  • 神秘风格

🎨 颜色选择建议

深色系（推荐）

customColor = "#2c3e50"  # 深灰蓝
customColor = "#34495e"  # 深灰
customColor = "#454141"  # 深灰褐
customColor = "#1a1a1a"  # 深黑
customColor = "#2d3436"  # 深炭灰

特点：

  • ✅ 文字对比度高
  • ✅ 视觉不疲劳
  • ✅ 专业稳重

彩色系

customColor = "#e74c3c"  # 红色
customColor = "#3498db"  # 蓝色
customColor = "#27ae60"  # 绿色
customColor = "#f39c12"  # 橙色
customColor = "#9b59b6"  # 紫色

特点：

  • ✅ 视觉冲击力强
  • ✅ 个性鲜明
  • ❌ 可能影响阅读

浅色系（不推荐）

customColor = "#ecf0f1"  # 浅灰
customColor = "#f5f5f5"  # 极浅灰

问题：

  • ❌ 文字对比度低
  • ❌ 需要调整文字颜色
  • ❌ 视觉效果不佳

🌙 暗色模式适配

随机彩色模式

暗色模式下：

  • ✅ 渐变色保持不变
  • ✅ 白色文字保持清晰
  • ✅ 黑色日期自动调亮

自定义颜色模式

暗色模式下：

  • ✅ 背景色保持不变
  • ✅ 文字颜色自动适配
  • ✅ 阴影效果增强

🔧 高级定制

修改随机模式的颜色

编辑 themes/demius/assets/css/_category.css：

.post-title-item.color-1 {
  background: linear-gradient(135deg, #your-color-1 0%, #your-color-2 100%);
}

修改日期颜色（随机模式）

.category-posts-page[data-color-mode="random"] .post-date {
  color: #ff0000;  /* 改为红色 */
  font-weight: 600;
}

添加悬停效果

.post-title-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

📱 响应式适配

桌面端

  • 完整渐变效果
  • 所有样式正常显示

移动端

  • 渐变色自动适配
  • 文字大小调整
  • 间距优化

🔍 常见问题

Q1: 颜色不生效？

检查：

  1. ✅ 配置拼写正确
  2. ✅ 颜色格式为 #RRGGBB
  3. ✅ 重新构建项目
  4. ✅ 清除浏览器缓存

Q2: 日期颜色不是黑色？

原因： 不是随机模式

解决：

colorMode = "random"  # 只有随机模式日期才是黑色

Q3: 自定义颜色太亮看不清？

解决： 使用深色

customColor = "#2c3e50"  # 改为深色

Q4: 如何恢复默认样式？

删除配置：

# 注释或删除以下配置
# [params.taxonomy]
#   colorMode = "random"

Q5: 渐变色顺序能改吗？

可以： 编辑 CSS 文件调整 color-1 到 color-8 的顺序

Q6: 分类页和标签页能用不同颜色吗？

目前不支持： 两者使用相同配置

变通方案： 使用随机模式，让每个列表自动轮换颜色

🎯 最佳实践

1. 模式选择

选择随机模式：

  • ✅ 个人博客
  • ✅ 设计展示
  • ✅ 追求视觉冲击

选择自定义模式：

  • ✅ 企业网站
  • ✅ 专业博客
  • ✅ 统一品牌色

2. 颜色搭配

深色背景 + 白色文字：

colorMode = "custom"
customColor = "#2c3e50"

彩色渐变：

colorMode = "random"

3. 可读性优先

  • ✅ 使用深色背景
  • ✅ 确保文字对比度
  • ✅ 避免过亮颜色

📊 效果对比

模式视觉冲击力可读性统一性维护成本
随机彩色⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ 低
自定义颜色⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ 低

🔄 更新日志

v1.0.0 (2025-10-24)

  • ✨ 支持随机彩色模式
  • ✨ 支持自定义颜色模式
  • ✅ 8种精美渐变色
  • ✅ 随机模式纯黑日期
  • ✅ 暗色模式自动适配
  • ✅ 响应式设计

祝使用愉快！ 🎉

最近更新: