feat: 优化Markdown表格样式，完美支持深色模式
新增特性： - 现代化表格设计（圆角12px、毛玻璃效果、柔和阴影） - 完整的深色模式支持（表格、边框、滚动条） - 响应式设计（移动端横向滚动、第一列冻结） - 多种表格变体（紧凑型、无边框、高亮） 修复问题： - 修复深色模式下表格边框显示为白色 - 修复移动端滚动条在深色模式下为白色 - 修复冻结列背景色与行不一致 - 优化深色模式配色，避免刺眼
This commit is contained in:
Vaica committed
1 parent
9ecad14b6b
commit
75af2e3c6a
3 files changed
+1106
No files matched your search
@@ -0,0 +1,402 @@
|
||||
# Ying主题 Markdown 表格样式使用指南
|
||||
|
||||
**创建日期：** 2026-06-03
|
||||
**版本：** v2.0（重新设计）
|
||||
**状态：** ✅ 已实现
|
||||
|
||||
---
|
||||
|
||||
## 📋 表格样式概述
|
||||
|
||||
### 设计理念
|
||||
|
||||
**完全符合Ying主题风格：**
|
||||
- ✅ **圆角12px** - 与blockquote一致
|
||||
- ✅ **毛玻璃效果** - 与.main容器一致
|
||||
- ✅ **柔和阴影** - 层次丰富不突兀
|
||||
- ✅ **透明边框** - rgba颜色更自然
|
||||
- ✅ **深色模式** - 柔和的rgba过渡
|
||||
- ✅ **斑马条纹** - 提升可读性
|
||||
- ✅ **悬停效果** - 交互友好
|
||||
- ✅ **响应式设计** - 移动端自动横向滚动
|
||||
- ✅ **多种变体** - 紧凑型、无边框、高亮
|
||||
|
||||
### 设计参考
|
||||
|
||||
**参考元素：**
|
||||
- blockquote（圆角、阴影、边框风格）
|
||||
- .main容器（毛玻璃效果）
|
||||
- 代码块（背景、边框风格）
|
||||
|
||||
---
|
||||
|
||||
## 🎨 浅色模式设计
|
||||
|
||||
### 配色方案
|
||||
|
||||
| 元素 | 颜色 | 说明 |
|
||||
|------|------|------|
|
||||
| **表格背景** | `rgba(255, 255, 255, 0.95)` | 毛玻璃效果 |
|
||||
| **表格边框** | `rgba(0, 0, 0, 0.08)` | 透明柔和 |
|
||||
| **表格阴影** | `0 8px 24px rgba(0, 0, 0, 0.06)` | 层次丰富 |
|
||||
| **表头背景** | 渐变 `rgba(0,0,0,0.03)` → `rgba(0,0,0,0.01)` | 微妙渐变 |
|
||||
| **表头文字** | `rgba(30, 30, 30, 0.92)` | 深灰，可读性强 |
|
||||
| **表头边框** | `rgba(0, 0, 0, 0.1)` | 底部2px |
|
||||
| **单元格背景** | 白色 / `rgba(0,0,0,0.015)` | 斑马纹 |
|
||||
| **单元格文字** | `rgba(30, 30, 30, 0.85)` | 中灰 |
|
||||
| **单元格边框** | `rgba(0, 0, 0, 0.05)` | 浅灰底边 |
|
||||
| **悬停背景** | `rgba(0, 0, 0, 0.04)` | 柔和高亮 |
|
||||
| **链接颜色** | 使用主题链接色 | 与正文一致 |
|
||||
| **代码背景** | `rgba(0, 0, 0, 0.04)` | 浅灰 |
|
||||
| **代码文字** | `rgba(30, 30, 30, 0.9)` | 深灰 |
|
||||
|
||||
### 设计特点
|
||||
|
||||
- ✅ **圆角12px** - 与blockquote完全一致
|
||||
- ✅ **毛玻璃** - `backdrop-filter: blur(8px)`
|
||||
- ✅ **透明边框** - 使用rgba而不是实色
|
||||
- ✅ **柔和阴影** - 避免突兀感
|
||||
|
||||
---
|
||||
|
||||
## 🌙 深色模式设计
|
||||
|
||||
### 配色方案
|
||||
|
||||
| 元素 | 颜色 | 说明 |
|
||||
|------|------|------|
|
||||
| **表格背景** | `rgba(15, 23, 42, 0.95)` | 深蓝毛玻璃 |
|
||||
| **表格边框** | `rgba(148, 163, 184, 0.18)` | 透明灰边框 |
|
||||
| **表格阴影** | `0 10px 28px rgba(0, 0, 0, 0.22)` | 更深的阴影 |
|
||||
| **表头背景** | 渐变 `rgba(30,41,59,0.92)` → `rgba(15,23,42,0.78)` | 深蓝渐变 |
|
||||
| **表头文字** | `rgba(226, 232, 240, 0.96)` | 浅灰白 |
|
||||
| **表头边框** | `rgba(148, 163, 184, 0.2)` | 深灰底边 |
|
||||
| **单元格背景** | 深蓝 / `rgba(30,41,59,0.5)` | 深色斑马纹 |
|
||||
| **单元格文字** | `rgba(226, 232, 240, 0.9)` | 浅灰 |
|
||||
| **单元格边框** | `rgba(148, 163, 184, 0.1)` | 深灰底边 |
|
||||
| **悬停背景** | `rgba(30, 41, 59, 0.8)` | 柔和高亮 |
|
||||
| **链接颜色** | 使用主题深色链接色 | 与正文一致 |
|
||||
| **代码背景** | `rgba(148, 163, 184, 0.15)` | 深灰 |
|
||||
| **代码文字** | `rgba(226, 232, 240, 0.95)` | 浅灰白 |
|
||||
|
||||
### 设计特点
|
||||
|
||||
- ✅ **柔和过渡** - 使用rgba透明度
|
||||
- ✅ **避免纯黑** - 深蓝灰更舒适
|
||||
- ✅ **层次分明** - 半透明边框和阴影
|
||||
- ✅ **护眼设计** - 减少对比度
|
||||
|
||||
---
|
||||
|
||||
## 🎯 与主题一致性
|
||||
|
||||
### 对比其他元素
|
||||
|
||||
| 元素 | 圆角 | 边框 | 阴影 | 背景 |
|
||||
|------|------|------|------|------|
|
||||
| **blockquote** | 12px | rgba透明 | 柔和 | 渐变 |
|
||||
| **.main容器** | 8px | rgba透明 | 层次丰富 | 毛玻璃 |
|
||||
| **表格** | **12px** | **rgba透明** | **柔和** | **毛玻璃** ✅ |
|
||||
| **代码块** | 6px | rgba透明 | 无 | 浅灰 |
|
||||
|
||||
**表格风格与blockquote高度一致！** ✅
|
||||
|
||||
---
|
||||
|
||||
## 📱 响应式设计
|
||||
|
||||
### 移动端优化（<768px）
|
||||
|
||||
**自动处理：**
|
||||
- ✅ 表格自动横向滚动
|
||||
- ✅ 第一列固定（sticky定位）
|
||||
- ✅ 减小内边距（12px → 10px）
|
||||
- ✅ 减小字体（0.85em）
|
||||
- ✅ 圆角调整（8px）
|
||||
- ✅ 触摸友好
|
||||
|
||||
**效果：**
|
||||
- ✅ 在小屏幕完整查看表格
|
||||
- ✅ 第一列始终可见
|
||||
- ✅ 流畅滚动体验
|
||||
- ✅ 性能优化
|
||||
|
||||
---
|
||||
|
||||
## 🎨 表格变体
|
||||
|
||||
### 1. 紧凑型表格（.compact）
|
||||
|
||||
**适用场景：** 数据密集型，需要节省空间
|
||||
|
||||
**Markdown语法：**
|
||||
```markdown
|
||||
| 列1 | 列2 | 列3 | {.compact}
|
||||
|-----|-----|-----|---------
|
||||
| 数据 | 数据 | 数据 |
|
||||
```
|
||||
|
||||
**CSS类：** `table.compact`
|
||||
|
||||
**效果：**
|
||||
- ✅ 更小的内边距（10px vs 14px）
|
||||
- ✅ 更小的字体（0.9em）
|
||||
- ✅ 保持主题风格
|
||||
|
||||
---
|
||||
|
||||
### 2. 无边框表格（.borderless）
|
||||
|
||||
**适用场景：** 简洁风格，不需要明显边框
|
||||
|
||||
**Markdown语法：**
|
||||
```markdown
|
||||
| 列1 | 列2 | 列3 | {.borderless}
|
||||
|-----|-----|-----|-------------
|
||||
| 数据 | 数据 | 数据 |
|
||||
```
|
||||
|
||||
**CSS类：** `table.borderless`
|
||||
|
||||
**效果：**
|
||||
- ✅ 无外边框
|
||||
- ✅ 无阴影
|
||||
- ✅ 透明背景
|
||||
- ✅ 仅有底部分隔线
|
||||
- ✅ 更加简洁
|
||||
|
||||
---
|
||||
|
||||
### 3. 高亮表格（.highlight）
|
||||
|
||||
**适用场景：** 需要突出的重要表格
|
||||
|
||||
**Markdown语法：**
|
||||
```markdown
|
||||
| 列1 | 列2 | 列3 | {.highlight}
|
||||
|-----|-----|-----|------------
|
||||
| 数据 | 数据 | 数据 |
|
||||
```
|
||||
|
||||
**CSS类：** `table.highlight`
|
||||
|
||||
**效果：**
|
||||
- ✅ 左侧4px边框（浅色：黑色60%透明，深色：灰色70%透明）
|
||||
- ✅ 更明显的表头背景
|
||||
- ✅ 更突出的表头边框
|
||||
- ✅ 引起注意
|
||||
|
||||
---
|
||||
|
||||
## 📝 使用示例
|
||||
|
||||
### 示例1：基础表格
|
||||
|
||||
```markdown
|
||||
| 姓名 | 年龄 | 职业 |
|
||||
|------|------|------|
|
||||
| 张三 | 25 | 工程师 |
|
||||
| 李四 | 30 | 设计师 |
|
||||
| 王五 | 28 | 产品经理 |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ 圆角12px卡片
|
||||
- ✅ 毛玻璃背景
|
||||
- ✅ 斑马条纹
|
||||
- ✅ 悬停高亮
|
||||
|
||||
---
|
||||
|
||||
### 示例2：包含代码和链接
|
||||
|
||||
```markdown
|
||||
| 工具 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| Node.js | `18.0+` | JavaScript运行环境 |
|
||||
| [Hugo](https://gohugo.io) | `0.128.2` | 静态站点生成器 |
|
||||
| Git | `2.30+` | 版本控制 |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ 代码块样式（圆角6px，浅灰背景）
|
||||
- ✅ 链接样式（虚线下划线，悬停变实线）
|
||||
- ✅ 与主题链接风格一致
|
||||
|
||||
---
|
||||
|
||||
### 示例3：古风官职表格
|
||||
|
||||
```markdown
|
||||
| 品级 | 官职 | 俸禄 | 说明 |
|
||||
|------|------|------|------|
|
||||
| 正一品 | 太师 | 2000 | 最高官职 |
|
||||
| 从一品 | 太尉 | 1400 | 军事长官 |
|
||||
| 正二品 | 参知政事 | 1050 | 副宰相 |
|
||||
| 从二品 | 节度使 | 800 | 地方军政长官 |
|
||||
| 正三品 | 御史中丞 | 600 | 监察官员 |
|
||||
| 从三品 | 秘书监 | 480 | 文书管理 |
|
||||
| 正四品 | 谏议大夫 | 380 | 谏官 |
|
||||
| 从四品 | 侍读学士 | 300 | 皇帝顾问 |
|
||||
| 正五品 | 给事中 | 240 | 审查奏章 |
|
||||
| 从五品 | 知州 | 190 | 地方长官 |
|
||||
| 正六品 | 侍御史 | 150 | 监察官员 |
|
||||
| 从六品 | 通判 | 115 | 副地方长官 |
|
||||
| 正七品 | 知县 | 85 | 县级长官 |
|
||||
| 从七品 | 殿中侍御史 | 60 | 宫廷监察 |
|
||||
| 正八品 | 大理评事 | 40 | 司法官员 |
|
||||
| 从八品 | 录事参军 | 25 | 文书官员 |
|
||||
| 正九品 | 主簿 | 15 | 县级文书 |
|
||||
| 从九品 | 司户参军 | 5 | 户籍管理 |
|
||||
| — | 庶民 | 0 | 普通百姓 |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ 20行数据清晰展示
|
||||
- ✅ 斑马纹便于阅读
|
||||
- ✅ 深色模式完美适配
|
||||
- ✅ 与古风主题协调
|
||||
|
||||
---
|
||||
|
||||
## 💡 使用技巧
|
||||
|
||||
### 1. 对齐方式
|
||||
|
||||
```markdown
|
||||
| 左对齐 | 居中对齐 | 右对齐 |
|
||||
|:-------|:--------:|-------:|
|
||||
| 数据 | 数据 | 数据 |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ `:---` 左对齐（默认）
|
||||
- ✅ `:---:` 居中对齐
|
||||
- ✅ `---:` 右对齐
|
||||
|
||||
---
|
||||
|
||||
### 2. 表格内换行
|
||||
|
||||
```markdown
|
||||
| 列1 | 列2 |
|
||||
|-----|-----|
|
||||
| 第一行<br>第二行 | 数据 |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ 使用 `<br>` 标签换行
|
||||
- ✅ 在单元格内显示多行
|
||||
|
||||
---
|
||||
|
||||
### 3. 代码和链接混合
|
||||
|
||||
```markdown
|
||||
| 工具 | 版本 | 链接 |
|
||||
|------|------|------|
|
||||
| Hugo | `0.128.2` | [官网](https://gohugo.io) |
|
||||
```
|
||||
|
||||
**效果：**
|
||||
- ✅ 代码块特殊样式
|
||||
- ✅ 链接虚线下划线
|
||||
- ✅ 悬停效果
|
||||
|
||||
---
|
||||
|
||||
## 🎨 自定义样式
|
||||
|
||||
### 修改圆角
|
||||
|
||||
```css
|
||||
.post-content table {
|
||||
border-radius: 16px; /* 更大的圆角 */
|
||||
}
|
||||
```
|
||||
|
||||
### 修改毛玻璃强度
|
||||
|
||||
```css
|
||||
.post-content table {
|
||||
backdrop-filter: blur(12px); /* 更强的模糊 */
|
||||
}
|
||||
```
|
||||
|
||||
### 修改阴影
|
||||
|
||||
```css
|
||||
.post-content table {
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); /* 更大的阴影 */
|
||||
}
|
||||
```
|
||||
|
||||
### 修改深色模式透明度
|
||||
|
||||
```css
|
||||
[data-theme="dark"] .post-content table {
|
||||
background: rgba(15, 23, 42, 0.98); /* 更不透明 */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 功能清单
|
||||
|
||||
### 基础功能
|
||||
|
||||
- [x] 表头样式（微妙渐变）
|
||||
- [x] 斑马条纹
|
||||
- [x] 悬停效果
|
||||
- [x] 圆角12px（与blockquote一致）
|
||||
- [x] 毛玻璃效果
|
||||
- [x] 深色模式
|
||||
|
||||
### 进阶功能
|
||||
|
||||
- [x] 响应式设计
|
||||
- [x] 移动端横向滚动
|
||||
- [x] 第一列固定
|
||||
- [x] 代码块样式
|
||||
- [x] 链接样式
|
||||
- [x] 图片样式
|
||||
|
||||
### 变体样式
|
||||
|
||||
- [x] 紧凑型表格（.compact）
|
||||
- [x] 无边框表格（.borderless）
|
||||
- [x] 高亮表格（.highlight）
|
||||
|
||||
### 主题一致性
|
||||
|
||||
- [x] 与blockquote风格一致
|
||||
- [x] 与.main容器风格一致
|
||||
- [x] 使用主题CSS变量
|
||||
- [x] 深色模式配色协调
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
### 设计优势
|
||||
|
||||
1. **完全符合主题** - 与blockquote、.main容器风格统一
|
||||
2. **视觉舒适** - 毛玻璃、柔和阴影、透明边框
|
||||
3. **深色模式友好** - rgba颜色、柔和过渡
|
||||
4. **交互体验好** - 悬停效果、平滑动画
|
||||
5. **响应式完善** - 移动端优化
|
||||
6. **易于定制** - CSS变量
|
||||
|
||||
### 使用建议
|
||||
|
||||
1. **基础表格** - 使用默认样式
|
||||
2. **数据密集** - 使用紧凑型（.compact）
|
||||
3. **简洁风格** - 使用无边框（.borderless）
|
||||
4. **重要表格** - 使用高亮（.highlight）
|
||||
5. **移动端** - 自动响应式，无需特殊处理
|
||||
|
||||
---
|
||||
|
||||
**表格样式设计完成！完全符合Ying主题风格！** 🎉
|
||||
|
||||
**现在可以在Markdown文章中使用表格了！**
|
||||
Reference in new issue
Block a user