前言#

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

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

就是说：

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

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

定义 Frontmatter#

提示
如果你使用的也是 Astro Fuwari，那么这些操作理应是相同且可用的。

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

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

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

1
const postsCollection = defineCollection({
2
  schema: z.object({
3
    title: z.string(),
4
    published: z.date(),
5
    updated: z.date().optional(),
6
    draft: z.boolean().optional().default(false),
7
    description: z.string().optional().default(""),
8
    image: z.string().optional().default(""),
9
    tags: z.array(z.string()).optional().default([]),
10
    category: z.string().optional().nullable().default(""),
11
    showcover: z.boolean().optional().default(true),
12
    customcover: z.string().optional().default(""),
13

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

16
    /* For internal use */
17
    prevTitle: z.string().default(""),
18
    prevSlug: z.string().default(""),
19
    nextTitle: z.string().default(""),
20
    nextSlug: z.string().default(""),
21
  }),
22
});

配置 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.image &&。

如果你没有使用在 #定义 Frontmatter 中的本站自定义的参数，这里就无法使用 entry.data.showcover。

1
            {entry.data.showcover && entry.data.image &&
2
                <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"/>
3
            }

自定义文章内部头图#

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

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

注意

如果你做了上面的可选步骤（定义了一个变量），那么可以将其改为 {变量名 &&。

如果你没有使用在 #定义 Frontmatter 中的本站自定义的参数，这里就无法使用 entry.data.customcover。

1
            {entry.data.showcover && entry.data.image &&
2
                <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"/>
3
            }
4

5
            <!-- 自制内部头图 customcover-->
6
            {entry.data.customcover &&
7
                <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"/>
8
            }

附加：本站 […slug].astro 文件#

不要照抄，除非你知道自己在做什么

1
---
2
import path from "node:path";
3
import License from "@components/misc/License.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getSortedPosts } from "@utils/content-utils";
9
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
10
import { Icon } from "astro-icon/components";
11
import { licenseConfig } from "src/config";
12
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
13
import PostMetadata from "../../components/PostMeta.astro";
14
import { profileConfig, siteConfig } from "../../config";
15
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
16

17
export async function getStaticPaths() {
18
  const blogEntries = await getSortedPosts();
19
  return blogEntries.map((entry) => ({
20
    params: { slug: entry.slug },
21
    props: { entry },
22
  }));
23
}
24

25
const { entry } = Astro.props;
26
const { Content, headings } = await entry.render();
27

28
const { remarkPluginFrontmatter } = await entry.render();
29

30
const jsonLd = {
31
  "@context": "https://schema.org",
32
  "@type": "BlogPosting",
33
  headline: entry.data.title,
34
  description: entry.data.description || entry.data.title,
35
  keywords: entry.data.tags,
36
  author: {
37
    "@type": "Person",
38
    name: profileConfig.name,
39
    url: Astro.site,
40
  },
41
  datePublished: formatDateToYYYYMMDD(entry.data.published),
42
  inLanguage: entry.data.lang
43
    ? entry.data.lang.replace("_", "-")
44
    : siteConfig.lang.replace("_", "-"),
45
  // TODO include cover image here
46
};
47

48
// 获取头图 boolean，无需设置 true
49
const showcover = entry.data.showcover;
50

51
// 获取自定义的头图（Markdown 内部）
52
const customcover = entry.data.customcover;
53

54
---
55
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
56
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
57
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
58
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
59
            {}
60
        ]}>
61
            <!-- word count and reading time -->
62
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
63
                <div class="flex flex-row items-center">
64
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
65
                        <Icon name="material-symbols:notes-rounded"></Icon>
66
                    </div>
67
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
68
                </div>
69
                <div class="flex flex-row items-center">
70
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
71
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
72
                    </div>
73
                    <div class="text-sm">
74
                        {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
75
                    </div>
76
                </div>
77
            </div>
78

79
            <!-- title -->
80
            <div class="relative onload-animation">
81
                <div
82
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
83
                    class="transition w-full block font-bold mb-3
84
                    text-3xl md:text-[2.25rem]/[2.75rem]
85
                    text-black/90 dark:text-white/90
86
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
87
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
88
                ">
89
                    {entry.data.title}
90
                </div>
91
            </div>
92

93
            <!-- metadata -->
94
            <div class="onload-animation">
95
                <PostMetadata
96
                        class="mb-5"
97
                        published={entry.data.published}
98
                        updated={entry.data.updated}
99
                        tags={entry.data.tags}
100
                        category={entry.data.category}
101
                ></PostMetadata>
102
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
103
            </div>
104

105
            <!-- always show cover as long as it has one -->
106
            <!-- 使用自制 showcover 控制器控制头图的出现 -->
107
            {showcover && entry.data.image &&
108
                <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"/>
109
            }
110

111
            <!-- 自制内部头图 customcover-->
112
            {customcover &&
113
                <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"/>
114
            }
115

116
            <!-- 头图调试代码
117
            <pre>
118
            showcover（变量）: {showcover} (type: {typeof showcover})
119
            entry.data.showcover: {entry.data.showcover} (type: {typeof entry.data.showcover})
120
            </pre>
121
            -->
122

123
            <Markdown class="mb-6 markdown-content onload-animation">
124
                <Content />
125
            </Markdown>
126

127
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
128

129
        </div>
130
    </div>
131

132
    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
133
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
134
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
135
            {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
136
                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
137
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
138
                    {entry.data.nextTitle}
139
                </div>
140
            </div>}
141
        </a>
142

143
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
144
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
145
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
146
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
147
                    {entry.data.prevTitle}
148
                </div>
149
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
150
            </div>}
151
        </a>
152
    </div>
153

154
</MainGridLayout>