2.1 BAT 脚本自动提取#

修改 scripts/add-frontmatter.cjs，实现以下逻辑：

2.2 配置文件修复#

修改 src/content/config.ts，允许 image 为空：

1
image: z.string().optional().default("").nullable(),

关键点：.nullable() 让空字符串也能通过验证，不再导致构建失败。

3.1 页面结构#

1
/gallery/  →  src/pages/gallery/index.astro
2
           →  src/components/GalleryPanel.astro

3.2 显示逻辑#

画廊页面只显示显式设置了 image 字段的文章：

1
const postsWithCover = posts.filter(post => post.data.image);

3.3 文章详情页回退#

如果没有设置 image，文章详情页会自动提取第一张图片：

1
function extractFirstImageFromMarkdown(markdown) {
2
    const imgMatch = markdown.match(/!\[.*?\]\(([^)]+)\)/i);
3
    return imgMatch ? imgMatch[1] : undefined;
4
}

4.1 写文章#

1. 在 Obsidian 中新建 md 文件
2. 写入文章内容（建议在开头插入一张图片）
3. 保存文件

4.2 运行 BAT 脚本#

1. 打开 博客升级版bat.bat
2. 选择 选项2（生成 YAML 模板）
3. 脚本会自动：
   • 添加/补全 frontmatter
   • 提取文章第一张图片作为封面
   • 在控制台显示处理结果

4.3 查看效果#

⚠️ 注意：Obsidian 有缓存，修改后需要：

• 按 Ctrl+S 保存
• 关闭文件重新打开
• 或刷新编辑器

5.1 图片格式#

必须是 Markdown 图片格式：

1
![说明](https://example.com/image.jpg)

5.2 推送问题#

修复前：空 image 导致构建失败
修复后：.nullable() 允许空值，构建正常

5.3 画廊显示#

• 有 image 字段 → 画廊显示 ✅
• 无 image 字段 → 画廊不显示，但文章页会自动提取第一张图 ✅

7.1 问题背景#

从今天早上开始，我们持续攻坚封面自动提取功能，历经多次挫折才最终解决。

7.2 遇到的困难#

7.3 失败原因分析#

1. Obsidian 缓存问题

   • 现象：脚本运行后，Obsidian 显示的文件内容没有变化
   • 原因：Obsidian 有文件缓存，需要手动刷新或关闭重开
   • 解决：增加提示信息，提醒用户刷新

2. 构建失败问题

   • 现象：image: Expected type "string", received "null"
   • 原因：空 image: 字段被解析为 null，而不是空字符串
   • 解决：在 config.ts 中添加 .nullable()

3. 图片提取错误

   • 现象：提取的是 frontmatter 中的图片，不是文章正文的第一张图
   • 原因：extractFirstImage() 函数直接匹配整个文件内容，没有忽略 frontmatter
   • 解决：新增 extractFirstImageIgnoreFrontmatter() 函数，先解析出文章正文再提取图片

7.4 最终突破#

1
// 正确的提取逻辑
2
function extractFirstImageIgnoreFrontmatter(content) {
3
    // 1. 找到 frontmatter 结束的位置
4
    const match = content.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/m);
5
    if (match && match[1]) {
6
        // 2. 只从正文内容中提取图片
7
        const bodyContent = match[1];
8
        return extractFirstImage(bodyContent);
9
    }
10
    // 3. 如果没有 frontmatter，直接提取
11
    return extractFirstImage(content);
12
}

7.5 经验总结#

• 调试时注意缓存：IDE/编辑器的缓存可能导致误判
• Zod 验证需考虑空值：.nullable() 可以解决空字符串验证问题
• 正则匹配要精确：提取内容时需明确范围，避免误提取