博客文章美化排版指南 — Hermes Design System

⚡系统概述

核心思路：每篇文章发布前，在 WordPress 编辑器内容开头嵌入 <style> 标签，写入专属 CSS。正文用组件化结构重新组织，替换原始的平铺段落。

这种做法的优势：不依赖主题插件、不修改 PHP 模板、不增加请求数、完全独立于 Kadence 主题，每篇文章都是独立的自包含 HTML。

1美化工作流程

确定内容类型 — 判断文章属于技术/AI/生活/游记/亲子等，从主题色表中选择对应色系
编写 CSS 前缀 — 为当前文章定义一个唯一类名前缀（如 win-、park-），避免命名冲突
组装 Hero 区 — 深色渐变背景 + Badge 标签 + 标题 + 副标题 + 可选数据统计
重组正文 — 原文段落实体不变，但用卡片/代码块/图文网格/表格/提示框等组件重新包装
嵌入 CSS + HTML — 通过 WordPress REST API 更新文章的 content 字段
验证效果 — 重新 GET 确认 <style> 标签存在，页面打开后确认布局正常

2组件库

① 深色渐变英雄区（Hero）

🏷️ 分类标签

文章标题

副标题 / 一句话简介

Hero 是页面的视觉焦点，吸引读者继续阅读

.xxx-hero {
  background: linear-gradient(135deg,#色1 0%,#色2 50%,#色1 100%);
  padding: 44px 32px;
  text-align: center;
  border-radius: 16px;
  margin-bottom: 32px;
}

② 统计数据行（Stats）

1M

上下文

1/9

价格比

开源

协议

.xxx-stats { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top:24px; }
.xxx-stats .stat { text-align:center; background:rgba(255,255,255,0.06); padding:16px 20px; border-radius:12px; min-width:100px; }
.xxx-stats .stat .num { font-size:22px; font-weight:800; color:#a5b4fc; }
.xxx-stats .stat .label { font-size:12px; color:#8b8cf7; margin-top:4px; }

③ 彩色信息卡片（Card）

🔵 蓝色 · 技术说明

核心技术细节、背景说明

🔴 红色 · 重点提示

重要警告、必须注意的事项

🟢 绿色 · 补充说明

温馨提示、操作技巧

🟣 紫色 · 创意理念

思想观点、创新概念

④ 深色代码块（Codebox）

@echo off

net user Apple 123456 /add

"C:\Program Files\Boot Camp\AppleControlPanel.exe"

注释灰色 · 命令青色 · 路径金色

⑤ 提示框 / 注意事项

⚠️ 安全提醒

密钥信息请勿外传，生产环境注意备份

⑥ 图文网格（Gallery）

使用 grid-template-columns 实现，自动适配响应式

🖼️

图片1 + 说明

🖼️

图片2 + 说明

⑦ 表格

渐变色表头 + 交替行 + hover 高亮

方式	命令	说明
1Panel 网页	网站 → 重载	✅ 推荐
docker exec	nginx -s reload	✅ 可用
docker restart	重启容器	⚠️ 不推荐

3主题色映射表

根据文章内容类型选择对应色系。Hero 渐变色决定页面第一印象，卡片主色贯穿全文。

内容类型	Hero 渐变色	卡片主色	风格标签
🛠️ 技术 / 工具	`#0c1929 → #1e3a5f`	#3b82f6	深蓝技术风
🤖 AI / 科技新闻	`#1e1b4b → #3730a3`	#8b5cf6	紫蓝科技风
🤔 技术思考/分析	`#1e293b → #334155`	#0ea5e9	灰蓝分析风
☀️ 亲子 / 生活	`#f59e0b → #d97706`	#f59e0b	暖黄亲子风
🏛️ 旅行 / 游记	`#581c1c → #9b2c2c`	#ef4444	古都红金风
🌿 田园 / 自然	`#14532d → #15803d`	#16a34a	田园绿色风
🌊 清新 / 日常	`#0d9488 → #14b8a6`	#14b8a6	夏日清新风
📜 历史 / 文化	`#1a120b → #4a3728`	#d4a574	古风暖色

4避坑指南

⚠️ 大 HTML 必须用文件上传
内容包含引号、反引号、$、\ 等特殊字符时，直接 curl -d '...' 会静默失败（返回 status=unknown）。
正确做法：用 Python 写 JSON 到临时文件，再用 curl -d @file.json 上传。

⚠️ CSS 类名必须加前缀
不同文章之间共用页面上下文（WordPress 内容），CSS 类名必须带专属前缀（如 win-、bc-），否则样式互相污染。

⚠️ HTML 标签必须闭合
WordPress 解析器不会自动补全，漏闭合会导致后续页面布局错乱。

✅ 验证方法
更新后重新 GET 该文章，检查 content.rendered 中是否包含 <style> 标签，且返回的 status 为 "publish"。

✅ 正文内容不变
只加样式和结构，不改原文。原文中的人名地名严格保留。每张图片保持原 URL，不重新上传。

5已美化文章索引

ID	标题	主题色	前缀
224	古代赋税史话	深蓝历史风	`tax-`
213	外公九十七寿辰	中国红喜庆风	`bd-`
210	在内乡县衙体验了一把	古风暖金	`yamen-`
194	BootCamp修复脚本	深蓝技术风	`bc-`
185	承悦在路边晒太阳	暖黄亲子风	`sun-`
178	洛阳龙门漫展	古都红金风	`comic-`
173	小狙击手	田园童趣风	`sniper-`
170	DeepSeek V4 Preview	紫蓝科技风	`pv-`
161	数码公园的午后	夏日清新风	`park-`
155	大模型用量限制	灰蓝分析风	`limit-`
153	DeepSeek V4 发布	紫蓝科技风	`dsv4-`
152	Windows更新工具	靛蓝工具风	`win-`

6Hero 渐变色速查（一键复制）

/* 深蓝技术 */
background: linear-gradient(135deg,#0c1929 0%,#1e3a5f 50%,#0c1929 100%);

/* 靛蓝工具 */
background: linear-gradient(135deg,#172554 0%,#1e40af 50%,#172554 100%);

/* 紫蓝科技 */
background: linear-gradient(135deg,#1e1b4b 0%,#3730a3 50%,#1e1b4b 100%);

/* 深紫科技 */
background: linear-gradient(135deg,#2e1065 0%,#6b21a8 50%,#2e1065 100%);

/* 灰蓝分析 */
background: linear-gradient(135deg,#1e293b 0%,#334155 50%,#1e293b 100%);

/* 暖黄亲子 */
background: linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#f59e0b 100%);

/* 红金游记 */
background: linear-gradient(135deg,#581c1c 0%,#9b2c2c 50%,#581c1c 100%);

/* 田园绿色 */
background: linear-gradient(135deg,#14532d 0%,#15803d 50%,#14532d 100%);

/* 清新青绿 */
background: linear-gradient(135deg,#0d9488 0%,#14b8a6 50%,#0d9488 100%);

/* 古风深褐 */
background: linear-gradient(135deg,#1a120b 0%,#4a3728 50%,#1a120b 100%);