Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:40:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

docs(pages): 自定义 Astro 的 Frontmatter

Browse Source 
1. docs: 自定义 Astro 的 Frontmatter
2. docs: 你是人类吗？
3. fix(config): Umami 更改网站名称导致的密钥失效
4. feat(config): 新增关闭头图
5. feat(config): 新增更改文章内部头图
6. docs(chore): 更改了 doc: 进行 Folo 订阅源认证 的标题
This commit is contained in:
Ad-closeNN
2025-08-13 13:53:19 +08:00
parent ef721f28cd
commit c5af07d1c8
11 changed files with 381 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config.ts
+2 -2
View File
@@ -65,7 +65,7 @@ export const navBarConfig: NavBarConfig = {
},
{
name: "统计信息",
url: "https://umami.adclosenn.top/share/XMDJoIb1D21UxHdH", // Internal links should not include the base path, as it is automatically added
url: "https://umami.adclosenn.top/share/jME4HFb9JmfJM5zs", // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
},
{
@@ -128,6 +128,6 @@ export const expressiveCodeConfig: ExpressiveCodeConfig = {
export const umamiConfig: UmamiConfig = {
enable: true,
baseUrl: "https://umami.adclosenn.top",
shareId: "XMDJoIb1D21UxHdH",
shareId: "jME4HFb9JmfJM5zs",
timezone: "Asia/Shanghai",
};
src/content/assets/images/cloudflare-turnstile-verify-error-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/content/assets/images/cloudflare-turnstile-verify-error.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

src/content/assets/images/custom-frontmatter-cover.svg
+17
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 786 KiB

src/content/assets/images/custom-frontmatter-customcover.svg
+17
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 786 KiB

src/content/assets/images/frontmatter-image-example.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

src/content/config.ts
+3
View File
@@ -10,6 +10,9 @@ const postsCollection = defineCollection({
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 */
src/content/posts/captcha.md
+63
View File
@@ -0,0 +1,63 @@
---
title: "你是人类吗？"
published: 2025-08-12
tags: ["验证"]
description: 我的 Captcha 还蛮多的，欢迎你们来这里玩，玩累了就直接刷新，没问题的~
image: ../assets/images/cloudflare-turnstile-verify-error-1.png
category: 杂项
draft: false
showcover: false
customcover: ../assets/images/cloudflare-turnstile-verify-error.png
---
<head>
<!-- Google reCaptcha v2-->
<!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
<script src="https://recaptcha.net/recaptcha/api.js" async defer></script>
<!-- Cloudflare Turnstile -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer async></script>
</head>
你好~
我的 Captcha 还蛮多的，欢迎你们来这里玩，玩累了就直接刷新，没问题的~
:::NOTE["抱歉"]
现在只有两家 Captcha，后续会慢慢补上其他 Captcha 的！
:::
# Google reCaptcha V2
## 休闲版（不保证）
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="6LerBqQrAAAAAJm_8-H-wq25iSKxprYEW8G_XYhi"></div>
</form>
## 挑战版（不保证）
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="6LcQFKQrAAAAAFg294vepQULbQX11BXa0NTt-21h"></div>
</form>
<br>
# Cloudflare Turnstile
<div id="example-container"></div>
<script is:inline>
function onloadTurnstileCallback() {
// 确保 turnstile 对象已加载
if (typeof turnstile !== 'undefined') {
turnstile.render('#example-container', {
// 重要：将下面的 sitekey 替换为你自己的
sitekey: '0x4AAAAAABq8mQb4rm0Y4ir5', // 这是一个用于测试的 key
callback: function(token) {
console.log(`挑战成功，获取到的 token 是: ${token}`);
// 在这里你可以将 token 发送到后端进行验证
},
});
}
}
</script>
src/content/posts/custom-frontmatter.md
+258
View File
@@ -0,0 +1,258 @@
---
title: "自定义 Astro 的 Frontmatter"
published: 2025-08-13
tags: ["教程", "网站"]
description: 如果你想要在 Astro 的 Makdown Frontmatter 中自定义参数，布尔值或字符串，实现直接开关或更改某样组件，可以这样做
image: "../assets/images/custom-frontmatter-cover.svg"
category: 教程
showcover: false
customcover: ../assets/images/custom-frontmatter-customcover.svg
---
# 前言
如果你用的博客是 [Astro](https://astro.build) 或以它为架构的 [Fuwari](https://github.com/saicaca/fuwari)，那么这篇文章或许适合。
这篇文章的目的是 **在 Markdown 文件的顶端加入一个自定义的类似 `draft: true` 这类变量控制器**，可以运用它对某些组件进行更改，包括关闭、更改。例如，当你在 fuwari 中的 Markdown 顶端定义一个内置参数 `image`，你可以通过写 `image: "../assets/images/custom-frontmatter-cover.svg"` 来让这篇文章在**博客主页**获得一个图片（而不定义就只有一个 `>` 的按钮）： ![frontmatter-image-example](../assets/images/frontmatter-image-example.png)
如果你足够细心，你会发现文章 [你是人类吗？](/posts/captcha/) 的图片在**博客主页**和**文章内部**是不同的。这也用到了自定义 Frontmatter，自己定义了不同的地方该显示什么图片。
# 定义 Frontmatter
:::tip[提示]
如果你使用的也是 Astro Fuwari，那么这些操作理应是**相同**且**可用**的。
:::
打开 `src/content/config.ts` 文件，在 `const postsCollection = defineCollection({` 部分，参考已有的示例定义一个**不重名**的参数，以下是本站的：
**boolen**：布尔值。可以通过 `true` 和 `false` 控制。
**string**：字符串。填写的是一串文本。
最后面括号中的 `true` 指的是如果 Markdown 文件顶端的 Frontmatter 里**没有**这个参数，就默认为 `true`。`string` 也同理。
```ts title="src/content/config.ts" {11-12}
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 &&`。如图所示：
:::warning[注意]
1. 如果你做了上面的可选步骤（定义了一个变量），那么可以将其改为 `{变量名 && entry.data.image &&`。
2. 如果你**没有使用**在 [#定义 Frontmatter](#定义-frontmatter) 中的本站自定义的参数，这里就无法使用 entry.data.showcover。
:::
```astro title="src/pages/posts/[...slug.astro]" {1}
{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 &&` 开头的元素，在其下面添加一个和其**一模一样**的元素。如图所示：
:::warning[注意]
1. 如果你做了上面的可选步骤（定义了一个变量），那么可以将其改为 `{变量名 &&`。
2. 如果你**没有使用**在 [#定义 Frontmatter](#定义-frontmatter) 中的本站自定义的参数，这里就无法使用 entry.data.customcover。
:::
```astro title="src/pages/posts/[...slug.astro]" {6}
{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"/>
}
```
---
# 附加：本站 [...slug].astro 文件
:::CAUTION[不要照抄，除非你知道自己在做什么]
:::
```astro title="src/pages/posts/[...slug].astro" {49,52}
---
import path from "node:path";
import License from "@components/misc/License.astro";
import Markdown from "@components/misc/Markdown.astro";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import { licenseConfig } from "src/config";
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
import PostMetadata from "../../components/PostMeta.astro";
import { profileConfig, siteConfig } from "../../config";
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
export async function getStaticPaths() {
const blogEntries = await getSortedPosts();
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content, headings } = await entry.render();
const { remarkPluginFrontmatter } = await entry.render();
const jsonLd = {
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: entry.data.title,
description: entry.data.description || entry.data.title,
keywords: entry.data.tags,
author: {
"@type": "Person",
name: profileConfig.name,
url: Astro.site,
},
datePublished: formatDateToYYYYMMDD(entry.data.published),
inLanguage: entry.data.lang
? entry.data.lang.replace("_", "-")
: siteConfig.lang.replace("_", "-"),
// TODO include cover image here
};
// 获取头图 boolean，无需设置 true
const showcover = entry.data.showcover;
// 获取自定义的头图（Markdown 内部）
const customcover = entry.data.customcover;
---
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
<script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
{}
]}>
<!-- word count and reading time -->
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
<div class="flex flex-row items-center">
<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">
<Icon name="material-symbols:notes-rounded"></Icon>
</div>
<div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
</div>
<div class="flex flex-row items-center">
<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">
<Icon name="material-symbols:schedule-outline-rounded"></Icon>
</div>
<div class="text-sm">
{remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
</div>
</div>
</div>
<!-- title -->
<div class="relative onload-animation">
<div
data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
class="transition w-full block font-bold mb-3
text-3xl md:text-[2.25rem]/[2.75rem]
text-black/90 dark:text-white/90
md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[0.75rem] before:left-[-1.125rem]
">
{entry.data.title}
</div>
</div>
<!-- metadata -->
<div class="onload-animation">
<PostMetadata
class="mb-5"
published={entry.data.published}
updated={entry.data.updated}
tags={entry.data.tags}
category={entry.data.category}
></PostMetadata>
{!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
</div>
<!-- always show cover as long as it has one -->
<!-- 使用自制 showcover 控制器控制头图的出现 -->
{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-->
{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"/>
}
<!-- 头图调试代码
<pre>
showcover（变量）: {showcover} (type: {typeof showcover})
entry.data.showcover: {entry.data.showcover} (type: {typeof entry.data.showcover})
</pre>
-->
<Markdown class="mb-6 markdown-content onload-animation">
<Content />
</Markdown>
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
</div>
</div>
<div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
<a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
{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" >
<Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
{entry.data.nextTitle}
</div>
</div>}
</a>
<a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
{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">
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
{entry.data.prevTitle}
</div>
<Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
</div>}
</a>
</div>
</MainGridLayout>
```
src/content/posts/folo_verify.md
+1 -1
View File
@@ -1,5 +1,5 @@
---
title: 如何进行 Folo 订阅源认证
title: 进行 Folo 订阅源认证
published: 2025-08-10
tags: ["认证", "网站"]
description: Folo（Follow）是一个 RSS 订阅源合集软件，用它可以快速浏览新鲜事，也可以认证自己的 RSS 订阅源
src/pages/posts/[...slug].astro
+20 -2
View File
@@ -44,6 +44,13 @@ const jsonLd = {
: siteConfig.lang.replace("_", "-"),
// TODO include cover image here
};
// 获取头图 boolean，无需设置 true
const showcover = entry.data.showcover;
// 获取自定义的头图（Markdown 内部）
const customcover = entry.data.customcover;
---
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
<script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
@@ -96,11 +103,22 @@ const jsonLd = {
</div>
<!-- always show cover as long as it has one -->
{entry.data.image &&
<!-- 使用自制 showcover 控制器控制头图的出现 -->
{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-->
{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"/>
}
<!-- 头图调试代码
<pre>
showcover（变量）: {showcover} (type: {typeof showcover})
entry.data.showcover: {entry.data.showcover} (type: {typeof entry.data.showcover})
</pre>
-->
<Markdown class="mb-6 markdown-content onload-animation">
<Content />