前言 ​

如果你用的博客是 Astro 或以它为架构的 Fuwari，那么这篇文章或许适合。

这篇文章的目的是 在 Markdown 文件的顶端加入一个自定义的类似 draft: true 这类变量控制器，可以运用它对某些组件进行更改，包括关闭、更改。例如，当你在 fuwari 中的 Markdown 顶端定义一个内置参数 image，你可以通过写 image: "/assets/images/custom-frontmatter-cover.svg" 来让这篇文章在博客主页获得一个图片（而不定义就只有一个 > 的按钮）：

就是说：

--- # 这里是 Frontmatter 的开头
image: /a/example.png # 官方自带的：这是原来有的这个 image:
customcover: /a/eexxaammppllee.png  # 自己添加的：这是在如 /posts/custom-frontmatter/ 显示的文章头图
showcover: false # 自己添加的：这是控制 是否使用 image: 定义的图片作为文章头图，默认就是会用 image: 定义的图片作为头图
--- # 这里是 Frontmatter 的结尾

如果你足够细心，你会发现文章 你是人类吗？ 的图片在博客主页和文章内部是不同的。这也用到了自定义 Frontmatter，自己定义了不同的地方该显示什么图片。

定义 Frontmatter ​

打开 src/content/config.ts 文件，在 const postsCollection = defineCollection({ 部分，参考已有的示例定义一个不重名的参数，以下是本站的：

boolen：布尔值。可以通过 true 和 false 控制。
string：字符串。填写的是一串文本。

最后面括号中的 true 指的是如果 Markdown 文件顶端的 Frontmatter 里没有这个参数，就默认为 true。string 也同理。

const postsCollection = defineCollection({
	schema: z.object({
		title: z.string(),
		published: z.date(),
		updated: z.date().optional(),
		draft: z.boolean().optional().default(false),
		description: z.string().optional().default(""),
		image: z.string().optional().default(""),
		tags: z.array(z.string()).optional().default([]),
		category: z.string().optional().nullable().default(""),
		showcover: z.boolean().optional().default(true),
		customcover: z.string().optional().default(""),

		lang: z.string().optional().default(""),

		/* For internal use */
		prevTitle: z.string().default(""),
		prevSlug: z.string().default(""),
		nextTitle: z.string().default(""),
		nextSlug: z.string().default(""),
	}),
});

配置 Frontmatter（样例） ​

关闭文章头图 ​

默认你使用 image 定义了一张图片，那么这张图片将会同时显示在博客主页和 文章内部（那个大大的图片，位于文章之首）。
如不需要使用博客主页那张图片作为文章内部的照片，我们可以关闭文章内部的头图显示，只剩下文章正文和文章的图片，而博客主页那个卡片右边的图片依然显示。

打开 src/pages/posts/[...slug].astro，（这个可选：在第二处 --- 上面加入 const 随便一个不重复名字 = entry.data.你在#定义 Frontmatter定义的参数。 ，本站是 showcover = enrty.data.showcover;）
找到 {entry.data.image &&，将其改为 {entry.data.showcover && entry.data.image &&。如图所示：

            {entry.data.showcover && entry.data.image &&
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
            }

自定义文章内部头图 ​

你也看到了，本文在博客主页和本页的头图不一样。这是自定义了头图 customcover: /assets/images/custom-frontmatter-customcover.svg。

打开 src/pages/posts/[...slug].astro，（这个可选：在第二处 --- 上面加入 const 随便一个不重复名字 = entry.data.你在#定义 Frontmatter定义的参数。，本站是 const customcover = entry.data.customcover;）
找到 {entry.data.image && 开头的元素，在其下面添加一个和其一模一样的元素。如图所示：

            {entry.data.showcover && entry.data.image &&
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
            }
            
            <!-- 自制内部头图 customcover-->
            {entry.data.customcover &&
                <ImageWrapper id="post-cover" src={entry.data.customcover} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
            }