Blankke's Blog
Search K

Appearance

新建功能：首页画廊、播放器与发布流程 ​

这次把首页相关的几块东西一起收拾了，顺手也把后续维护方式定下来，免得之后再靠记忆回忆“这个功能当时到底怎么接的”。

这次加了什么 ​

1. 首页 recent 区域改版 ​

  • 首页最近文章现在只统计最近 30 天的内容。
  • 标题改成了 Recent + 分隔线 + 数量的形式。
  • 主页列表里的画廊内容会带一个照片角标，和普通文章区分开。

2. 画廊不再是独立页面，而是首页内切换 ​

导航栏里的“画廊”现在不会跳到另一套页面，而是在首页背景和头图不变的前提下，把下面的内容切成画廊视图。

这样做的原因很简单：

  • 主页视觉是完整的，不该为了画廊再维护一套平行页面。
  • 用户点“画廊”时想看的只是内容形态变化，不是站点上下文变化。
  • 两套入口很容易把后面的维护搞乱。

3. 画廊内容现在完全按目录识别 ​

现在不再支持给文章写 gallery: true 这种额外标记了。画廊内容只认目录：

txt
gallery/
  一篇独立作品.md
  某个专题/
    index.md
    第一篇.md
    第二篇.md

规则和 posts/ 保持一致：

  • 放在 gallery/ 下面的 markdown，会自动被识别成画廊内容。
  • gallery/专题名/index.md 会被当成专题首页。
  • gallery/专题名/*.md 会自动出现在专题页下面的列表里。
  • 首页画廊分组也是按 gallery/ 的一级目录自动长出来的。

这样以后加画廊内容时，不需要再记一套新的 frontmatter 规则，只需要按目录放文件。

4. 首页播放器 ​

首页左下角现在有一个固定播放器：

  • 支持播放列表
  • 支持切歌
  • 支持静音和循环
  • 支持收起到侧边
  • 设置面板会向上展开，避免在底部被挡住

播放器配置现在也只保留一套新写法：

yaml
blog:
  audio:
    enabled: true
    defaultCollapsed: true
    folder: /audio/home
    volume: 0.36

播放器会自动扫描 public/audio/home/ 下面的音频文件，文件名会直接作为曲目名，时长会在前端读取 metadata 后显示。

维护和发布方法 ​

平时怎么加内容 ​

  • 普通文章继续放 posts/
  • 画廊内容放 gallery/
  • 如果是专题，就新建一个一级文件夹并写一个 index.md

本地检查 ​

改完以后至少跑这两步：

sh
npm run build
npm run check
  • npm run build 用来确认 VitePress 能正常出站点。
  • npm run check 用来做 Biome 检查，避免明显的格式和代码问题。

发布方法 ​

这个博客现在走的是 Vercel 自动发布：

  1. 本地改完并确认 npm run build 通过
  2. 提交代码并推到远端
  3. Vercel 会按仓库里的 vercel.json 自动执行：
txt
npm install
npm run build

构建产物目录是：

txt
.vitepress/dist

所以现在的发布动作本质上就是“本地检查通过后 push”，不需要再手动导出静态文件。

这次顺手删掉的旧兼容层 ​

  • 删除了 gallery: true 这条旧画廊识别路径
  • 删除了播放器旧的单曲配置兼容分支
  • 删除了 /gallery/ 这个独立画廊页入口，只保留首页内切换

这类“新逻辑已经成立，但旧逻辑先留着”的做法，短期看起来稳，长期几乎一定会把维护成本抬高。以后如果确定迁移方向，就尽量直接切到新结构，不要再留双轨。

上次更新于: