diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
new file mode 100644
index 00000000..c37b2722
--- /dev/null
+++ b/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
diff --git a/components/BlogPostCardMini.js b/components/BlogPostCardMini.js
deleted file mode 100644
index bb87d885..00000000
--- a/components/BlogPostCardMini.js
+++ /dev/null
@@ -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
diff --git a/components/SideBar.js b/components/SideBar.js
index af1eee4a..bfb232d3 100644
--- a/components/SideBar.js
+++ b/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>
diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index d8fdfca8..f9d619bc 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -4,7 +4,8 @@ export default {
     RSS: 'RSS',
     SEARCH: 'Search',
     ABOUT: 'About',
-    MAIL: 'E-Mail'
+    MAIL: 'E-Mail',
+    ARCHIVE: 'Archive'
   },
   COMMON: {
     MORE: 'More',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index 6a6b11cd..33445f81 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -5,7 +5,8 @@ export default {
     SEARCH: '搜索',
     ABOUT: '关于',
     NAVIGATOR: '导航',
-    MAIL: '邮箱'
+    MAIL: '邮箱',
+    ARCHIVE: '归档'
   },
   COMMON: {
     MORE: '更多',
diff --git a/pages/blogs/index.js b/pages/archive/index.js
similarity index 60%
rename from pages/blogs/index.js
rename to pages/archive/index.js
index f8278b00..ddfa1b54 100644
--- a/pages/blogs/index.js
+++ b/pages/archive/index.js
@@ -6,6 +6,7 @@ import { getNotionPageData } from '@/lib/notion/getNotionData'
 import StickyBar from '@/components/StickyBar'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
+import BlogPostArchive from '@/components/BlogPostArchive'
 
 export async function getStaticProps () {
   const from = 'index'
@@ -31,24 +32,39 @@ const Index = ({ allPosts, tags, categories }) => {
 
   // 时间排序
   postsSortByDate.sort((a, b) => {
-    const dateA = new Date(a?.lastEditedTime || a.createdTime)
-    const dateB = new Date(b?.lastEditedTime || b.createdTime)
+    const dateA = new Date(a?.date.start_date || a.createdTime)
+    const dateB = new Date(b?.date.start_date || b.createdTime)
     return dateB - dateA
   })
 
   const meta = {
-    title: `${BLOG.title} | ${locale.COMMON.LATEST_POSTS} `,
+    title: `${BLOG.title} | ${locale.NAV.ARCHIVE} `,
     description: BLOG.description,
     type: 'website'
   }
 
+  const archivePosts = { }
+
+  postsSortByDate.forEach(post => {
+    const date = post.date.start_date.slice(0, 7)
+    if (archivePosts[date]) {
+      archivePosts[date].push(post)
+    } else {
+      archivePosts[date] = [post]
+    }
+  })
+
   return (
     <BaseLayout meta={meta} tags={tags} categories={categories}>
-      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
+      <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16 '>
         <StickyBar>
-          <div className='py-4 text-lg lg:mx-14'><i className='fa fa-newspaper-o mr-4'/>{locale.COMMON.LATEST_POSTS}</div>
+          <div className='py-4 text-lg lg:mx-14 dark:text-gray-200'><i className='fa fa-newspaper-o mr-4'/>{locale.NAV.ARCHIVE}</div>
         </StickyBar>
-        <BlogPostListScroll posts={postsSortByDate} tags={tags} />
+        <div className='mt-20 mx-2 lg:mx-20 bg-white p-12 dark:bg-gray-800'>
+          {Object.keys(archivePosts).map(archiveTitle => (
+             <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
+          ))}
+        </div>
       </div>
     </BaseLayout>
   )