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

components/BlogPostCardMini.js

@@ -1,25 +0,0 @@
-import BLOG from '@/blog.config'
-import Link from 'next/link'
-
-const BlogPostCardMini = ({ post }) => {
-  return (
-    <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} >
-     <div className='sm:flex w-full border dark:border-gray-800 my-2 duration-200 transform hover:scale-105 hover:shadow-2xl bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
-       {/*  封面图 */}
-       {post.page_cover && post.page_cover.length > 1 && (
-         <img className='sm:w-40 w-full object-cover cursor-pointer' src={post.page_cover} alt={post.title} />
-       )}
-
-       <main className='px-2 overflow-x-hidden'>
-         <div
-           className='block my-3 leading-tight font-semibold text-black dark:text-gray-200 hover:underline whitespace-nowrap'>
-           {post.title}
-         </div>
-         <p className='mt-2 text-gray-500 dark:text-gray-400 text-xs overflow-x-hidden'>{post.summary}</p>
-       </main>
-     </div>
-    </Link>
-  )
-}
-
-export default BlogPostCardMini

components/SideBar.js

@@ -61,7 +61,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
         <section className='mt-3'>
           <div className='text-sm font-bold py-2 px-5  flex flex-nowrap justify-between'>
             <div className='text-black font-bold dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
-            <Link href='/blogs'>
+            <Link href='/archive'>
               <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <i className='fa fa-angle-double-right'/>
               </div>