Fix casing discrepancies.

themes/medium/components/ArticleAround.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return <section className='text-gray-800 h-12 flex items-center justify-between space-x-5 my-4'>
+    <Link href={`/article/${prev.slug}`} passHref>
+      <a className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+      </a>
+    </Link>
+    <Link href={`/article/${next.slug}`} passHref>
+      <a className='text-sm  cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+      </a>
+    </Link>
+  </section>
+}

themes/medium/components/BlogPostCard.js

@@ -0,0 +1,70 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import React from 'react'
+import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x'
+import CONFIG_MEDIUM from '../config_medium'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+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-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
+              {post.title}
+            </a>
+          </Link>
+
+          <div className={'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'}>
+            <div className='text-sm py-1'>{post.date.start_date}</div>
+            { CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category}/>}
+            { CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+          </div>
+
+          <div className='flex'>
+
+          </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,
+                collection: Collection
+              }}
+            />
+             <div className='pointer-events-none border-t pt-8 border-dashed'>
+                <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 font-bold text-green-500 cursor-pointer'>
+                        {locale.COMMON.ARTICLE_DETAIL}
+                        <i className='ml-1 fas fa-angle-right'/></a>
+
+                   </Link>
+                </div>
+              </div>
+          </div> }
+        </div>
+        <hr className='w-full'/>
+      </div>
+
+  )
+}
+
+const mapPageUrl = id => {
+  return 'https://www.notion.so/' + id.replace(/-/g, '')
+}
+
+export default BlogPostCard

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

themes/medium/components/BlogPostListPage.js

@@ -0,0 +1,33 @@
+import BlogPostCard from './BlogPostCard'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import PaginationSimple from './PaginationSimple'
+import { useRouter } from 'next/router'
+
+/**
+ * 文章列表分页表格
+ * @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

themes/medium/components/BlogPostListScroll.js

@@ -0,0 +1,106 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch }) => {
+  const postsPerPage = BLOG.POSTS_PER_PAGE
+  const [page, updatePage] = useState(1)
+  let filteredPosts = Object.assign(posts)
+  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())
+    })
+  }
+  const postsToShow = getPostByPage(page, filteredPosts, postsPerPage)
+
+  let hasMore = false
+  if (filteredPosts) {
+    const totalCount = filteredPosts.length
+    hasMore = page * postsPerPage < totalCount
+  }
+
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY + window.outerHeight
+    const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+    if (scrollS > clientHeight + 100) {
+      handleGetMore()
+    }
+  }, 500))
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = useRef(null)
+  const { locale } = useGlobal()
+
+  if (!postsToShow || postsToShow.length === 0) {
+    return <BlogPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div id='container' ref={targetRef} className='w-full'>
+
+      {/* 文章列表 */}
+      <div className='space-y-1 lg:space-y-4'>
+        {postsToShow.map(post => (
+          <BlogPostCard key={post.id} post={post} showSummary={true}/>
+        ))}
+      </div>
+
+      <div>
+        <div onClick={() => {
+          handleGetMore()
+        }}
+             className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200'
+        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div>
+      </div>
+    </div>
+  }
+}
+
+/**
+ * 获取从第1页到指定页码的文章
+ * @param page 第几页
+ * @param totalPosts 所有文章
+ * @param postsPerPage 每页文章数量
+ * @returns {*}
+ */
+const getPostByPage = function (page, totalPosts, postsPerPage) {
+  return totalPosts.slice(
+    0,
+    postsPerPage * page
+  )
+}
+
+function getSearchKey () {
+  const router = useRouter()
+  if (router.query && router.query.s) {
+    return router.query.s
+  }
+  return null
+}
+
+export default BlogPostListScroll

themes/medium/components/BottomMenuBar.js

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import React from 'react'
+import JumpToTopButton from './JumpToTopButton'
+
+export default function BottomMenuBar ({ className }) {
+  return (
+    <div className={'sticky bottom-0 w-full h-12 bg-white ' + className}>
+      <div className='flex justify-between h-full shadow-card'>
+        <Link href='/' passHref>
+          <div className='flex w-full items-center justify-center cursor-pointer'>
+            <i className='fas fa-home' />
+          </div>
+        </Link>
+        <Link href='/search' passHref>
+          <div className='flex w-full items-center justify-center cursor-pointer'>
+            <i className='fas fa-search'/>
+          </div>
+        </Link>
+        <div className='flex w-full items-center justify-center cursor-pointer'>
+          <JumpToTopButton/>
+        </div>
+      </div>
+    </div>
+  )
+}

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

themes/medium/components/Catalog.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import JumpToTopButton from './JumpToTopButton'
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+  const throttleMs = 100
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    for (let i = 0; i < sections.length; ++i) {
+      const section = sections[i]
+      if (!section || !(section instanceof Element)) continue
+      if (!currentSectionId) {
+        currentSectionId = section.getAttribute('data-id')
+      }
+      const bbox = section.getBoundingClientRect()
+      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+      const offset = Math.max(150, prevHeight / 4)
+      // GetBoundingClientRect returns values relative to viewport
+      if (bbox.top - offset < 0) {
+        currentSectionId = section.getAttribute('data-id')
+        prevBBox = bbox
+        continue
+      }
+      // No need to continue loop, if last element has been detected
+      break
+    }
+    setActiveSection(currentSectionId)
+  }, throttleMs))
+
+  return <div className='px-3'>
+    <div className='w-full py-1'>
+      <Progress/>
+    </div>
+    <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
+      {toc.map((tocItem) => {
+        const id = uuidToId(tocItem.id)
+        return (
+          <a
+            key={id}
+            href={`#${id}`}
+            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+          >
+                      <span
+                        style={{
+                          display: 'inline-block',
+                          marginLeft: tocItem.indentLevel * 16
+                        }}
+                        className={`${activeSection === id && ' font-bold text-green-500 underline'}`}
+                      >
+                        {tocItem.text}
+                      </span>
+          </a>
+        )
+      })}
+    </nav>
+    <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200'/>
+  </div>
+}
+
+export default Catalog

themes/medium/components/CategoryGroup.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import CategoryItem from './CategoryItem'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+  if (!categories) {
+    return <></>
+  }
+  return <div id='category-list' className='pt-4'>
+    <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
+    <div className='flex flex-wrap'>
+      {categories.map(category => {
+        const selected = currentCategory === category.name
+        return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count}/>
+      })}
+    </div>
+  </div>
+}
+
+export default CategoryGroup

themes/medium/components/CategoryItem.js

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+export default function CategoryItem ({ selected, category, categoryCount }) {
+  return <Link href={`/category/${category}`} passHref>
+    <a className={(selected
+      ? 'hover:text-white dark:hover:text-white bg-green-600 text-white '
+      : 'dark:text-green-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-green-600') +
+    ' flex text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
+      <div><i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category} {categoryCount && `(${categoryCount})`}
+      </div>
+    </a>
+  </Link>
+}

themes/medium/components/Footer.js

@@ -0,0 +1,28 @@
+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'
+    >
+      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <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 /><i className='fas fa-shield-alt'/> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+      <span className='hidden busuanzi_container_site_pv'>
+            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+      <span className='pl-2 hidden busuanzi_container_site_uv'>
+        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <br/>
+        <h1>{title}</h1>
+    </footer>
+  )
+}
+
+export default Footer

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 id='info-card' className='py-4'>
+    <div className='items-center justify-center font-sans '>
+        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' 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 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
+        <SocialButton/>
+    </div>
+  </div>
+}
+
+export default InfoCard

themes/medium/components/JumpToTopButton.js

@@ -0,0 +1,26 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG_MEDIUM from '../config_medium'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
+    return <></>
+  }
+  const { locale } = useGlobal()
+  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+        <div title={locale.POST.TOP} >
+          <i className='fas fa-arrow-up'/>
+        </div>
+        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
+    </div>)
+}
+
+export default JumpToTopButton

themes/medium/components/LeftMenuBar.js

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function LeftMenuBar () {
+  return <div className='w-20  border-r hidden lg:block pt-12'>
+    <section>
+      <Link href='/'>
+        <div className='text-center cursor-pointer  hover:text-black'>
+          <i className='fas fa-home text-gray-500'/>
+        </div>
+      </Link>
+    </section>
+  </div>
+}

themes/medium/components/LogoBar.js

@@ -0,0 +1,10 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+
+export default function LogoBar () {
+  return <div id='top-wrapper' className='w-full flex items-center font-sans'>
+        <Link href='/'>
+          <a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
+        </Link>
+  </div>
+}

themes/medium/components/PaginationSimple.js

@@ -0,0 +1,43 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param totalPage 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, totalPage }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  const showNext = currentPage < totalPage
+  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-green-500 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-green-500 border-b-2 hover:font-bold`}
+        >
+          {locale.PAGINATION.NEXT} →
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple

themes/medium/components/Progress.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || document.getElementById('container')
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [percent])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+      <div
+        className="h-4 bg-gray-600 duration-200"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress

themes/medium/components/RevolverMaps.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+export default function RevolverMaps () {
+  const [load, changeLoad] = useState(false)
+  useEffect(() => {
+    if (!load) {
+      initRevolverMaps()
+      changeLoad(true)
+    }
+  })
+  return <div id="revolvermaps" className='p-4'/>
+}
+
+function initRevolverMaps () {
+  if (screen.width >= 768) {
+    Promise.all([
+      loadExternalResource('https://rf.revolvermaps.com/0/0/8.js?i=5jnp1havmh9&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33')
+    ]).then(() => {
+      console.log('地图加载完成')
+    })
+  }
+}
+
+// 封装异步加载资源的方法
+function loadExternalResource (url) {
+  return new Promise((resolve, reject) => {
+    const container = document.getElementById('revolvermaps')
+    const tag = document.createElement('script')
+    tag.src = url
+    if (tag) {
+      tag.onload = () => resolve(url)
+      tag.onerror = () => reject(url)
+      container.appendChild(tag)
+    }
+  })
+}

themes/medium/components/SearchInput.js

@@ -0,0 +1,90 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
+
+const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
+  // const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+
+    if (key && key !== '') {
+      setLoadingState(true)
+      // router.push({ pathname: '/search/' + key }).then(r => {
+      //   setLoadingState(false)
+      // })
+      location.href = '/search/' + key
+    } else {
+      router.push({ pathname: '/' }).then(r => {
+      })
+    }
+  }
+  const handleKeyUp = (e) => {
+    if (e.keyCode === 13) { // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) { // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = (val) => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+    <input
+      ref={searchInputRef}
+      type='text'
+      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      onKeyUp={handleKeyUp}
+      onCompositionStart={lockSearchInput}
+      onCompositionUpdate={lockSearchInput}
+      onCompositionEnd={unLockSearchInput}
+      onChange={e => updateSearchKey(e.target.value)}
+      defaultValue={currentSearch}
+    />
+
+    <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+      onClick={handleSearch}>
+        <i className={`hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
+    </div>
+
+    {(showClean &&
+      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
+        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
+      </div>
+      )}
+  </div>
+}
+
+export default SearchInput

themes/medium/components/SocialButton.js

@@ -0,0 +1,31 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
+        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>}
+      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
+        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
+      </a>
+    </div>
+}
+export default SocialButton

themes/medium/components/TagGroups.js

@@ -0,0 +1,27 @@
+import TagItemMini from './TagItemMini'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, currentTag }) => {
+  if (!tags) return <></>
+  return (
+    <div id='tags-group' className='dark:border-gray-600 py-4'>
+      <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
+      <div className='space-y-2'>
+      {
+        tags.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+        })
+      }
+      </div>
+    </div>
+  )
+}
+
+export default TagGroups

themes/medium/components/TagItemMini.js

@@ -0,0 +1,15 @@
+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-1 px-2 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 && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+    </a>
+  </Link>
+}
+
+export default TagItemMini

themes/medium/components/TopNavBar.js

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import LogoBar from './LogoBar'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function TopNavBar (props) {
+  const { className, customNav } = props
+  const router = useRouter()
+
+  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+    <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
+      <LogoBar />
+
+      {/* 顶部菜单 */}
+      <div className='flex'>
+        {customNav && customNav.map(link => {
+          if (link.show) {
+            const selected = (router.pathname === link.to) || (router.asPath === link.to)
+            return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
+            <a className={'px-2 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
+                <div className='items-center justify-center flex '>
+                  <i className={link.icon} />
+                  <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+                </div>
+                {link.slot}
+              </a>
+            </Link>
+          } else {
+            return null
+          }
+        })}
+      </div>
+    </div>
+  </div>
+}