From 255a774e1c82af839ac06549fa796115518bf98a Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Wed, 3 Nov 2021 17:40:19 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E9=A6=96=E9=A1=B5=E3=80=81=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E9=A1=B5=E8=83=8C=E6=99=AF=E8=89=B2=E5=BE=AE=E8=B0=83?= =?UTF-8?q?=EF=BC=9B=20=E4=BE=A7=E8=BE=B9=E6=8A=BD=E5=B1=89=E5=AE=8C?= =?UTF-8?q?=E5=96=84=EF=BC=9B=20=E6=A0=87=E7=AD=BE=E7=BB=84=E9=95=BF?= =?UTF-8?q?=E5=BA=A6=E8=B0=83=E6=95=B4=EF=BC=9B=20=E6=9C=80=E8=BF=91?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E6=97=A5=E6=9C=9F=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=B7=AF=E7=94=B1=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=EF=BC=8C=E5=B0=81=E8=A3=85=EF=BC=9B=20=E6=B8=85=E9=99=A4?= =?UTF-8?q?=E5=86=97=E4=BD=99=E4=BB=A3=E7=A0=81=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Drawer.js | 58 ++++++++++++++++++++++------------- components/LastedPosts.js | 45 +++++++++++++++++++++++++++ components/MenuButtonGroup.js | 2 +- components/SideBar.js | 27 +++------------- components/TagList.js | 2 +- components/TopNav.js | 4 +-- layouts/BaseLayout.js | 2 +- lib/formatDate.js | 30 +++++++++++++++++- lib/notion/getPostBlocks.js | 1 - pages/article/[slug].js | 6 ++-- pages/index.js | 2 +- 11 files changed, 125 insertions(+), 54 deletions(-) create mode 100644 components/LastedPosts.js diff --git a/components/Drawer.js b/components/Drawer.js index 155a02f7..1375e7d2 100644 --- a/components/Drawer.js +++ b/components/Drawer.js @@ -2,18 +2,18 @@ import Link from 'next/link' import BLOG from '@/blog.config' import SearchInput from '@/components/SearchInput' import MenuButtonGroup from '@/components/MenuButtonGroup' -import TocBar from '@/components/TocBar' import React, { useImperativeHandle, useState } from 'react' import InfoCard from '@/components/InfoCard' import TagList from '@/components/TagList' import Logo from '@/components/Logo' +import LastedPosts from '@/components/LastedPosts' /** * 抽屉面板，可以从侧面拉出 * @returns {JSX.Element} * @constructor */ -const Drawer = ({ post, currentTag, cRef, tags }) => { +const Drawer = ({ post, currentTag, cRef, tags, posts }) => { // 暴露给父组件 通过cRef.current.handleMenuClick 调用 useImperativeHandle(cRef, () => { return { @@ -26,14 +26,13 @@ const Drawer = ({ post, currentTag, cRef, tags }) => { switchShowDrawer(!showDrawer) } return <> -
+
+ {/* LOGO */}
- {/* LOGO */} -
+ className={(showDrawer ? '' : '-ml-72') + ' duration-200 w-72 border-r dark:border-gray-600'}> +
+ className='z-10 py-2 duration-200 mr-2 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
@@ -42,28 +41,45 @@ const Drawer = ({ post, currentTag, cRef, tags }) => { {/* 侧边菜单 */}
-
+ className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-scroll h-screen w-72 duration-200 overflow-y-auto'}> +
+ {/* 搜索框 */}
- - {/* 菜单 */} - - {tags && ( -
- {/* 标签云 */} -
- 标签 - -
+ + {/* 信息卡 */} + +
+ + +
+ + {/* 最新文章 */} + {posts && ( +
+
)} + + {/* 标签云 */} + {tags && ( +
+
+
标签
+
+
+ +
+
+ )} +
{/* 背景蒙版 */} -
} diff --git a/components/LastedPosts.js b/components/LastedPosts.js new file mode 100644 index 00000000..6b551fa7 --- /dev/null +++ b/components/LastedPosts.js @@ -0,0 +1,45 @@ +import Link from 'next/link' +import BLOG from '@/blog.config' +import { formatDateFmt } from '@/lib/formatDate' +import { useRouter } from 'next/router' + +/** + * 最新文章列表 + * @param posts + * @constructor + */ +const LastedPosts = ({ posts }) => { + // 按时间排序 + if (posts) { + posts = posts.sort((a, b) => { + const dateA = new Date(a?.lastEditedTime || a.createdTime) + const dateB = new Date(b?.lastEditedTime || b.createdTime) + return dateB - dateA + }).slice(0, 5) + } + const router = useRouter() + + return <> +
+
最近更新
+
+
+ {posts.map(post => { + return ( + +
+
+ {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')} +
+
+ {post.title} +
+
+ + ) + })} +
+ +} +export default LastedPosts diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index d74ad82f..5a756e42 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -24,7 +24,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => { link => link.show && ( - +
diff --git a/components/SideBar.js b/components/SideBar.js index 8838b651..b3a9db30 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -2,8 +2,7 @@ import React from 'react' import MenuButtonGroup from '@/components/MenuButtonGroup' import InfoCard from '@/components/InfoCard' import TagList from '@/components/TagList' -import BLOG from '@/blog.config' -import Link from 'next/link' +import LastedPosts from '@/components/LastedPosts' const SideBar = ({ tags, currentTag, post, posts }) => { // 按时间排序 @@ -18,35 +17,19 @@ const SideBar = ({ tags, currentTag, post, posts }) => { return