From 937c4b852758b9eb23266218ee24a330825b20d6 Mon Sep 17 00:00:00 2001 From: Kuizuo Date: Fri, 14 Jun 2024 22:07:57 +0800 Subject: [PATCH] feat: sticky --- ...46\236\220json\346\225\260\346\215\256.md" | 1 - ...0\253\347\224\250 TypeORM \344\272\206.md" | 1 + ...46\347\224\237\350\256\244\350\257\201.md" | 1 - ...14\344\270\216\346\204\237\346\202\237.md" | 2 +- ...\255\345\273\272\344\271\213Docusaurus.md" | 1 - ...45\345\217\243\346\234\215\345\212\241.md" | 1 - ...14\344\270\232\350\247\204\345\210\222.md" | 2 +- ...46\347\224\237\347\273\217\345\216\206.md" | 3 +- src/components/landing/BlogSection/index.tsx | 5 +-- src/plugin/plugin-content-blog/index.js | 33 ++++++++++++++++--- src/theme/BlogPostGridItems/index.tsx | 23 ++++++------- src/theme/BlogPostGridItems/styles.module.css | 16 +++++++++ src/theme/BlogPostItems/index.tsx | 3 +- 13 files changed, 64 insertions(+), 28 deletions(-) diff --git "a/blog/develop/\344\275\277\347\224\250JSONPath\350\247\243\346\236\220json\346\225\260\346\215\256.md" "b/blog/develop/\344\275\277\347\224\250JSONPath\350\247\243\346\236\220json\346\225\260\346\215\256.md" index fcd9df689..24f1febd6 100644 --- "a/blog/develop/\344\275\277\347\224\250JSONPath\350\247\243\346\236\220json\346\225\260\346\215\256.md" +++ "b/blog/develop/\344\275\277\347\224\250JSONPath\350\247\243\346\236\220json\346\225\260\346\215\256.md" @@ -7,7 +7,6 @@ tags: [javascript, json, node] keywords: [javascript, json, node] description: jsonpath 能够帮助我们快速的从json数据中提取想要的数据 image: /img/blog/jsonpath.png -sticky: 3 --- 之前学习爬虫的时候，如果是 HTML 的数据，通过 xpath 或是 css 选择器，就能很快的获取我们想要的数据，如果是 json 有没有类似 xpath 这种，能够直接根据条件定位数据，而不需要自行 json 解析在遍历获取。答案是有的，也就是 JSONPath。 diff --git "a/blog/develop/\346\234\211\344\272\206 Prisma \345\260\261\345\210\253\347\224\250 TypeORM \344\272\206.md" "b/blog/develop/\346\234\211\344\272\206 Prisma \345\260\261\345\210\253\347\224\250 TypeORM \344\272\206.md" index 54af26cbe..277556c6a 100644 --- "a/blog/develop/\346\234\211\344\272\206 Prisma \345\260\261\345\210\253\347\224\250 TypeORM \344\272\206.md" +++ "b/blog/develop/\346\234\211\344\272\206 Prisma \345\260\261\345\210\253\347\224\250 TypeORM \344\272\206.md" @@ -6,6 +6,7 @@ authors: kuizuo tags: [orm, prisma, typeorm] keywords: [orm, prisma, typeorm] image: https://img.kuizuo.cn/2024/0113174834-202401131748137.png +sticky: 2 --- 要说 2024 年 Node.js 的 ORM 框架应该选择哪个？毫无疑问选 Prisma。至于为何，请听我细细道来。 diff --git "a/blog/lifestyle/\350\256\260 Github \345\255\246\347\224\237\350\256\244\350\257\201.md" "b/blog/lifestyle/\350\256\260 Github \345\255\246\347\224\237\350\256\244\350\257\201.md" index 35eec8135..fc189da94 100644 --- "a/blog/lifestyle/\350\256\260 Github \345\255\246\347\224\237\350\256\244\350\257\201.md" +++ "b/blog/lifestyle/\350\256\260 Github \345\255\246\347\224\237\350\256\244\350\257\201.md" @@ -7,7 +7,6 @@ tags: [记录, github] keywords: [记录, github] description: 记录 Github 学生认证艰辛过程与经验分享。 image: https://img.kuizuo.cn/202312270150041.png -sticky: 1 --- 我个人是非常讨厌这些认证提交手续的，例如疫情健康报告，请假申请表等等，当然也包括这次 Github 学生认证。 diff --git "a/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md" "b/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md" index f35636fcf..975ceaeb1 100644 --- "a/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md" +++ "b/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md" @@ -7,7 +7,7 @@ tags: [AI, 工作, 记录] keywords: [AI, 工作, 记录] description: 这篇文章分享了作者在一家 AI 公司入职一个月的心得和体会，包括工作中的挑战与成长。 image: /img/blog/ai-people.png -sticky: 1 +sticky: 10 --- 已经在一家 AI 公司入职了一个月，记得半年前探讨着[职业规划](/blog/2023-year-end-summary)，对坐班有些厌恶的我，没想到有一天也会开始通勤打卡。而经历了这一个月的工作，我对坐班的态度有所转变，开始理解这种工作方式对我的意义。是时候分享入职这期间的工作内容与感受。 diff --git "a/blog/program/\347\254\254\344\272\214\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Docusaurus.md" "b/blog/program/\347\254\254\344\272\214\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Docusaurus.md" index 08acb99e9..84dad407a 100644 --- "a/blog/program/\347\254\254\344\272\214\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Docusaurus.md" +++ "b/blog/program/\347\254\254\344\272\214\344\270\252\345\215\232\345\256\242\346\220\255\345\273\272\344\271\213Docusaurus.md" @@ -7,7 +7,6 @@ tags: [blog, docusaurus, project] keywords: [blog, docusaurus, project] description: 使用 docusaurus 搭建个人博客，并对其主题进行魔改 image: /img/project/blog.png -sticky: 5 --- 博客地址: [愧怍的小站](https://kuizuo.cn/) diff --git "a/blog/project/API-Service\346\216\245\345\217\243\346\234\215\345\212\241.md" "b/blog/project/API-Service\346\216\245\345\217\243\346\234\215\345\212\241.md" index 6938ee1de..1a5050393 100644 --- "a/blog/project/API-Service\346\216\245\345\217\243\346\234\215\345\212\241.md" +++ "b/blog/project/API-Service\346\216\245\345\217\243\346\234\215\345\212\241.md" @@ -7,7 +7,6 @@ tags: [nuxt, vite, vue, ssr] keywords: [nuxt, vite, vue, ssr] description: 基于 Nuxt3 的 API 接口服务网站，易于封装，调用，部署。 image: https://img.kuizuo.cn/202312270328599.png -sticky: 2 --- 挺早之前就想写个 api 接口服务，封装下自己收集的一些 api 接口，以便调用，正好最近在接触 SSR 框架，所以就使用 [Nuxt3](https://v3.nuxtjs.org/) 来编写该项目。 diff --git "a/blog/reference/2023 \302\267 \350\260\210\350\260\210\350\201\214\344\270\232\350\247\204\345\210\222.md" "b/blog/reference/2023 \302\267 \350\260\210\350\260\210\350\201\214\344\270\232\350\247\204\345\210\222.md" index bdbd9ae91..e284f1688 100644 --- "a/blog/reference/2023 \302\267 \350\260\210\350\260\210\350\201\214\344\270\232\350\247\204\345\210\222.md" +++ "b/blog/reference/2023 \302\267 \350\260\210\350\260\210\350\201\214\344\270\232\350\247\204\345\210\222.md" @@ -1,7 +1,7 @@ --- slug: 2023-year-end-summary title: 2023 · 谈谈职业规划 -date: 2024-06-09 +date: 2023-12-25 authors: kuizuo tags: [年终总结] keywords: [年终总结] diff --git "a/blog/reference/\345\217\231\344\270\200\345\220\215\350\275\254\344\270\223\344\270\232+\344\274\221\345\255\246\347\232\204\345\244\247\345\255\246\347\224\237\347\273\217\345\216\206.md" "b/blog/reference/\345\217\231\344\270\200\345\220\215\350\275\254\344\270\223\344\270\232+\344\274\221\345\255\246\347\232\204\345\244\247\345\255\246\347\224\237\347\273\217\345\216\206.md" index 3f9b4136a..b9a033cc7 100644 --- "a/blog/reference/\345\217\231\344\270\200\345\220\215\350\275\254\344\270\223\344\270\232+\344\274\221\345\255\246\347\232\204\345\244\247\345\255\246\347\224\237\347\273\217\345\216\206.md" +++ "b/blog/reference/\345\217\231\344\270\200\345\220\215\350\275\254\344\270\223\344\270\232+\344\274\221\345\255\246\347\232\204\345\244\247\345\255\246\347\224\237\347\273\217\345\216\206.md" @@ -7,7 +7,8 @@ tags: [年中总结, 人生感悟] keywords: [年中总结, 人生感悟] description: 叙述一名转专业+休学的大学生经历 image: https://img.kuizuo.cn/202312270109542.png -draft: true +sticky: 999 +draft: true # 人生在世, 难免会有些挫折. --- 我一般很少做年中总结，但是这上半年发生在我事情比较多，加上毕业季，万千感慨涌上心头。 diff --git a/src/components/landing/BlogSection/index.tsx b/src/components/landing/BlogSection/index.tsx index bf205d01e..c5ec89807 100644 --- a/src/components/landing/BlogSection/index.tsx +++ b/src/components/landing/BlogSection/index.tsx @@ -67,10 +67,7 @@ export default function BlogSection(): JSX.Element { return (
近期博客} icon="ri:quill-pen-line" href={'/blog'}> -
+
{posts.map((postGroup, index) => (
{postGroup.map((post, i) => ( diff --git a/src/plugin/plugin-content-blog/index.js b/src/plugin/plugin-content-blog/index.js index 84c8b2bad..852434165 100644 --- a/src/plugin/plugin-content-blog/index.js +++ b/src/plugin/plugin-content-blog/index.js @@ -4,24 +4,49 @@ const { default: blogPlugin } = blogPluginExports async function blogPluginEnhanced(context, options) { const blogPluginInstance = await blogPlugin(context, options) + const { postsPerPage } = options return { ...blogPluginInstance, async contentLoaded({ content, allContent, actions }) { + // Sort blog with sticky + content.blogPosts.sort( + (a, b) => + (b.metadata.frontMatter.sticky || 0) - + (a.metadata.frontMatter.sticky || 0), + ) + + // Group posts by postsPerPage + const groupedPosts = Array.from( + { length: Math.ceil(content.blogPosts.length / postsPerPage) }, + (_, i) => ({ + items: content.blogPosts + .slice(i * postsPerPage, (i + 1) * postsPerPage) + .map((post) => post.id), + }), + ) + + // Update paginated blog list + content.blogListPaginated.forEach((page, i) => { + page.items = groupedPosts[i] ? groupedPosts[i].items : [] + }) + // Create default plugin pages await blogPluginInstance.contentLoaded({ content, allContent, actions }) // Create your additional pages - const { blogPosts, blogTags } = content + const { blogTags } = content const { setGlobalData } = actions setGlobalData({ - posts: blogPosts.slice(0, 10), // Only store 10 posts - postNum: blogPosts.length, + posts: content.blogPosts.slice(0, 10), // Only store 10 posts + postNum: content.blogPosts.length, tagNum: Object.keys(blogTags).length, }) }, } } -module.exports = Object.assign({}, blogPluginExports, { default: blogPluginEnhanced }) +module.exports = Object.assign({}, blogPluginExports, { + default: blogPluginEnhanced, +}) diff --git a/src/theme/BlogPostGridItems/index.tsx b/src/theme/BlogPostGridItems/index.tsx index ca6995991..3186ba543 100644 --- a/src/theme/BlogPostGridItems/index.tsx +++ b/src/theme/BlogPostGridItems/index.tsx @@ -1,8 +1,8 @@ -import type { Props as BlogPostItemsProps } from '@theme/BlogPostItems' - import Link from '@docusaurus/Link' +import type { BlogPostFrontMatter } from '@docusaurus/plugin-content-blog' import { cn } from '@site/src/lib/utils' import Tag from '@site/src/theme/Tag' +import type { Props as BlogPostItemsProps } from '@theme/BlogPostItems' import { AnimatePresence, motion } from 'framer-motion' import { useState } from 'react' @@ -11,20 +11,21 @@ import styles from './styles.module.css' export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.Element { const [hoveredIndex, setHoveredIndex] = useState(null) - const data = items.map(({ content: BlogPostContent }, i) => { - const { metadata: blogMetaData, frontMatter } = BlogPostContent - const { title } = frontMatter - const { permalink, date, tags } = blogMetaData + const data = items.map(({ content: BlogPostContent }) => { + const { metadata, frontMatter } = BlogPostContent + const { title, sticky } = frontMatter as BlogPostFrontMatter & { sticky: number } + const { permalink, date, tags } = metadata const dateObj = new Date(date) const dateString = `${dateObj.getFullYear()}-${`0${dateObj.getMonth() + 1}`.slice( -2, )}-${`0${dateObj.getDate()}`.slice(-2)}` return { - title: title!, + title, link: permalink, - tags: tags, + tags, date: dateString, + sticky, } }) @@ -32,12 +33,12 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
{data.map((item, idx) => (
setHoveredIndex(idx)} onMouseLeave={() => setHoveredIndex(null)} > - + {hoveredIndex === idx && ( - + {item.title}
({ opacity: 1, y: 0,