feature:

新增归档页面

components/BlogPostArchive.js

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react'
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostArchive = ({ posts = [], archiveTitle }) => {
+  const targetRef = useRef(null)
+  if (!posts || posts.length === 0) {
+    return <></>
+  } else {
+    return <div className='py-2' ref={targetRef}>
+      <div className='py-2 text-xl dark:text-white'>{archiveTitle}</div>
+      {/* 文章列表 */}
+      <ul className='flex flex-wrap space-y-1'>
+        {posts.map(post => (
+          <Link key={post.id} href={`${BLOG.path}/article/${post.slug}`}>
+            <li className='w-full border-l pl-2 hover:underline cursor-pointer hover:scale-105 transform duration-500'>
+              <span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-gray-200 text-blue-600'>{post.title}</span>
+            </li>
+          </Link>
+        ))}
+      </ul>
+
+    </div>
+  }
+}
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param postsPerPage 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, postsPerPage) {
+  return totalPosts.slice(
+    0,
+    postsPerPage * page
+  )
+}
+export default BlogPostArchive