759 字
4 分钟
Fuwari主题博客添加置顶帖子功能
前言
Fuwari是基于 Astro 开发的静态博客模板。搭建教程见本站往期帖子使用Astro
本期主要优化记录下新增帖子置顶功能的改动。
Fuwari主题博客添加置顶帖子功能
抬头添加字段
---
title: My First Blog Post //文章标题
published: 2023-09-09 //文章发布日期
description: This is the first post of my new Astro blog. //文章描述
image: ./cover.jpg //这是文章封面，路径可以是相对路径，也可以是绝对路径
tags: [Foo, Bar] //文章标签
category: Front-end //文章分类
draft: false //是否为草稿
lang: jp //仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
pinned: true #true开启本帖置顶，false不开启
---新增修改配置
.gitignore
约在第28行添加
package-lock.json
bun.lockb
yarn.lock
+ venvastro.config.mjs
约在第49行添加
icon({
include: {
+ mdi: ["*"],
"preprocess: vitePreprocess(),": ["*"],
"fa6-brands": ["*"],
"fa6-regular": ["*"],package.json
约在第29行添加
"@iconify-json/fa6-regular": "^1.2.3",
"@iconify-json/fa6-solid": "^1.2.3",
"@iconify-json/material-symbols": "^1.2.17",
+ "@iconify-json/mdi": "^1.2.3",
"@iconify/svelte": "^4.2.0",
"@swup/astro": "^1.6.0",
"@tailwindcss/typography": "^0.5.16",pnpm-lock.yaml
约在44-46行添加
'@iconify-json/material-symbols':
specifier: ^1.2.17
version: 1.2.17
+ '@iconify-json/mdi':
+ specifier: ^1.2.3
+ version: 1.2.3
'@iconify/svelte':
specifier: ^4.2.0
version: 4.2.0([email protected])约在第1197-1199行添加
cpu: [arm]
os: [linux]
+ '@iconify-json/[email protected]':
+ resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==}
+
'@img/[email protected]':
resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}约在第6312-6315行添加
dependencies:
'@iconify/types': 2.0.0
+ '@iconify-json/[email protected]':
+ dependencies:
+ '@iconify/types': 2.0.0
+
'@iconify/[email protected]([email protected])':
dependencies:
'@iconify/types': 2.0.0src/components/PostCard.astro
约在第24行添加
description: string;
draft: boolean;
style: string;
+ pinned?: boolean;
}
const {
entry,约在第37行添加
description,
style,
+ pinned,
} = Astro.props;
const className = Astro.props.class;约在第49-51行添加
---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
<div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
+ {pinned && <div class="absolute top-2 right-2 text-[var(--primary)]">
+ <Icon name="mdi:pin" class="w-5 h-5" />
+ </div>}
<a href={url}
class="transition group w-full block font-bold mb-3 text-3xl text-90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]src/components/PostPage.astro
约在第24行添加
image={entry.data.image}
description={entry.data.description}
draft={entry.data.draft}
+ pinned={entry.data.pinned}
class:list="onload-animation"
style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
></PostCard>src/content/config.ts
约在第14行添加
tags: z.array(z.string()).optional().default([]),
category: z.string().optional().default(""),
lang: z.string().optional().default(""),
+ pinned: z.boolean().optional().default(false),
/* For internal use */
prevTitle: z.string().default(""),src/types/config.ts
约在第87行添加
prevTitle?: string;
prevSlug?: string;
+ pinned?: boolean;
nextTitle?: string;
nextSlug?: string;
};src/utils/content-utils.ts
约在第11-14行添加
});
const sorted = allBlogPosts.sort((a, b) => {
+ // 首先按置顶状态排序
+ if (a.data.pinned && !b.data.pinned) return -1;
+ if (!a.data.pinned && b.data.pinned) return 1;
+ // 然后按发布时间排序
const dateA = new Date(a.data.published);
const dateB = new Date(b.data.published);
return dateA > dateB ? -1 : 1;参考资料
添加了将文章固定到博客顶部并解决与图标相关的问题的功能。
所做的更改：
- 在内容配置中添加字段以发布 frontmatter schemapinned
- 实施帖子排序逻辑以优先处理固定帖子
- 在 PostCard 组件中添加图钉图标显示
- 更新 PostPage 组件以处理固定的帖子
- 安装和配置用于图钉图标显示的 MDI 图标集
- 更新所有 README 文件中的文档
技术细节：
- 向 BlogPostData 接口添加了字段pinned: boolean
- 修改了 getSortedPosts，以首先对固定的帖子进行排序
- 添加了 @iconify-json/mdi 包以支持图标
- 在 astro.config.mjs 中设置了配置的 MDI 图标
重大更改：无
Fuwari主题博客添加置顶帖子功能
https://blog.imxizhen.asia/posts/教程/fuwari主题博客添加置顶帖子功能/