夏的个人博客

基于 Nuxt Content 的静态个人博客。网站代码与文章内容已经分开：

• 本仓库负责页面、样式、内容组件和 GitHub Pages 部署
• ddy314/myblog-content 负责文章与原始图片
• 内容仓库每次推送都会触发网站重新构建
• 构建时压缩发布用图片，原图不改写、不删除

本地开发

npm install
npm run dev

默认从同级目录 ../myblog-content 读取文章。也可以显式指定：

BLOG_CONTENT_DIR=/absolute/path/to/myblog-content npm run dev

构建静态站点

npm run build

生成产物目录：.output/public

内容来源

文章写在内容仓库的 posts/<slug>/index.md，示例 frontmatter：

---
title: 文章标题
description: 文章描述
date: 2026-03-17
tags:
  - 随笔
---

图片放在同一篇文章的 images/ 目录，Markdown 中使用：

![示意图](/posts/my-post/images/diagram.png)

写作系统

当前文章页已经切到一套完整的 Nuxt Content 排版系统：

• 基础 Markdown 由 @tailwindcss/typography 的 prose prose-journal 提供默认排版
• components/content/Prose*.vue 负责覆写标题、链接、代码块、图片、分隔线等细节
• components/content/*.vue 里的 Lead、Callout、KeyPoints、SectionBreak 提供可复用内容块

1. 普通 Markdown

下面这些不用额外写组件，直接写 Markdown 即可：

• 标题、段落、列表、表格、引用
• 行内代码和 fenced code block
• 图片和链接

2. 导语块

适合放在文章开头，用来写一段更有节奏的引导文字：

::lead
这一段会作为文章导语显示，比普通正文更醒目，适合交代背景或阅读预期。
::

3. 提示 / 补充说明

适合写背景、警告、上下文补充：

::callout{title="为什么这样写" tone="accent" label="Context"}
这里可以放一段补充说明，也可以继续写列表。

- 第一条背景
- 第二条背景
::

可用 tone：

• neutral
• accent
• info
• warning

4. 要点摘要

适合在章节末尾收束内容：

::key-points{title="这一节记住什么"}
- 先给判断
- 再给原因
- 最后给行动建议
::

5. 章节转场

比普通 --- 更适合长文中的节奏切换：

::section-break{label="方法"}
::

推荐写法

• 每篇文章开头先写 ::lead
• 一个章节只表达一个核心判断
• 需要解释背景时用 ::callout
• 每个大章节结尾用 ::key-points 收束
• 中段切换话题时优先用 ::section-break，少用连续空白和硬插图

发布流程

日常写作只需要在内容仓库中完成：

1. 新建或修改 posts/<slug>/index.md
2. 把原始图片放进 posts/<slug>/images/
3. 提交并推送内容仓库
4. 内容仓库通过 repository_dispatch 触发本仓库部署

网站仓库还有每 6 小时一次的兜底构建，避免偶发通知失败。发布构建会把图片优化到 .generated/content-public/，此目录不会进入 Git。

回归检查

内容仓库中的 posts/markdown-check/index.md 是排版系统示例文，可作为后续样式调整的回归页面。