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 + venv
astro.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(svelte@5.25.9)
约在第1197-1199行添加
cpu: [arm] os: [linux] + '@iconify-json/mdi@1.2.3': + resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==} + '@img/sharp-linux-s390x@0.33.5': 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/mdi@1.2.3': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/svelte@4.2.0(svelte@5.25.9)': dependencies: '@iconify/types': 2.0.0
src/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主题博客添加置顶帖子功能/