From a90eae972bab397dc5f050b4ef7bdbcb242ea9c4 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 27 Jan 2022 17:59:03 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feature:=E9=80=9A=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CollapseLeft.js  | 38 +++++++++++++++++++++++++
 components/SideBarDrawer.js | 55 +++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 components/CollapseLeft.js
 create mode 100644 components/SideBarDrawer.js

diff --git a/components/CollapseLeft.js b/components/CollapseLeft.js
new file mode 100644
index 00000000000..56d86525c74
--- /dev/null
+++ b/components/CollapseLeft.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+  const collapseRef = useRef(null)
+  const collapseSection = element => {
+    const sectionWidth = element.scrollWidth
+    requestAnimationFrame(function () {
+      element.style.width = sectionWidth + 'px'
+      requestAnimationFrame(function () {
+        element.style.width = 0 + 'px'
+      })
+    })
+  }
+  const expandSection = element => {
+    const sectionWidth = element.scrollWidth
+    element.style.width = sectionWidth + 'px'
+    const clearTime = setTimeout(() => {
+      element.style.width = 'auto'
+    }, 400)
+    clearTimeout(clearTime)
+  }
+  useEffect(() => {
+    const element = collapseRef.current
+    if (props.isOpen) {
+      expandSection(element)
+    } else {
+      collapseSection(element)
+    }
+  }, [props.isOpen])
+  return (
+    <div ref={collapseRef} style={{ width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+      {props.children}
+    </div>
+  )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
new file mode 100644
index 00000000000..e6db94a5550
--- /dev/null
+++ b/components/SideBarDrawer.js
@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  React.useEffect(() => {
+    // 页面渲染后删除hidden属性
+    // const sideBarWrapperElement = document.getElementById('sidebar-wrapper')
+    // sideBarWrapperElement?.classList?.remove('hidden')
+
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (window) {
+      if (showStatus) {
+        onOpen()
+      } else {
+        onClose()
+      }
+      const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+      const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+      if (showStatus) {
+        sideBarDrawer.classList.replace('-ml-80', 'ml-0')
+        sideBarDrawerBackground.classList.replace('hidden', 'block')
+      } else {
+        sideBarDrawer.classList.replace('ml-0', '-ml-80')
+        sideBarDrawerBackground.classList.replace('block', 'hidden')
+      }
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' ' + className}>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0' : '-ml-80'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50`}>
+      {children}
+    </div>
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism`}/>
+  </div>
+}
+export default SideBarDrawer

From 8a6d5863c3c710983fe79c47b5619b1bcc999fcf Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 27 Jan 2022 18:00:38 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feature:=20=E6=8F=90=E4=BA=A4medium?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/Layout404.js                    |  6 ++
 themes/Medium/LayoutArchive.js                |  6 ++
 themes/Medium/LayoutBase.js                   | 33 ++++++++
 themes/Medium/LayoutCategory.js               |  8 ++
 themes/Medium/LayoutCategoryIndex.js          |  8 ++
 themes/Medium/LayoutIndex.js                  |  9 +++
 themes/Medium/LayoutPage.js                   |  8 ++
 themes/Medium/LayoutSearch.js                 | 31 +++++++
 themes/Medium/LayoutSlug.js                   | 53 ++++++++++++
 themes/Medium/LayoutTag.js                    |  8 ++
 themes/Medium/LayoutTagIndex.js               |  8 ++
 themes/Medium/components/BlogPostCard.js      | 80 +++++++++++++++++++
 themes/Medium/components/BlogPostListEmpty.js | 12 +++
 themes/Medium/components/BlogPostListPage.js  | 32 ++++++++
 themes/Medium/components/Card.js              |  9 +++
 themes/Medium/components/Footer.js            | 30 +++++++
 themes/Medium/components/InfoCard.js          | 27 +++++++
 themes/Medium/components/LogoBar.js           | 25 ++++++
 themes/Medium/components/PaginationSimple.js  | 42 ++++++++++
 themes/Medium/components/SocialButton.js      | 36 +++++++++
 themes/Medium/components/TagItemMini.js       | 17 ++++
 themes/Medium/config_medium.js                | 13 +++
 themes/Medium/index.js                        | 12 +++
 themes/index.js                               |  3 +-
 24 files changed, 515 insertions(+), 1 deletion(-)
 create mode 100644 themes/Medium/Layout404.js
 create mode 100644 themes/Medium/LayoutArchive.js
 create mode 100644 themes/Medium/LayoutBase.js
 create mode 100644 themes/Medium/LayoutCategory.js
 create mode 100644 themes/Medium/LayoutCategoryIndex.js
 create mode 100644 themes/Medium/LayoutIndex.js
 create mode 100644 themes/Medium/LayoutPage.js
 create mode 100644 themes/Medium/LayoutSearch.js
 create mode 100644 themes/Medium/LayoutSlug.js
 create mode 100644 themes/Medium/LayoutTag.js
 create mode 100644 themes/Medium/LayoutTagIndex.js
 create mode 100644 themes/Medium/components/BlogPostCard.js
 create mode 100644 themes/Medium/components/BlogPostListEmpty.js
 create mode 100644 themes/Medium/components/BlogPostListPage.js
 create mode 100644 themes/Medium/components/Card.js
 create mode 100644 themes/Medium/components/Footer.js
 create mode 100644 themes/Medium/components/InfoCard.js
 create mode 100644 themes/Medium/components/LogoBar.js
 create mode 100644 themes/Medium/components/PaginationSimple.js
 create mode 100644 themes/Medium/components/SocialButton.js
 create mode 100644 themes/Medium/components/TagItemMini.js
 create mode 100644 themes/Medium/config_medium.js
 create mode 100644 themes/Medium/index.js

diff --git a/themes/Medium/Layout404.js b/themes/Medium/Layout404.js
new file mode 100644
index 00000000000..cd28a607aea
--- /dev/null
+++ b/themes/Medium/Layout404.js
@@ -0,0 +1,6 @@
+
+export const Layout404 = () => {
+  return <div>
+   404 Not found.
+  </div>
+}
diff --git a/themes/Medium/LayoutArchive.js b/themes/Medium/LayoutArchive.js
new file mode 100644
index 00000000000..bf9ebdc5622
--- /dev/null
+++ b/themes/Medium/LayoutArchive.js
@@ -0,0 +1,6 @@
+export const LayoutArchive = (props) => {
+  // const { posts, tags, categories, postCount } = props
+  return <div {...props}>
+    Archive Page
+  </div>
+}
diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
new file mode 100644
index 00000000000..866d7e64fd5
--- /dev/null
+++ b/themes/Medium/LayoutBase.js
@@ -0,0 +1,33 @@
+import CommonHead from '@/components/CommonHead'
+import React from 'react'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import LogoBar from './components/LogoBar'
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta } = props
+
+  return (
+    <div className='bg-white w-full h-full min-h-screen justify-center'>
+      <CommonHead meta={meta}/>
+      <main id="wrapper" className='max-w-7xl w-full h-full mx-auto'>
+        <LogoBar/>
+        <div className='pt-12 fixed top-24 w-80 pl-8 hidden lg:block'>
+          <InfoCard/>
+        </div>
+        <div className='lg:ml-72 max-w-3xl w-full px-5'>
+            {children}
+        </div>
+      </main>
+      <Footer/>
+    </div>
+  )
+}
+
+export default LayoutBase
diff --git a/themes/Medium/LayoutCategory.js b/themes/Medium/LayoutCategory.js
new file mode 100644
index 00000000000..3a4bb0e9551
--- /dev/null
+++ b/themes/Medium/LayoutCategory.js
@@ -0,0 +1,8 @@
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategory = (props) => {
+  const { category } = props
+  return <LayoutBase {...props}>
+    Category -  {category}
+  </LayoutBase>
+}
diff --git a/themes/Medium/LayoutCategoryIndex.js b/themes/Medium/LayoutCategoryIndex.js
new file mode 100644
index 00000000000..fcde0a080fa
--- /dev/null
+++ b/themes/Medium/LayoutCategoryIndex.js
@@ -0,0 +1,8 @@
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategoryIndex = (props) => {
+  // const { tags, allPosts, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>
+    CategoryIndex
+  </LayoutBase>
+}
diff --git a/themes/Medium/LayoutIndex.js b/themes/Medium/LayoutIndex.js
new file mode 100644
index 00000000000..3d336bd793e
--- /dev/null
+++ b/themes/Medium/LayoutIndex.js
@@ -0,0 +1,9 @@
+import BlogPostListPage from './components/BlogPostListPage'
+import LayoutBase from './LayoutBase'
+
+export const LayoutIndex = (props) => {
+  // const { posts, tags, meta, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>
+      <BlogPostListPage {...props}/>
+  </LayoutBase>
+}
diff --git a/themes/Medium/LayoutPage.js b/themes/Medium/LayoutPage.js
new file mode 100644
index 00000000000..d4355d468a0
--- /dev/null
+++ b/themes/Medium/LayoutPage.js
@@ -0,0 +1,8 @@
+import LayoutBase from '../Hexo/LayoutBase'
+
+export const LayoutPage = (props) => {
+  const { page } = props
+  return <LayoutBase {...props}>
+    Page - {page}
+  </LayoutBase>
+}
diff --git a/themes/Medium/LayoutSearch.js b/themes/Medium/LayoutSearch.js
new file mode 100644
index 00000000000..c7469a60ffb
--- /dev/null
+++ b/themes/Medium/LayoutSearch.js
@@ -0,0 +1,31 @@
+import { useRouter } from 'next/router'
+import LayoutBase from './LayoutBase'
+
+export const LayoutSearch = (props) => {
+  const { posts } = props
+  let filteredPosts
+  const searchKey = getSearchKey()
+  if (searchKey) {
+    filteredPosts = posts.filter(post => {
+      const tagContent = post.tags ? post.tags.join(' ') : ''
+      const searchContent = post.title + post.summary + tagContent
+      return searchContent.toLowerCase().includes(searchKey.toLowerCase())
+    })
+  } else {
+    filteredPosts = posts
+  }
+
+  console.log(filteredPosts)
+
+  return <LayoutBase {...props}>
+    Search {searchKey}
+  </LayoutBase>
+}
+
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
new file mode 100644
index 00000000000..cb621b12171
--- /dev/null
+++ b/themes/Medium/LayoutSlug.js
@@ -0,0 +1,53 @@
+import BLOG from '@/blog.config'
+import { getPageTableOfContents } from 'notion-utils'
+import 'prismjs'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-typescript'
+import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import LayoutBase from './LayoutBase'
+import Comment from '@/components/Comment'
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+export const LayoutSlug = (props) => {
+  const { post } = props
+  const meta = {
+    title: `${post.title} | ${BLOG.TITLE}`,
+    description: post.summary,
+    type: 'article',
+    tags: post.tags
+  }
+
+  if (post?.blockMap?.block) {
+    post.content = Object.keys(post.blockMap.block)
+    post.toc = getPageTableOfContents(post, post.blockMap)
+  }
+
+  return <LayoutBase {...props} meta={meta}>
+    <h1 className='text-4xl mt-12'>{post?.title}</h1>
+    {/* Notion文章主体 */}
+    <section id='notion-article' className='px-1 max-w-5xl'>
+      {post.blockMap && (
+        <NotionRenderer
+          recordMap={post.blockMap}
+          mapPageUrl={mapPageUrl}
+          components={{
+            equation: Equation,
+            code: Code,
+            collectionRow: CollectionRow,
+            collection: Collection
+          }}
+        />
+      )}
+    </section>
+    <div>
+      <Comment frontMatter={post}/>
+
+    </div>
+  </LayoutBase>
+}
diff --git a/themes/Medium/LayoutTag.js b/themes/Medium/LayoutTag.js
new file mode 100644
index 00000000000..5cfacb20813
--- /dev/null
+++ b/themes/Medium/LayoutTag.js
@@ -0,0 +1,8 @@
+import LayoutBase from './LayoutBase'
+
+export const LayoutTag = (props) => {
+  const { tag } = props
+  return <LayoutBase>
+     Tag - {tag}
+   </LayoutBase>
+}
diff --git a/themes/Medium/LayoutTagIndex.js b/themes/Medium/LayoutTagIndex.js
new file mode 100644
index 00000000000..01a16e62c6f
--- /dev/null
+++ b/themes/Medium/LayoutTagIndex.js
@@ -0,0 +1,8 @@
+import LayoutBase from './LayoutBase'
+
+export const LayoutTagIndex = (props) => {
+  // const { tags, categories, postCount, latestPosts } = props
+  return <LayoutBase {...props}>
+     TagIndex
+   </LayoutBase>
+}
diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js
new file mode 100644
index 00000000000..3b63256eaa3
--- /dev/null
+++ b/themes/Medium/components/BlogPostCard.js
@@ -0,0 +1,80 @@
+import BLOG from '@/blog.config'
+import { faAngleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import React from 'react'
+import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
+import TagItemMini from './TagItemMini'
+import CONFIG_MEDIUM from '../config_medium'
+import { useGlobal } from '@/lib/global'
+
+const BlogPostCard = ({ post, showSummary }) => {
+  const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
+  const { locale } = useGlobal()
+  return (
+      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl '>
+
+        <div className='lg:p-8 p-4 flex flex-col w-full'>
+          <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-4xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'}>
+              {post.title}
+            </a>
+          </Link>
+
+          <div className={'flex mt-2 items-center justify-start flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '}>
+            {post.date.start_date}
+          </div>
+
+          {(!showPreview || showSummary) && <p className='my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
+            {post.summary}
+          </p>}
+
+          {showPreview && <div className='overflow-ellipsis truncate'>
+            <NotionRenderer
+              bodyClassName='max-h-full'
+              recordMap={post.blockMap}
+              mapPageUrl={mapPageUrl}
+              components={{
+                equation: Equation,
+                code: Code,
+                collectionRow: CollectionRow,
+                collection: Collection
+              }}
+            />
+             <div className='article-cover pointer-events-none'>
+                <div className='w-full justify-start flex'>
+                  <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
+                      <a className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform  text-red-500 cursor-pointer'>
+                        {locale.COMMON.ARTICLE_DETAIL}
+                        <FontAwesomeIcon className='ml-1' icon={faAngleRight} /></a>
+
+                   </Link>
+                </div>
+              </div>
+          </div> }
+
+          {/* <div className='text-gray-400 justify-between flex'>
+
+            <Link href={`/category/${post.category}`} passHref>
+                <a className='cursor-pointer font-light text-sm hover:underline transform'>
+                  <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
+                </a>
+              </Link>
+              <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
+                <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
+              </div>
+          </div> */}
+
+        </div>
+        <hr className='w-full'/>
+
+      </div>
+
+  )
+}
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+export default BlogPostCard
diff --git a/themes/Medium/components/BlogPostListEmpty.js b/themes/Medium/components/BlogPostListEmpty.js
new file mode 100644
index 00000000000..86977fd0bf2
--- /dev/null
+++ b/themes/Medium/components/BlogPostListEmpty.js
@@ -0,0 +1,12 @@
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <p className='text-gray-500 dark:text-gray-300'>没有找到文章 {(currentSearch && <div>{currentSearch}</div>)}</p>
+  </div>
+}
+export default BlogPostListEmpty
diff --git a/themes/Medium/components/BlogPostListPage.js b/themes/Medium/components/BlogPostListPage.js
new file mode 100644
index 00000000000..fe91b9b0c41
--- /dev/null
+++ b/themes/Medium/components/BlogPostListPage.js
@@ -0,0 +1,32 @@
+import BlogPostCard from './BlogPostCard'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import PaginationSimple from './PaginationSimple'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+
+  if (!posts || posts.length === 0) {
+    return <BlogPostListEmpty />
+  } else {
+    return (
+      <div id="container" className='w-full justify-center'>
+        {/* 文章列表 */}
+        {posts.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+        <PaginationSimple page={page} totalPage={totalPage} />
+      </div>
+    )
+  }
+}
+
+export default BlogPostListPage
diff --git a/themes/Medium/components/Card.js b/themes/Medium/components/Card.js
new file mode 100644
index 00000000000..d24c046e476
--- /dev/null
+++ b/themes/Medium/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card
diff --git a/themes/Medium/components/Footer.js b/themes/Medium/components/Footer.js
new file mode 100644
index 00000000000..57ad77970f2
--- /dev/null
+++ b/themes/Medium/components/Footer.js
@@ -0,0 +1,30 @@
+import { faCopyright, faEye, faShieldAlt, faUsers, faHeart } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+import BLOG from '@/blog.config'
+
+const Footer = ({ title }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
+  return (
+    <footer
+      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+    >
+      <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+      <br/>
+
+      <span>Powered by <a href='https://notion.so' className='underline font-bold text-gray-500 dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-500 dark:text-gray-300'>NotionNext</a>.</span></span>
+
+      {BLOG.BEI_AN && <><br /><FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+      <span className='hidden busuanzi_container_site_pv'>
+            <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+      <span className='pl-2 hidden busuanzi_container_site_uv'>
+        <FontAwesomeIcon icon={faUsers}/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <br/>
+        <h1>{title}</h1>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/themes/Medium/components/InfoCard.js b/themes/Medium/components/InfoCard.js
new file mode 100644
index 00000000000..47d300f6542
--- /dev/null
+++ b/themes/Medium/components/InfoCard.js
@@ -0,0 +1,27 @@
+import BLOG from '@/blog.config'
+import Image from 'next/image'
+import Router from 'next/router'
+import React from 'react'
+import SocialButton from './SocialButton'
+
+const InfoCard = () => {
+  return <>
+    <div className='items-center justify-start font-sans '>
+        <div className='hover:scale-105 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/about') }}>
+          <Image
+          alt={BLOG.AUTHOR}
+          width={120}
+          height={120}
+          loading='lazy'
+          src='/avatar.jpg'
+          className='rounded-full'
+        />
+        </div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200'>{BLOG.BIO}</div>
+        <SocialButton/>
+    </div>
+  </>
+}
+
+export default InfoCard
diff --git a/themes/Medium/components/LogoBar.js b/themes/Medium/components/LogoBar.js
new file mode 100644
index 00000000000..75a23aecd57
--- /dev/null
+++ b/themes/Medium/components/LogoBar.js
@@ -0,0 +1,25 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+
+export default function LogoBar () {
+  const { locale } = useGlobal()
+
+  return <div id='top-wrapper' className='w-full flex justify-center font-sans'>
+        <div className='flex mx-auto w-full items-center space-x-3 py-6 px-5'>
+            <Link href='/'>
+                 <a className='text-3xl'>{BLOG.TITLE}</a>
+            </Link>
+            <Link href='/about'>
+                <a className='text-gray-600'>{locale.NAV.ABOUT}</a>
+            </Link>
+            {BLOG.CONTACT_EMAIL && <Link href={`mailto:${BLOG.CONTACT_EMAIL}`} passHref>
+                <div className='bg-black px-2 py-1 rounded-full'>
+                <FontAwesomeIcon className='cursor-pointer text-white' icon={faEnvelope}/>
+                </div>
+            </Link>}
+        </div>
+    </div>
+}
diff --git a/themes/Medium/components/PaginationSimple.js b/themes/Medium/components/PaginationSimple.js
new file mode 100644
index 00000000000..5eb30af8372
--- /dev/null
+++ b/themes/Medium/components/PaginationSimple.js
@@ -0,0 +1,42 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, showNext }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  return (
+    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
+     <Link
+        href={ {
+          pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
+        } } passHref >
+        <a
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+        >
+          ← {locale.PAGINATION.PREV}
+        </a>
+      </Link>
+      <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
+        <a
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+        >
+          {locale.PAGINATION.NEXT} →
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple
diff --git a/themes/Medium/components/SocialButton.js b/themes/Medium/components/SocialButton.js
new file mode 100644
index 00000000000..c50f5984142
--- /dev/null
+++ b/themes/Medium/components/SocialButton.js
@@ -0,0 +1,36 @@
+import BLOG from '@/blog.config'
+import { faGithub, faTelegram, faTwitter, faWeibo } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faRss } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return <div className='w-52 flex-wrap flex'>
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <FontAwesomeIcon icon={faTwitter} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+        <FontAwesomeIcon icon={faTelegram} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
+      </a>
+    </div>
+  </div>
+}
+export default SocialButton
diff --git a/themes/Medium/components/TagItemMini.js b/themes/Medium/components/TagItemMini.js
new file mode 100644
index 00000000000..9fec9e35571
--- /dev/null
+++ b/themes/Medium/components/TagItemMini.js
@@ -0,0 +1,17 @@
+import { faTag } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
+    <a className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+      mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
+       ${selected
+      ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
+      : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}` }>
+    <div className='font-light dark:text-gray-400'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+    </a>
+  </Link>
+}
+
+export default TagItemMini
diff --git a/themes/Medium/config_medium.js b/themes/Medium/config_medium.js
new file mode 100644
index 00000000000..9cb83c84426
--- /dev/null
+++ b/themes/Medium/config_medium.js
@@ -0,0 +1,13 @@
+const CONFIG_MEDIUM = {
+
+  POST_LIST_COVER: true, // 文章列表显示图片封面
+  POST_LIST_PREVIEW: true, // 显示文章预览
+
+  // 菜单
+  MENU_ABOUT: true, // 显示关于
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true // 显示搜索
+}
+export default CONFIG_MEDIUM
diff --git a/themes/Medium/index.js b/themes/Medium/index.js
new file mode 100644
index 00000000000..5bcc655ce44
--- /dev/null
+++ b/themes/Medium/index.js
@@ -0,0 +1,12 @@
+import CONFIG_MEDIUM from './config_medium'
+export { CONFIG_MEDIUM as THEME_CONFIG }
+export { LayoutIndex } from './LayoutIndex'
+export { LayoutSearch } from './LayoutSearch'
+export { LayoutArchive } from './LayoutArchive'
+export { LayoutSlug } from './LayoutSlug'
+export { Layout404 } from './Layout404'
+export { LayoutCategory } from './LayoutCategory'
+export { LayoutCategoryIndex } from './LayoutCategoryIndex'
+export { LayoutPage } from './LayoutPage'
+export { LayoutTag } from './LayoutTag'
+export { LayoutTagIndex } from './LayoutTagIndex'
diff --git a/themes/index.js b/themes/index.js
index b28dd755f0a..d17405e5529 100644
--- a/themes/index.js
+++ b/themes/index.js
@@ -5,4 +5,5 @@
 // export * from './Empty' //  空主题
 // export * from './NEXT'
 // export * from './Fukasawa'
-export * from './Hexo'
+// export * from './Hexo'
+export * from './Medium'

From d0c1984776d4fcb208e0abee0d48105593eb468e Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 27 Jan 2022 18:04:13 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/LayoutPage.js              |  7 ++++---
 themes/Medium/components/BlogPostCard.js | 18 ++----------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/themes/Medium/LayoutPage.js b/themes/Medium/LayoutPage.js
index d4355d468a0..0c6640c8693 100644
--- a/themes/Medium/LayoutPage.js
+++ b/themes/Medium/LayoutPage.js
@@ -1,8 +1,9 @@
-import LayoutBase from '../Hexo/LayoutBase'
+import LayoutBase from './LayoutBase'
+import BlogPostListPage from './components/BlogPostListPage'
 
 export const LayoutPage = (props) => {
-  const { page } = props
+  const { page, posts, postCount } = props
   return <LayoutBase {...props}>
-    Page - {page}
+      <BlogPostListPage page={page} posts={posts} postCount={postCount} />
   </LayoutBase>
 }
diff --git a/themes/Medium/components/BlogPostCard.js b/themes/Medium/components/BlogPostCard.js
index 3b63256eaa3..a9e1ee5c276 100644
--- a/themes/Medium/components/BlogPostCard.js
+++ b/themes/Medium/components/BlogPostCard.js
@@ -1,12 +1,11 @@
 import BLOG from '@/blog.config'
-import { faAngleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { useGlobal } from '@/lib/global'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
-import TagItemMini from './TagItemMini'
 import CONFIG_MEDIUM from '../config_medium'
-import { useGlobal } from '@/lib/global'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
@@ -52,19 +51,6 @@ const BlogPostCard = ({ post, showSummary }) => {
                 </div>
               </div>
           </div> }
-
-          {/* <div className='text-gray-400 justify-between flex'>
-
-            <Link href={`/category/${post.category}`} passHref>
-                <a className='cursor-pointer font-light text-sm hover:underline transform'>
-                  <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
-                </a>
-              </Link>
-              <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
-                <div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
-              </div>
-          </div> */}
-
         </div>
         <hr className='w-full'/>
 

From 952051a80f56ee906fde7dd7d293e88f66720859 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 28 Jan 2022 09:32:51 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=96=87=E7=AB=A0=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E6=8E=92=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/LayoutBase.js |  4 ++--
 themes/Medium/LayoutSlug.js | 24 ++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/themes/Medium/LayoutBase.js b/themes/Medium/LayoutBase.js
index 866d7e64fd5..3c62dc54111 100644
--- a/themes/Medium/LayoutBase.js
+++ b/themes/Medium/LayoutBase.js
@@ -11,7 +11,7 @@ import LogoBar from './components/LogoBar'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, meta } = props
+  const { children, meta, showInfoCard = true } = props
 
   return (
     <div className='bg-white w-full h-full min-h-screen justify-center'>
@@ -19,7 +19,7 @@ const LayoutBase = props => {
       <main id="wrapper" className='max-w-7xl w-full h-full mx-auto'>
         <LogoBar/>
         <div className='pt-12 fixed top-24 w-80 pl-8 hidden lg:block'>
-          <InfoCard/>
+        {showInfoCard && <InfoCard/>}
         </div>
         <div className='lg:ml-72 max-w-3xl w-full px-5'>
             {children}
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index cb621b12171..cd2a349d668 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/themes/Medium/LayoutSlug.js
@@ -9,6 +9,10 @@ import 'prismjs/components/prism-typescript'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import LayoutBase from './LayoutBase'
 import Comment from '@/components/Comment'
+import Image from 'next/image'
+import { useGlobal } from '@/lib/global'
+import formatDate from '@/lib/formatDate'
+import Link from 'next/link'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -27,9 +31,25 @@ export const LayoutSlug = (props) => {
     post.content = Object.keys(post.blockMap.block)
     post.toc = getPageTableOfContents(post, post.blockMap)
   }
+  const { locale } = useGlobal()
+  const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
-  return <LayoutBase {...props} meta={meta}>
-    <h1 className='text-4xl mt-12'>{post?.title}</h1>
+  return <LayoutBase {...props} meta={meta} showInfoCard={false}>
+    <h1 className='text-4xl mt-12 font-sans'>{post?.title}</h1>
+    <Link href='/about' passHref>
+      <div className='flex py-3 items-center font-sans cursor-pointer'>
+        <Image
+          alt={BLOG.AUTHOR}
+          width={25}
+          height={25}
+          loading='lazy'
+          src='/avatar.jpg'
+          className='rounded-full'
+        />
+        <div className='mr-3 ml-1 text-green-500'>{BLOG.AUTHOR}</div>
+        <div className='text-gray-500'>{date}</div>
+      </div>
+    </Link>
     {/* Notion文章主体 */}
     <section id='notion-article' className='px-1 max-w-5xl'>
       {post.blockMap && (