灵感编程 Vibe Coding

一门面向创作者的线上自学课程网站。内容全部写在 Markdown / YAML 里，用 Astro 渲染成纯静态站点。

开发

bun install
bun run dev       # http://localhost:4321
bun run build     # 输出到 dist/
bun run preview   # 本地预览构建产物

内容都在哪

所有内容都是结构化文档，改内容不需要动任何 .astro 文件。

src/content/
├── modules/          学习板块，一个 .md 一节，含自测题
├── tools/            工具与概念，一个 .md 一个条目
├── data/
│   └── tool-groups.yaml   工具页的分组与排序
├── pages/            关于、环境准备等独立页面
└── workshops/        线下场次

新增一个学习板块

在 src/content/modules/ 建一个 .md，文件名即网址（12-xxx.md → /learn/12-xxx/）：

---
title: 板块标题
en: English Title
order: 12                # 决定排序和上一节/下一节
track: 入门 | 进阶 | 追问
duration: 约 3 小时
summary: 一句话说明这节做什么
goals:                   # 侧栏「学完你能」
  - 目标一
practice: 动手练习的标题  # 可选，侧栏高亮显示
quiz:                    # 可选，纯前端判分
  - q: 题干
    type: single         # 或 multi，默认 single
    options: ['A', 'B', 'C']
    answer: 1            # 选项下标，从 0 开始；多选写 [0, 2]
    explain: 对答案后显示的解析
draft: false             # true 则不发布
---

正文写 Markdown。

新增一个工具条目

在 src/content/tools/ 建 .md，group 对应 data/tool-groups.yaml 里的 id：

---
name: 工具名
group: editors
order: 4
kind: 编辑器 | 命令行 | 协作 | 平台 | 框架 | 概念
badge: 必学           # 可选角标
tagline: 一句话介绍
links:
  - label: 官网
    href: https://example.com/
---

### 这是什么
### 为什么你需要它
### 怎么开始

正文统一按这三段写，页面会自动把 h3 渲染成小标题样式。

新增线下场次

在 src/content/workshops/ 建 .md。index-note.md 是页面开头的说明，不会作为场次显示。

---
title: 城市场 · 主题
date: 2026-04-18      # 留空显示「时间待定」
city: 上海
status: 报名中 | 筹备中 | 已结束
summary: 一句话说明
signup: https://...   # 可选，有则显示报名按钮
---

自测题怎么工作的

src/components/Quiz.astro 把题目和答案静态渲染进 HTML，判分逻辑全在浏览器里跑：

• 没有后端，没有账号，不上传任何数据
• 成绩存在 localStorage，键名 vc-quiz:<板块 id>
• /quiz/ 页面读取这些键回显进度，并汇总所有题目成一份总测验

答案在页面源码里可见——这是自测工具，不是考试。

设计约定

• 配色和字体变量集中在 src/styles/global.css 顶部的 :root
• 深色模式靠 [data-theme='dark'] 覆盖同一批变量，切换状态存 localStorage
• 中文标题用衬线，元信息和代码用等宽，正文用系统无衬线

部署

纯静态，bun run build 后把 dist/ 传到任何静态托管即可。推荐 Cloudflare Pages 或 GitHub Pages（构建命令 bun run build，输出目录 dist）。

部署到子路径时，需要在 astro.config.mjs 里设置 base。