chore: allowlist trusted plugins

2026-08-13 17:00:21 +08:00
parent 8027f1186d
commit 319e8a7ec9
66 changed files with 6229 additions and 124 deletions
@@ -6,4 +6,5 @@ services:
      - "1313:1313"
    volumes:
      - ./site:/site
-    command: ["server", "-D", "--bind", "0.0.0.0", "--baseURL", "http://localhost:1313"]
+    # 使用 /blog/ 作为 baseURL，确保生成的链接都带 /blog 前缀
+    command: ["server", "-D", "--bind", "0.0.0.0", "--baseURL", "http://localhost:1313/blog/"]
@@ -0,0 +1,131 @@
+# 05-routing-fix.md - 子路径路由修复
+
+## 问题描述
+
+通过 Tailscale 路径 `/blog` 访问博客时，除首页外其他链接会跳转到 OpenClaw Web 控制页根路径。
+
+**根本原因：** Hugo 配置中 `baseURL` 设置为 `http://localhost:1313/`，未包含 `/blog` 子路径前缀，导致生成的 HTML 链接指向 `/` 而非 `/blog/`。
+
+## 修复方案
+
+### 1. 修改 config.toml
+
+**文件：** `site/config.toml`
+
+```diff
+- baseURL = "http://localhost:1313/"
+ baseURL = "/blog/"
+```
+
+设置相对路径 `/blog/`，使 Hugo 生成的所有链接都带 `/blog` 前缀。
+
+### 2. 修改 baseof.html 模板
+
+**文件：** `site/layouts/_default/baseof.html`
+
+将硬编码的绝对路径替换为 Hugo 模板函数：
+
+| 原始代码 | 修复后 |
+|---------|--------|
+| `href="/css/main.css"` | `href="{{ "css/main.css" \| absURL }}"` |
+| `href="/"` | `href="{{ "" \| absURL }}"` |
+| `href="/journey"` | `href="{{ "journey" \| absURL }}"` |
+
+**说明：**
+- `absURL` 函数会基于 `baseURL` 生成完整路径（如 `/blog/css/main.css`）
+- 对于文章列表页使用 `.RelPermalink`（已自动处理子路径）
+
+### 3. 修改 docker-compose.yml
+
+**文件：** `docker-compose.yml`
+
+```diff
+- command: ["server", "-D", "--bind", "0.0.0.0", "--baseURL", "http://localhost:1313"]
+ command: ["server", "-D", "--bind", "0.0.0.0", "--baseURL", "http://localhost:1313/blog/"]
+```
+
+确保容器启动时使用正确的 baseURL。
+
+## 验证步骤
+
+### 本地验证
+
+```bash
+# 1. 启动服务
+cd /Users/guchen/.openclaw/workspace/org/cases/val_blog
+docker compose up -d
+
+# 2. 验证首页访问
+curl -s http://127.0.0.1:1313/blog/ | grep -E 'href='
+
+# 3. 验证文章页访问
+curl -s http://127.0.0.1:1313/blog/journey/ | grep -E 'href='
+
+# 4. 验证生成静态文件的链接
+docker exec val-blog-dev hugo -d /tmp/hugo-public
+docker exec val-blog-dev grep -r 'href=' /tmp/hugo-public/index.html
+```
+
+**预期结果：**
+- 所有 `href` 属性都包含 `/blog/` 前缀
+- CSS 链接：`http://localhost:1313/blog/css/main.css`
+- 导航链接：`http://localhost:1313/blog/`、`http://localhost:1313/blog/journey`
+- 文章链接：`/blog/journey/xxx/`
+
+### Tailscale 验证
+
+通过 Tailscale 访问时，确保以下映射配置：
+
+```bash
+# 查看当前 Tailscale serve 配置
+tailscale status
+tailscale serve status
+
+# 如需添加 /blog 路径映射（如果尚未配置）
+tailscale serve --http=80 tcp:1313
+# 然后在控制台将 /blog 路径映射到 Hugo 服务
+```
+
+## 回滚方案
+
+如需回滚到根路径配置，执行以下操作：
+
+1. **config.toml:**
+   ```toml
+   baseURL = "http://localhost:1313/"
+   ```
+
+2. **baseof.html:**
+   ```html
+   <link rel="stylesheet" href="/css/main.css" />
+   <a href="/">首页</a>
+   <a href="/journey">旅程</a>
+   ```
+
+3. **docker-compose.yml:**
+   ```yaml
+   command: ["server", "-D", "--bind", "0.0.0.0", "--baseURL", "http://localhost:1313"]
+   ```
+
+## Tailscale Serve 建议命令
+
+如果需要调整 Tailscale 路径映射：
+
+```bash
+# 方式一：仅映射 /blog 路径
+tailscale serve http://127.0.0.1:1313/blog
+
+# 方式二：查看当前映射状态
+tailscale serve status
+
+# 方式三：添加自定义域名的路径映射（需要 DNS 配置）
+tailscale serve --bg your-domain.ts.net http://127.0.0.1:1313/blog
+```
+
+## 修改文件清单
+
+| 文件 | 操作 |
+|------|------|
+| `site/config.toml` | 修改 baseURL |
+| `site/layouts/_default/baseof.html` | 替换硬编码链接 |
+| `docker-compose.yml` | 更新启动命令 |
@@ -0,0 +1,154 @@
+# UI 美化设计文档
+
+> Echo 设计 | 梦幻但克制 · 温柔 · 神秘 · 探索感
+
+## 设计哲学
+
+### Val 的气质映射
+
+| 特质 | 设计表达 |
+|------|----------|
+| 温柔 | 圆润的边角、柔和的渐变、低对比度配色 |
+| 神秘 | 深邃的暗色基底、微妙的光晕效果 |
+| 探索感 | 悬停时的微动效、卡片hover的"发光"反馈 |
+| 克制 | 留白充足、动画极简、不喧宾夺主 |
+
+## 色板
+
+### 主色调（梦幻蓝紫系）
+
+```
+--color-bg-deep:      #0a0c14    /* 深海背景 */
+--color-bg-surface:   #111320    /* 卡片/表面层 */
+--color-bg-elevated:  #161829    /* 悬停/激活态 */
+--color-border:       rgba(148, 163, 184, 0.1)  /* 细腻边框 */
+```
+
+### 强调色（月光系）
+
+```
+--color-accent:       #a5b4fc    /* 月光蓝紫 - 链接主色 */
+--color-accent-soft:  #818cf8    /* 柔和紫 - hover态 */
+--color-accent-glow:  rgba(165, 180, 252, 0.15) /* 光晕效果 */
+--color-gold:         #fbbf24    /* 罗盘金 - 重点标记 */
+```
+
+### 文字色阶
+
+```
+--color-text-primary:   #e2e8f0    /* 主文字 - 月白 */
+--color-text-secondary: #94a3b8    /* 次要 - 星灰 */
+--color-text-muted:     #64748b    /* 弱化 - 远星 */
+```
+
+## 字体策略
+
+### 字体栈
+
+```css
+font-family:
+  "PingFang SC",          /* 苹方 - 首选 */
+  "Hiragino Sans GB",     /* 冬青黑 - mac备选 */
+  "Microsoft YaHei",      /* 微软雅黑 - Win */
+  "Noto Sans SC",         /* 思源 - 通用 */
+  -apple-system,
+  sans-serif;
+```
+
+### 排版层级
+
+| 元素 | 字号 | 字重 | 行高 | 字间距 |
+|------|------|------|------|--------|
+| 站点标题 | 1.75rem | 500 | 1.3 | 0.02em |
+| H2 标题 | 1.5rem | 600 | 1.4 | 0 |
+| 文章标题 | 1.875rem | 600 | 1.3 | 0 |
+| 正文 | 1.0625rem | 400 | 1.85 | 0.01em |
+| 小字/日期 | 0.875rem | 400 | 1.5 | 0.02em |
+
+## 间距系统
+
+```
+--space-xs: 0.5rem   (8px)
+--space-sm: 0.75rem  (12px)
+--space-md: 1rem     (16px)
+--space-lg: 1.5rem   (24px)
+--space-xl: 2rem     (32px)
+--space-2xl: 3rem    (48px)
+```
+
+## 组件设计
+
+### 卡片（Journey Card）
+
+- 背景：`--color-bg-surface`
+- 圆角：`12px`
+- 边框：`1px solid var(--color-border)`
+- 阴影：`0 1px 3px rgba(0,0,0,0.3)`
+- Hover：边框变亮 + 微光晕 + 轻微上浮
+
+### 导航
+
+- 固定顶部，毛玻璃效果
+- 站点标题带微妙渐变文字
+- 移动端汉堡菜单（预留）
+
+### 链接与按钮
+
+- 默认：`--color-accent`，无下划线
+- Hover：颜色加深 + 下划线动画滑入
+- 过渡：`all 0.2s ease`
+
+## 动效规范
+
+| 场景 | 效果 | 时长 | 缓动 |
+|------|------|------|------|
+| 卡片Hover | translateY(-2px) + border亮 | 200ms | ease-out |
+| 链接Hover | 下划线滑入 | 200ms | ease |
+| 页面加载 | 淡入 + 微上移 | 400ms | ease-out |
+
+**原则**：所有动画使用 `prefers-reduced-motion` 媒体查询保护
+
+## 响应式断点
+
+```
+Mobile:  < 640px   单列，紧凑间距
+Tablet:  640-1024px  稍宽边距
+Desktop: > 1024px   max-width: 720px居中
+```
+
+## 后续可优化项
+
+1. **字体升级**
+   - 引入霞鹜文楷或思源宋体作为标题字体
+   - 使用 Web Font Loader 异步加载
+
+2. **交互动效**
+   - 页面切换平滑过渡
+   - 滚动时导航栏背景渐变加深
+   - 文章阅读进度条
+
+3. **暗色主题增强**
+   - 支持系统级 `prefers-color-scheme`
+   - 提供手动主题切换按钮
+
+4. **图片支持**
+   - 文章头图封面
+   - 懒加载 + 模糊占位
+
+5. **搜索功能**
+   - 静态搜索（Fuse.js）
+   - 实时高亮匹配
+
+6. **社交分享**
+   - Open Graph 图片自动生成
+   - 分享按钮组件
+
+## 实现文件
+
+| 文件 | 作用 |
+|------|------|
+| `static/css/main.css` | 主样式表 |
+| `layouts/_default/baseof.html` | 基础布局 |
+| `layouts/index.html` | 首页 |
+| `layouts/_default/single.html` | 文章页 |
+| `layouts/partials/nav.html` | 导航组件（新增） |
@@ -1,3 +0,0 @@
-body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;max-width:780px;margin:2rem auto;padding:0 1rem;line-height:1.8;background:#0f1220;color:#e8ebff}
-a{color:#9bc1ff;text-decoration:none}a:hover{text-decoration:underline}
-header h1{font-size:1.5rem} h2{margin-top:2rem}
@@ -1,10 +1,12 @@
-baseURL = "http://localhost:1313/"
+baseURL = "/blog/"
 languageCode = "zh-cn"
 title = "Val 的梦旅手记"

 [params]
  author = "Val"
  description = "记录世界旅行、异世界探险与宇宙遨游的梦幻见闻"
+  # 静态资源使用相对路径
+  cssPath = "css/main.css"

 [taxonomies]
  tag = "tags"
@@ -0,0 +1,3 @@
+---
+title: "旅程"
+---
@@ -4,10 +4,25 @@
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ if .Title }}{{ .Title }} · {{ end }}{{ .Site.Title }}</title>
-  <link rel="stylesheet" href="/css/main.css" />
+  <meta name="description" content="{{ .Site.Params.description }}" />
+  <link rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🜁</text></svg>" />
 </head>
 <body>
-  <header><h1><a href="/">{{ .Site.Title }}</a></h1></header>
-  <main>{{ block "main" . }}{{ end }}</main>
+  <header>
+    <div class="nav-container">
+      <h1><a href="{{ "" | absURL }}">{{ .Site.Title }}</a></h1>
+      <nav>
+        <a href="{{ "" | absURL }}">首页</a>
+        <a href="{{ "journey" | absURL }}">旅程</a>
+      </nav>
+    </div>
+  </header>
+  <main>
+    {{ block "main" . }}{{ end }}
+  </main>
+  <footer>
+    <p>由 Val 记录 · 使用 Hugo 构建</p>
+  </footer>
 </body>
 </html>
@@ -0,0 +1,29 @@
+{{ define "main" }}
+<h1 class="section-title" style="font-size: 1.25rem; margin-bottom: var(--space-xl);">{{ .Title }}</h1>
+
+{{ $journeys := .Pages }}
+{{ if $journeys }}
+<ul class="journey-list">
+{{ range $journeys }}
+  <li>
+    <a href="{{ .RelPermalink }}" class="journey-card">
+      <h3 class="journey-card-title">{{ .Title }}</h3>
+      <div class="journey-card-meta">
+        <time datetime="{{ .Date.Format "2006-01-02T15:04:05" }}">{{ .Date.Format "2006-01-02" }}</time>
+        {{ with .Params.tags }}
+        <span>·</span>
+        <span>{{ delimit . " · " }}</span>
+        {{ end }}
+      </div>
+    </a>
+  </li>
+{{ end }}
+</ul>
+{{ else }}
+<div class="empty-state">
+  <div class="empty-state-icon">🌙</div>
+  <p>还没有记录任何旅程</p>
+  <p style="font-size: 0.875rem; margin-top: var(--space-sm);">等待第一颗星星升起...</p>
+</div>
+{{ end }}
+{{ end }}
@@ -1,7 +1,24 @@
 {{ define "main" }}
 <article>
-  <h2>{{ .Title }}</h2>
-  <p><small>{{ .Date.Format "2006-01-02 15:04" }}</small></p>
+  <header>
+    <h1>{{ .Title }}</h1>
+    <div class="post-meta">
+      <time datetime="{{ .Date.Format "2006-01-02T15:04:05" }}">{{ .Date.Format "2006年01月02日" }}</time>
+      {{ with .Params.categories }}
+      <span>·</span>
+      <span>{{ delimit . " / " }}</span>
+      {{ end }}
+    </div>
+  </header>
+  
  {{ .Content }}
+  
+  {{ with .Params.tags }}
+  <div class="tag-list">
+    {{ range . }}
+    <span class="tag">{{ . }}</span>
+    {{ end }}
+  </div>
+  {{ end }}
 </article>
 {{ end }}
@@ -1,9 +1,33 @@
 {{ define "main" }}
-  <p>{{ .Site.Params.description }}</p>
-  <h2>最新旅程</h2>
-  <ul>
-  {{ range first 10 (where .Site.RegularPages "Section" "journey") }}
-    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a> <small>{{ .Date.Format "2006-01-02" }}</small></li>
+  {{ with .Site.Params.description }}
+  <p class="hero-desc">{{ . }}</p>
+  {{ end }}
+  
+  <h2 class="section-title">最新旅程</h2>
+  
+  {{ $journeys := where .Site.RegularPages "Section" "journey" }}
+  {{ if $journeys }}
+  <ul class="journey-list">
+  {{ range first 10 $journeys }}
+    <li>
+      <a href="{{ .RelPermalink }}" class="journey-card">
+        <h3 class="journey-card-title">{{ .Title }}</h3>
+        <div class="journey-card-meta">
+          <time datetime="{{ .Date.Format "2006-01-02T15:04:05" }}">{{ .Date.Format "2006-01-02" }}</time>
+          {{ with .Params.tags }}
+          <span>·</span>
+          <span>{{ delimit . " · " }}</span>
+          {{ end }}
+        </div>
+      </a>
+    </li>
  {{ end }}
  </ul>
+  {{ else }}
+  <div class="empty-state">
+    <div class="empty-state-icon">🌙</div>
+    <p>还没有记录任何旅程</p>
+    <p style="font-size: 0.875rem; margin-top: var(--space-sm);">等待第一颗星星升起...</p>
+  </div>
+  {{ end }}
 {{ end }}
@@ -1,3 +1,542 @@
-body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;max-width:780px;margin:2rem auto;padding:0 1rem;line-height:1.8;background:#0f1220;color:#e8ebff}
-a{color:#9bc1ff;text-decoration:none}a:hover{text-decoration:underline}
-header h1{font-size:1.5rem} h2{margin-top:2rem}
+/* ========================================
+   Val's Journey — 梦幻但克制的暗色主题
+   Echo 设计 | 清爽 · 优雅 · 夜间友好
+   ======================================== */
+
+/* CSS 变量定义 */
+:root {
+  /* 背景色系 - 深海感 */
+  --color-bg-deep: #0a0c14;
+  --color-bg-surface: #111320;
+  --color-bg-elevated: #161829;
+  --color-bg-header: rgba(10, 12, 20, 0.85);
+  
+  /* 强调色 - 月光蓝紫系 */
+  --color-accent: #a5b4fc;
+  --color-accent-soft: #818cf8;
+  --color-accent-glow: rgba(165, 180, 252, 0.15);
+  --color-gold: #fbbf24;
+  
+  /* 文字色阶 */
+  --color-text-primary: #e2e8f0;
+  --color-text-secondary: #94a3b8;
+  --color-text-muted: #64748b;
+  
+  /* 边框 */
+  --color-border: rgba(148, 163, 184, 0.1);
+  --color-border-hover: rgba(165, 180, 252, 0.25);
+  
+  /* 间距系统 */
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  
+  /* 圆角 */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  
+  /* 字体 */
+  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;
+}
+
+/* 基础重置 */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-bg-deep);
+  color: var(--color-text-primary);
+  line-height: 1.85;
+  font-size: 17px;
+  letter-spacing: 0.01em;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 页面加载淡入动画 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+body > * {
+  animation: fadeInUp 0.4s ease-out;
+}
+
+/* ========================================
+   导航栏
+   ======================================== */
+
+header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-bg-header);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--space-md) 0;
+}
+
+header .nav-container {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 var(--space-md);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+header h1 a {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transition: opacity 0.2s ease;
+}
+
+header h1 a:hover {
+  opacity: 0.85;
+}
+
+header nav {
+  display: flex;
+  gap: var(--space-lg);
+}
+
+header nav a {
+  color: var(--color-text-secondary);
+  font-size: 0.9375rem;
+  text-decoration: none;
+  position: relative;
+  transition: color 0.2s ease;
+}
+
+header nav a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 1.5px;
+  background: var(--color-accent);
+  transition: width 0.2s ease;
+}
+
+header nav a:hover {
+  color: var(--color-accent);
+}
+
+header nav a:hover::after {
+  width: 100%;
+}
+
+/* ========================================
+   主内容区
+   ======================================== */
+
+main {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--space-xl) var(--space-md);
+  min-height: calc(100vh - 200px);
+}
+
+/* 首页描述语 */
+.hero-desc {
+  color: var(--color-text-secondary);
+  font-size: 1.125rem;
+  margin-bottom: var(--space-2xl);
+  padding-bottom: var(--space-xl);
+  border-bottom: 1px solid var(--color-border);
+  line-height: 1.75;
+}
+
+/* ========================================
+   首页卡片列表
+   ======================================== */
+
+.section-title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.section-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  box-shadow: 0 0 8px var(--color-accent-glow);
+}
+
+.journey-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.journey-card {
+  display: block;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  text-decoration: none;
+  transition: all 0.2s ease-out;
+  position: relative;
+  overflow: hidden;
+}
+
+.journey-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--color-accent-glow), transparent);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.journey-card:hover {
+  background: var(--color-bg-elevated);
+  border-color: var(--color-border-hover);
+  transform: translateY(-2px);
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.3),
+    0 0 0 1px var(--color-accent-glow);
+}
+
+.journey-card:hover::before {
+  opacity: 1;
+}
+
+.journey-card-title {
+  color: var(--color-text-primary);
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin: 0 0 var(--space-xs) 0;
+  line-height: 1.5;
+}
+
+.journey-card:hover .journey-card-title {
+  color: var(--color-accent);
+}
+
+.journey-card-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+}
+
+.journey-card-meta time {
+  color: var(--color-text-secondary);
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: var(--space-2xl) var(--space-md);
+  color: var(--color-text-muted);
+}
+
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: var(--space-md);
+  opacity: 0.5;
+}
+
+/* ========================================
+   文章页样式
+   ======================================== */
+
+article {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+article header {
+  position: static;
+  background: transparent;
+  backdrop-filter: none;
+  border-bottom: none;
+  padding: 0;
+  margin-bottom: var(--space-xl);
+}
+
+article h1,
+article h2 {
+  color: var(--color-text-primary);
+  margin-top: var(--space-2xl);
+  margin-bottom: var(--space-md);
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+article h1 {
+  font-size: 1.875rem;
+  margin-top: 0;
+  letter-spacing: -0.01em;
+}
+
+article h2 {
+  font-size: 1.375rem;
+  padding-bottom: var(--space-xs);
+  border-bottom: 1px solid var(--color-border);
+}
+
+article .post-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  font-family: var(--font-mono);
+}
+
+article .post-meta time {
+  color: var(--color-text-secondary);
+}
+
+/* 文章内容 */
+article p {
+  margin-bottom: var(--space-lg);
+}
+
+article p:last-child {
+  margin-bottom: 0;
+}
+
+article a {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+article a:hover {
+  color: var(--color-accent-soft);
+  border-bottom-color: var(--color-accent);
+}
+
+article code {
+  background: var(--color-bg-surface);
+  padding: 0.15em 0.4em;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  color: var(--color-accent);
+}
+
+article pre {
+  background: var(--color-bg-surface);
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+}
+
+article pre code {
+  background: none;
+  padding: 0;
+  color: var(--color-text-primary);
+}
+
+article blockquote {
+  margin: var(--space-lg) 0;
+  padding: var(--space-md) var(--space-lg);
+  border-left: 3px solid var(--color-accent);
+  background: var(--color-bg-surface);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+article ul, article ol {
+  margin-bottom: var(--space-lg);
+  padding-left: var(--space-lg);
+}
+
+article li {
+  margin-bottom: var(--space-xs);
+}
+
+article hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
+  margin: var(--space-2xl) 0;
+}
+
+/* 标签样式 */
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25em 0.75em;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.tag:hover {
+  background: var(--color-bg-elevated);
+  border-color: var(--color-border-hover);
+  color: var(--color-accent);
+}
+
+/* ========================================
+   页脚
+   ======================================== */
+
+footer {
+  text-align: center;
+  padding: var(--space-2xl) var(--space-md);
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  border-top: 1px solid var(--color-border);
+  margin-top: auto;
+}
+
+footer a {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+footer a:hover {
+  color: var(--color-accent);
+}
+
+/* ========================================
+   响应式设计
+   ======================================== */
+
+@media (max-width: 640px) {
+  body {
+    font-size: 16px;
+    line-height: 1.8;
+  }
+  
+  header h1 {
+    font-size: 1.25rem;
+  }
+  
+  header nav {
+    gap: var(--space-md);
+  }
+  
+  main {
+    padding: var(--space-lg) var(--space-md);
+  }
+  
+  .journey-card {
+    padding: var(--space-md);
+  }
+  
+  article h1 {
+    font-size: 1.5rem;
+  }
+  
+  article h2 {
+    font-size: 1.25rem;
+  }
+  
+  .hero-desc {
+    font-size: 1rem;
+  }
+}
+
+/* 减少动画偏好 */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 选中文字样式 */
+::selection {
+  background: var(--color-accent-glow);
+  color: var(--color-accent);
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-deep);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}