Vibe 内容格式使用指南

vibe 页面用于展示比正式 blog 更轻、更短、更即时的内容。它适合记录生活片段、开发中的小想法、页面调整后的感受、图片日记、灵感句子，或者暂时还不值得写成完整文章的记录。

这些内容集中放在：

src/content/vibe/

每一篇 vibe 都是一个独立的 Markdown 或 MDX 文件，由 Astro Content Collection 读取，并在 src/pages/vibe.astro 中渲染成一条时间流。

页面配置

vibe 页面有少量全局配置，放在：

src/config/site.toml

当前支持的配置是：

[config.vibe]
showTrail = true

showTrail 用来控制页面是否展示时间流里的轨迹线和节点圆点。

true：默认值，桌面端展示轨迹线和 vibe-dot
false：不渲染轨迹线、节点圆点，也不会加载绘制轨迹线的客户端脚本

移动端会始终隐藏轨迹线和节点圆点。这样小屏幕阅读时不会被装饰线挤占空间，内容会更像一组轻量卡片自然向下排列。

文件命名

推荐使用日期开头的文件名，方便排序和维护：

2026-05-23-route-switching.md
2026-05-22-window-light.md
2026-05-20-rainy-night.md

文件名不直接决定显示日期，真正用于排序和展示的是 frontmatter 里的 date 字段。不过日期前缀可以让内容目录更容易扫描。

最小格式

一篇最简单的 vibe 只需要 date 和正文：

---
date: 2026-05-20
---

今天把一个小交互调顺了。页面没有变复杂，只是安静了一点。

如果没有显式设置 type，它会默认为 text。如果没有设置 size，它会默认为 md。

常用字段

vibe 集合的字段定义在 src/content.config.ts 中。

字段	类型	说明
`title`	string	可选标题，适合给某条片段一个短标签
`date`	date	必填，用于排序和显示
`updatedDate`	date	可选更新时间
`draft`	boolean	是否为草稿，草稿不会显示
`type`	enum	内容类型，可选 `text`、`photo`、`quote`、`code`、`mixed`
`mood`	string	当前氛围，如 `quiet`、`rainy`、`after work`
`location`	string	可选地点
`images`	image[]	图片数组，用于 photo 或 mixed 内容
`tags`	string[]	标签数组
`align`	enum	可选 `left`、`right`、`center`
`size`	enum	可选 `sm`、`md`、`lg`

内容类型

type 会影响渲染时的视觉语气。它不是文章分类，而是这条片段的表现方式。

text

普通文字片段，适合大多数日常记录。

---
title: window light
date: 2026-05-22
type: text
mood: soft focus
tags: [daily, writing]
align: left
size: md
---

窗边的光落在键盘上，像给今天留了一个很轻的批注。

photo

带图片的片段，适合生活照片、截图、手账插图等。

---
date: 2026-05-20
type: photo
mood: rainy
location: Tokyo
images:
  - ../../assets/figure/blog-sample-picture.png
tags: [life]
align: right
size: lg
---

东京下雨了，路灯下面有一点像游戏场景。

图片路径相对于当前 Markdown 文件。因为 vibe 文件在 src/content/vibe/ 下，引用 src/assets/figure/ 里的图片时通常需要写成：

../../assets/figure/example.png

quote

引用式片段，适合短句、摘录、某个想法的浓缩表达。当前页面会给 quote 类型更大的字号，所以如果希望字体和普通内容一致，请使用 type: text。

---
date: 2026-05-23
type: quote
mood: tiny motion
tags: [idea]
align: center
size: sm
---

Page transitions should feel like turning a quiet page.

mixed

混合内容，适合既有标题、正文，也可能带图片、标签和更多 Markdown 内容的片段。

---
title: after work
date: 2026-05-21
type: mixed
mood: after work
tags: [blog, idea]
align: center
size: sm
---

Not formal enough for a post. Still part of the story.

想把每一次小修小补都留下来，像页边的铅笔痕迹。

对齐和尺寸

align 控制条目在时间流中的横向位置：

left：靠左显示
right：靠右显示
center：居中显示

如果不设置 align，页面会根据顺序自动在左右之间交替。

size 控制条目的宽度语气：

sm：适合一句话、短引用、小想法
md：默认尺寸，适合普通段落
lg：适合图片或较长片段

草稿

如果一条 vibe 暂时不想展示，可以设置：

draft: true

页面读取内容时会过滤草稿：

const vibeEntries = (await getCollection('vibe')).filter((item) => !item.data.draft);