Merge branch 'main' into original-main-fix-DOMException

themes/commerce/components/BlogPostListPage.js

@@ -14,7 +14,7 @@ import ProductCard from './ProductCard'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {

themes/commerce/components/BlogPostListScroll.js

@@ -20,7 +20,7 @@ const BlogPostListScroll = ({
   siteInfo
 }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)

themes/commerce/components/SocialButton.js

@@ -5,39 +5,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton

themes/example/components/BlogListPage.js

@@ -14,7 +14,7 @@ export const BlogListPage = props => {
   const { locale, NOTION_CONFIG } = useGlobal()
   const router = useRouter()
   const totalPage = Math.ceil(
-    postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+    postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   )
   const currentPage = +page
 
@@ -24,6 +24,7 @@ export const BlogListPage = props => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   const showPageCover = siteConfig('EXAMPLE_POST_LIST_COVER', null, CONFIG)
 
@@ -44,7 +45,7 @@ export const BlogListPage = props => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showPrev ? 'bg-black dark:bg-hexo-black-gray' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.PREV}
         </Link>
         <Link
@@ -52,7 +53,7 @@ export const BlogListPage = props => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showNext ? 'bg-black dark:bg-hexo-black-gray ' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>

themes/example/components/BlogListScroll.js

@@ -13,7 +13,7 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   let hasMore = false
   const postsToShow = posts

themes/example/components/Catalog.js

@@ -0,0 +1,94 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+  const throttleMs = 200
+  const actionSectionScrollSpy = 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)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className='px-3'>
+      <div
+        className='overflow-y-auto max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black dark:text-gray-300'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? ' font-bold text-red-400 underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog

themes/example/components/Header.js

@@ -4,12 +4,13 @@ import { MenuList } from './MenuList'
 
 /**
  * 网站顶部
+ * LOGO 和 菜单
  * @returns
  */
 export const Header = props => {
   return (
     <header className='w-full px-6 bg-white  dark:bg-black relative z-20'>
-      <div className='container mx-auto max-w-4xl md:flex justify-between items-center'>
+      <div className='mx-auto max-w-4xl md:flex justify-between items-center'>
         <Link
           href='/'
           className='py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>

themes/example/components/MenuList.js

@@ -58,7 +58,7 @@ export const MenuList = props => {
 
   return (
     <nav className='w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black'>
-      <div className='container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start'>
+      <div className='mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start'>
         <ul className='w-full text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start'>
           {links.map((link, index) => (
             <MenuItemDrop key={index} link={link} />

themes/example/components/SearchInput.js

@@ -24,7 +24,6 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
     const key = searchInputRef.current.value
     if (key && key !== '') {
       router.push({ pathname: '/search/' + key }).then(r => {
-        console.log('搜索', key)
       })
     } else {
       router.push({ pathname: '/' }).then(r => {

themes/example/components/SideBar.js

@@ -3,7 +3,9 @@ import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
+import CONFIG from '../config'
 import Announcement from './Announcement'
+import Catalog from './Catalog'
 const ExampleRecentComments = dynamic(
   () => import('./RecentCommentListForExample')
 )
@@ -13,10 +15,36 @@ const ExampleRecentComments = dynamic(
  */
 export const SideBar = props => {
   const { locale } = useGlobal()
-  const { latestPosts, categoryOptions, notice } = props
+  const { latestPosts, categoryOptions, notice, post } = props
+  // 评论相关
+  const COMMENT_WALINE_SERVER_URL = siteConfig(
+    'COMMENT_WALINE_SERVER_URL',
+    false
+  )
+  const COMMENT_WALINE_RECENT = siteConfig('COMMENT_WALINE_RECENT', false)
+
+  // 文章详情页特殊布局
+  const HIDDEN_NOTIFICATION =
+    post && siteConfig('EXAMPLE_ARTICLE_HIDDEN_NOTIFICATION', false, CONFIG)
+
+  // 文章详情页左右布局改为上下布局
+  const LAYOUT_VERTICAL =
+    post && siteConfig('EXAMPLE_ARTICLE_LAYOUT_VERTICAL', false, CONFIG)
+
   return (
-    <div className='w-full md:w-64 sticky top-8'>
-      <aside className='rounded shadow overflow-hidden mb-6'>
+    <>
+      {/* 目录 */}
+      {post?.toc && post?.toc.length > 2 && (
+        <aside className='w-full rounded shadow overflow-hidden mb-6 pb-4'>
+          <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+            {locale.COMMON.TABLE_OF_CONTENTS}
+          </h3>
+          <Catalog toc={post?.toc} />
+        </aside>
+      )}
+
+      {/* 分类 */}
+      <aside className='w-full rounded shadow overflow-hidden mb-6'>
         <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
           {locale.COMMON.CATEGORY}
         </h3>
@@ -34,7 +62,7 @@ export const SideBar = props => {
                     {' '}
                     <a
                       href={`/category/${category.name}`}
-                      className='text-gray-darkest text-sm'>
+                      className='text-gray-darkest text-sm hover:underline'>
                       {category.name}({category.count})
                     </a>
                   </li>
@@ -44,7 +72,9 @@ export const SideBar = props => {
           </ul>
         </div>
       </aside>
-      <aside className='rounded shadow overflow-hidden mb-6'>
+
+      {/* 最新文章 */}
+      <aside className='w-full rounded shadow overflow-hidden mb-6'>
         <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
           {locale.COMMON.LATEST_POSTS}
         </h3>
@@ -58,7 +88,7 @@ export const SideBar = props => {
                     {' '}
                     <a
                       href={`/${p.slug}`}
-                      className='text-gray-darkest text-sm'>
+                      className='text-gray-darkest text-sm hover:underline'>
                       {p.title}
                     </a>
                   </li>
@@ -68,25 +98,29 @@ export const SideBar = props => {
           </ul>
         </div>
       </aside>
+
+      {/* 公告 */}
       {/* 公告栏 */}
-      <Announcement post={notice} />
+      {!HIDDEN_NOTIFICATION && <Announcement post={notice} />}
 
       {/* 最近评论 */}
-      {siteConfig('COMMENT_WALINE_SERVER_URL') &&
-        siteConfig('COMMENT_WALINE_RECENT') && (
-          <aside className='rounded shadow overflow-hidden mb-6'>
-            <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
-              {locale.COMMON.RECENT_COMMENTS}
-            </h3>
+      {COMMENT_WALINE_SERVER_URL && COMMENT_WALINE_RECENT && (
+        <aside className='w-full rounded shadow overflow-hidden mb-6'>
+          <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+            {locale.COMMON.RECENT_COMMENTS}
+          </h3>
 
-            <div className='p-4'>
-              <ExampleRecentComments />
-            </div>
-          </aside>
-        )}
-      <aside className='rounded  overflow-hidden mb-6'>
+          <div className='p-4'>
+            <ExampleRecentComments />
+          </div>
+        </aside>
+      )}
+
+      {/* 宠物挂件 */}
+      <aside
+        className={`rounded overflow-hidden mb-6 ${LAYOUT_VERTICAL ? 'hidden md:fixed right-4 bottom-20' : ''}`}>
         <Live2D />
       </aside>
-    </div>
+    </>
   )
 }

themes/example/components/TitleBar.js

@@ -0,0 +1,48 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 标题栏
+ */
+export default function TitleBar(props) {
+  const { post } = props
+  const { fullWidth, siteInfo } = useGlobal()
+
+  const title = post?.title || siteConfig('TITLE')
+  const description = post?.description || siteConfig('AUTHOR')
+  const headerImage = post?.pageCoverThumbnail
+    ? post.pageCoverThumbnail
+    : siteInfo?.pageCover
+
+  const TITLE_BG = siteConfig('EXAMPLE_TITLE_IMAGE', false, CONFIG)
+
+  return (
+    <>
+      {/* 标题栏 */}
+      {!fullWidth && (
+        <div className='relative overflow-hidden text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b'>
+          <h1 className='title-1 relative text-xl md:text-4xl pb-4 z-10'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post?.pageIcon} />
+            )}
+            {title}
+          </h1>
+          <p className='title-2 relative leading-loose text-gray-dark z-10'>
+            {description}
+          </p>
+          {TITLE_BG && (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={headerImage}
+                className='absolute object-cover top-0 left-0 w-full h-full select-none opacity-70 z-0'
+              />
+            </>
+          )}
+        </div>
+      )}
+    </>
+  )
+}

themes/example/config.js

@@ -8,7 +8,12 @@ const CONFIG = {
   EXAMPLE_MENU_ARCHIVE: true, // 显示归档
   EXAMPLE_MENU_SEARCH: true, // 显示搜索
 
-  EXAMPLE_POST_LIST_COVER: true // 列表显示文章封面
+  EXAMPLE_POST_LIST_COVER: true, // 列表显示文章封面
 
+  EXAMPLE_TITLE_IMAGE: false, // 标题栏，是否背景图片
+
+  // 文章页面布局
+  EXAMPLE_ARTICLE_LAYOUT_VERTICAL: false, // 文章详情，左右布局改为上下布局
+  EXAMPLE_ARTICLE_HIDDEN_NOTIFICATION: false // 文章详情隐藏公告
 }
 export default CONFIG

themes/example/index.js

@@ -2,7 +2,6 @@
 
 import Comment from '@/components/Comment'
 import replaceSearchResult from '@/components/Mark'
-import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
@@ -21,6 +20,7 @@ import { PostLock } from './components/PostLock'
 import { PostMeta } from './components/PostMeta'
 import SearchInput from './components/SearchInput'
 import { SideBar } from './components/SideBar'
+import TitleBar from './components/TitleBar'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -32,36 +32,15 @@ import { Style } from './style'
  * @constructor
  */
 const LayoutBase = props => {
-  const { children } = props
+  const { children, post } = props
   const { onLoading, fullWidth, locale } = useGlobal()
-  const router = useRouter()
-  const { post, category, tag } = props
 
-  const title = post?.title || siteConfig('TITLE')
-  const description = post?.description || siteConfig('AUTHOR')
+  // 文章详情页左右布局改为上下布局
+  const LAYOUT_VERTICAL =
+    post && siteConfig('EXAMPLE_ARTICLE_LAYOUT_VERTICAL', false, CONFIG)
 
-  // 顶部如果是按照分类或标签查看文章列表，列表顶部嵌入一个横幅
-  // 如果是搜索，则列表顶部嵌入 搜索框
-  let slotTop = null
-  if (category) {
-    slotTop = (
-      <div className='pb-12'>
-        <i className='mr-1 fas fa-folder-open' />
-        {category}
-      </div>
-    )
-  } else if (tag) {
-    slotTop = <div className='pb-12'>#{tag}</div>
-  } else if (props.slotTop) {
-    slotTop = props.slotTop
-  } else if (router.route === '/search') {
-    // 嵌入一个搜索框在顶部
-    slotTop = (
-      <div className='pb-12'>
-        <SearchInput {...props} />
-      </div>
-    )
-  }
+  // 网站左右布局颠倒
+  const LAYOUT_SIDEBAR_REVERSE = siteConfig('LAYOUT_SIDEBAR_REVERSE', false)
 
   return (
     <div
@@ -71,33 +50,20 @@ const LayoutBase = props => {
 
       {/* 页头 */}
       <Header {...props} />
+      {/* 标题栏 */}
+      <TitleBar {...props} />
 
       {/* 主体 */}
       <div id='container-inner' className='w-full relative z-10'>
-        {/* 标题栏 */}
-        {!fullWidth && (
-          <div className='text-center px-6 py-12 mb-6 bg-gray-100 dark:bg-hexo-black-gray dark:border-hexo-black-gray border-b'>
-            <h1 className='text-xl md:text-4xl pb-4'>
-              {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post?.pageIcon} />
-              )}
-              {title}
-            </h1>
-            <p className='leading-loose text-gray-dark'>{description}</p>
-          </div>
-        )}
-
         <div
           id='container-wrapper'
-          className={
-            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-              ? 'flex-row-reverse'
-              : '') +
-            'relative container mx-auto justify-center md:flex items-start py-8 px-2'
-          }>
+          className={`relative mx-auto justify-center md:flex py-8 px-2
+          ${LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : ''} 
+          ${LAYOUT_VERTICAL ? 'items-center flex-col' : 'items-start'} 
+          `}>
           {/* 内容 */}
           <div
-            className={`w-full ${fullWidth ? '' : 'max-w-3xl'} xl:px-14 lg:px-4`}>
+            className={`${fullWidth ? '' : LAYOUT_VERTICAL ? 'max-w-5xl' : 'max-w-3xl'} w-full xl:px-14 lg:px-4`}>
             <Transition
               show={!onLoading}
               appear={true}
@@ -109,13 +75,22 @@ const LayoutBase = props => {
               leaveTo='opacity-0 -translate-y-16'
               unmount={false}>
               {/* 嵌入模块 */}
-              {slotTop}
+              {props.slotTop}
               {children}
             </Transition>
           </div>
 
           {/* 侧边栏 */}
-          {!fullWidth && <SideBar {...props} />}
+          {!fullWidth && (
+            <div
+              className={`${
+                LAYOUT_VERTICAL
+                  ? 'flex space-x-0 md:space-x-2 md:flex-row flex-col w-full max-w-5xl justify-center xl:px-14 lg:px-4'
+                  : 'md:w-64 sticky top-8'
+              }`}>
+              <SideBar {...props} />
+            </div>
+          )}
         </div>
       </div>
 
@@ -150,8 +125,20 @@ const LayoutIndex = props => {
  * @returns
  */
 const LayoutPostList = props => {
+  const { category, tag } = props
+
   return (
     <>
+      {/* 显示分类 */}
+      {category && (
+        <div className='pb-12'>
+          <i className='mr-1 fas fa-folder-open' />
+          {category}
+        </div>
+      )}
+      {/* 显示标签 */}
+      {tag && <div className='pb-12'>#{tag}</div>}
+
       {siteConfig('POST_LIST_STYLE') === 'page' ? (
         <BlogListPage {...props} />
       ) : (
@@ -192,7 +179,7 @@ const LayoutSlug = props => {
       {lock ? (
         <PostLock validPassword={validPassword} />
       ) : (
-        <div id='article-wrapper' className='px-2'>
+        <div id='article-wrapper'>
           <PostMeta post={post} />
           <NotionPage post={post} />
           <ShareBar post={post} />
@@ -237,7 +224,14 @@ const LayoutSearch = props => {
     }
   }, [router])
 
-  return <LayoutPostList {...props} />
+  return (
+    <>
+      <div className='pb-12'>
+        <SearchInput {...props} />
+      </div>
+      <LayoutPostList {...props} />
+    </>
+  )
 }
 
 /**

themes/fukasawa/components/AsideLeft.js

@@ -1,22 +1,22 @@
-import Logo from './Logo'
-import GroupCategory from './GroupCategory'
-import { MenuList } from './MenuList'
-import GroupTag from './GroupTag'
-import SearchInput from './SearchInput'
-import SiteInfo from './SiteInfo'
-import Catalog from './Catalog'
-import Announcement from './Announcement'
-import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
-import SocialButton from './SocialButton'
-import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
-import MailChimpForm from './MailChimpForm'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useMemo, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
+import CONFIG from '@/themes/fukasawa/config'
 import { debounce } from 'lodash'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+import Announcement from './Announcement'
+import Catalog from './Catalog'
+import GroupCategory from './GroupCategory'
+import GroupTag from './GroupTag'
+import Logo from './Logo'
+import MailChimpForm from './MailChimpForm'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+import SiteInfo from './SiteInfo'
+import SocialButton from './SocialButton'
 
 /**
  * 侧边栏
@@ -24,16 +24,41 @@ import { debounce } from 'lodash'
  * @returns
  */
 function AsideLeft(props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
+  const {
+    tagOptions,
+    currentTag,
+    categoryOptions,
+    currentCategory,
+    post,
+    slot,
+    notice
+  } = props
   const router = useRouter()
   const { fullWidth } = useGlobal()
 
-  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT =
+    fullWidth ||
+    siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL',
+    false,
+    CONFIG
+  )
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_BUTTON = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_BUTTON',
+    null,
+    CONFIG
+  )
 
   // 侧边栏折叠从 本地存储中获取 open 状态的初始值
   const [isCollapsed, setIsCollapse] = useState(() => {
     if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      return (
+        localStorage.getItem('fukasawa-sidebar-collapse') === 'true' ||
+        FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      )
     }
     return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
   })
@@ -45,8 +70,8 @@ function AsideLeft(props) {
     }
   }, [isCollapsed])
 
+  const isReverse = siteConfig('LAYOUT_SIDEBAR_REVERSE')
   const position = useMemo(() => {
-    const isReverse = JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
     if (isCollapsed) {
       if (isReverse) {
         return 'right-2'
@@ -69,7 +94,7 @@ function AsideLeft(props) {
 
   // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
   useEffect(() => {
-    if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) {
+    if (!FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL) {
       return
     }
     const handleResize = debounce(() => {
@@ -92,73 +117,89 @@ function AsideLeft(props) {
       }
     }
   }, [])
- 
- 
-  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
-        {/* 折叠按钮 */}
-    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
-            {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
-        </div>}
 
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
-
-            <Logo {...props} />
-
-            <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteConfig('DESCRIPTION')}
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <MenuList {...props} />
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <SearchInput {...props} />
-            </section>
-
-            <section className='flex flex-col dark:text-gray-300'>
-                <div className='w-12 my-4' />
-                <Announcement post={notice} />
-            </section>
-
-            <section>
-                <MailChimpForm />
-            </section>
-
-            <section>
-                <AdSlot type='in-article' />
-            </section>
-
-            {router.asPath !== '/tag' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupTag tags={tagOptions} currentTag={currentTag} />
-            </section>}
-
-            {router.asPath !== '/category' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
-            </section>}
-
-            <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <SocialButton />
-                <SiteInfo />
-            </section>
-
-            <section className='flex justify-center dark:text-gray-200 pt-4'>
-                <DarkModeButton />
-            </section>
-
-            <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
-                <Catalog toc={post?.toc} />
-                <div className='flex justify-center'>
-                    <div>{slot}</div>
-                </div>
-            </section>
+  return (
+    <div
+      className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+      {/* 悬浮的折叠按钮 */}
+      {FUKASAWA_SIDEBAR_COLLAPSE_BUTTON && (
+        <div
+          className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`}
+          onClick={toggleOpen}>
+          {isCollapsed ? (
+            <i className='fa-solid fa-indent text-xl'></i>
+          ) : (
+            <i className='fas fa-bars text-xl'></i>
+          )}
         </div>
+      )}
+
+      <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
+        <Logo {...props} />
+
+        <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+          {siteConfig('DESCRIPTION')}
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <MenuList {...props} />
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <SearchInput {...props} />
+        </section>
+
+        <section className='flex flex-col dark:text-gray-300'>
+          <div className='w-12 my-4' />
+          <Announcement post={notice} />
+        </section>
+
+        <section>
+          <MailChimpForm />
+        </section>
+
+        <section>
+          <AdSlot type='in-article' />
+        </section>
+
+        {router.asPath !== '/tag' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupTag tags={tagOptions} currentTag={currentTag} />
+          </section>
+        )}
+
+        {router.asPath !== '/category' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupCategory
+              categories={categoryOptions}
+              currentCategory={currentCategory}
+            />
+          </section>
+        )}
+
+        <section className='flex flex-col'>
+          <div className='w-12 my-4' />
+          <SocialButton />
+          <SiteInfo />
+        </section>
+
+        <section className='flex justify-center dark:text-gray-200 pt-4'>
+          <DarkModeButton />
+        </section>
+
+        <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
+          <Catalog toc={post?.toc} />
+          <div className='flex justify-center'>
+            <div>{slot}</div>
+          </div>
+        </section>
+      </div>
     </div>
+  )
 }
 
 export default AsideLeft

themes/fukasawa/components/BlogCard.js

@@ -1,6 +1,7 @@
 import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CONFIG from '../config'
 import TagItemMini from './TagItemMini'
@@ -10,7 +11,8 @@ import TagItemMini from './TagItemMini'
  * @param {*} param0
  * @returns
  */
-const BlogCard = ({ index, post, showSummary, siteInfo }) => {
+const BlogCard = ({ showAnimate, post, showSummary }) => {
+const {siteInfo} =useGlobal()
   const showPreview =
     siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
   // fukasawa 强制显示图片
@@ -24,11 +26,12 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover =
     siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) &&
     post?.pageCoverThumbnail
+    
   const FUKASAWA_POST_LIST_ANIMATION = siteConfig(
     'FUKASAWA_POST_LIST_ANIMATION',
     null,
     CONFIG
-  )
+  ) || showAnimate 
 
   // 动画样式  首屏卡片不用，后面翻出来的加动画
   const aosProps = FUKASAWA_POST_LIST_ANIMATION

themes/fukasawa/components/BlogListPage.js

@@ -17,8 +17,9 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
+  const postsPerPage = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
+    postCount / postsPerPage
   )
   const showNext = page < totalPage
 
@@ -33,23 +34,27 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  /**
-   * 文章重新布局，使纵向排列看起来是横向排列
-   */
+   /**
+    * 文章重新布局，使纵向排列看起来是横向排列
+    */
   useEffect(() => {
-    const count = posts?.length || 0
-    const rows = Math.ceil(count / columns)
-    const newFilterPosts = []
-    for (let i = 0; i < columns; i++) {
-      for (let j = 0; j < rows; j++) {
-        const index = j * columns + i
-        if (index < count) {
-          newFilterPosts.push(deepClone(posts[index]))
+    const count = posts?.length || 0;
+    const rows = Math.ceil(count / columns);
+    const newFilterPosts = new Array(count);
+
+    let index = 0;
+    for (let col = 0; col < columns; col++) {
+        for (let row = 0; row < rows; row++) {
+        const sourceIndex = row * columns + col;
+        if (sourceIndex < count) {
+            newFilterPosts[index] = deepClone(posts[sourceIndex]);
+            index++;
+        }
         }
-      }
     }
-    setFilterPosts(newFilterPosts)
-  }, [columns, posts])
+  
+    setFilterPosts(newFilterPosts);
+  }, [columns, posts]);
 
   if (!filterPosts || filterPosts.length === 0) {
     return <BlogPostListEmpty />

themes/fukasawa/components/BlogListScroll.js

@@ -1,41 +1,36 @@
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import { useEffect, useRef, useState } from 'react'
-import BlogCard from './BlogCard'
-import BlogPostListEmpty from './BlogListEmpty'
+import { siteConfig } from '@/lib/config';
+import { useGlobal } from '@/lib/global';
+import throttle from 'lodash.throttle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import BlogCard from './BlogCard';
+import BlogPostListEmpty from './BlogListEmpty';
+
+const BlogListScroll = ({ posts }) => {
+  const { locale, NOTION_CONFIG } = useGlobal();
+  const [page, setPage] = useState(1);
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG);
+  const [filterPostsGroups, setFilterPostsGroups] = useState([]);
+
+  // 每页显示的文章数量
+  const postsPerPage = POSTS_PER_PAGE;
+
+  // 计算总页数
+  const totalPages = Math.ceil(posts.length / postsPerPage);
+
+  // 加载更多文章
+  const loadMorePosts = () => {
+    if (page < totalPages) {
+      setPage(page + 1);
+    }
+  };
+
 
-/**
- * 文章列表分页表格
- * @param page 当前页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogListScroll = props => {
-  const { posts = [], siteInfo } = props
-  const { locale, NOTION_CONFIG } = useGlobal()
   const targetRef = useRef(null)
-  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
 
-  let hasMore = false
-  const postsToShow = posts
-    ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
-    : []
-
-  if (posts) {
-    const totalCount = posts.length
-    hasMore = page * POSTS_PER_PAGE < totalCount
-  }
-  const handleGetMore = () => {
-    if (!hasMore) return
-    updatePage(page + 1)
-  }
 
   // 监听滚动自动分页加载
-  const scrollTrigger = () => {
-    requestAnimationFrame(() => {
+  const scrollTrigger = useCallback(
+    throttle(() => {
       const scrollS = window.scrollY + window.outerHeight
       const clientHeight = targetRef
         ? targetRef.current
@@ -43,47 +38,64 @@ const BlogListScroll = props => {
           : 0
         : 0
       if (scrollS > clientHeight + 100) {
-        handleGetMore()
+        loadMorePosts()
       }
-    })
-  }
+    }, 500)
+  )
 
   useEffect(() => {
     window.addEventListener('scroll', scrollTrigger)
     return () => {
       window.removeEventListener('scroll', scrollTrigger)
     }
-  }, [])
+  })
+
+  // 根据当前页和每页文章数截取应该显示的文章
+  useEffect(() => {
+    const startIndex = (page - 1) * postsPerPage;
+    const endIndex = startIndex + postsPerPage;
+    const postsToShow = posts.slice(startIndex, endIndex);
+    const columns = 3; // 假设有3列
+
+    // 重新排列文章，保证列优先顺序
+    const newFilterPosts = [];
+    for (let col = 0; col < columns; col++) {
+      for (let i = col; i < postsToShow.length; i += columns) {
+        newFilterPosts.push(postsToShow[i]);
+      }
+    }
+
+    setFilterPostsGroups((prev) => [...prev, newFilterPosts]);
+  }, [posts, page]);
 
   if (!posts || posts.length === 0) {
-    return <BlogPostListEmpty />
+    return <BlogPostListEmpty />;
   } else {
     return (
-      <div id='posts-wrapper' ref={targetRef} className='grid-container'>
-        {/* 文章列表 */}
-        {postsToShow?.map(post => (
-          <div
-            key={post.id}
-            className='grid-item justify-center flex'
-            style={{ breakInside: 'avoid' }}>
-            <BlogCard
-              index={posts.indexOf(post)}
-              key={post.id}
-              post={post}
-              siteInfo={siteInfo}
-            />
+      <div ref={targetRef}>
+        {filterPostsGroups.map((group, groupIndex) => (
+          <div key={groupIndex} id="posts-wrapper" className="grid-container mb-10">
+            {group.map((post) => (
+              <div
+                key={post.id}
+                className="grid-item justify-center flex"
+                style={{ breakInside: 'avoid' }}
+              >
+                <BlogCard key={post.id} post={post} showAnimate={groupIndex > 0}/>
+              </div>
+            ))}
           </div>
         ))}
-
         <div
-          className='w-full my-4 py-4 text-center cursor-pointer '
-          onClick={handleGetMore}>
-          {' '}
-          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          className="w-full my-4 py-4 text-center cursor-pointer"
+          onClick={loadMorePosts}
+        >
+          {page < totalPages ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
         </div>
       </div>
-    )
+    );
   }
-}
+};
+
+export default BlogListScroll;
 
-export default BlogListScroll

themes/fukasawa/components/Header.js

@@ -0,0 +1,64 @@
+import Collapse from '@/components/Collapse'
+import { useRef, useState } from 'react'
+import Logo from './Logo'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  return (
+    <div id='top-nav' className='z-40 block lg:hidden'>
+      {/* 导航栏 */}
+      <div
+        id='sticky-nav'
+        className={
+          'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'
+        }>
+        <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
+          <div className='py-1 px-5'>
+            <MenuList
+              {...props}
+              onHeightChange={param =>
+                collapseRef.current?.updateCollapseHeight(param)
+              }
+            />
+            <SearchInput {...props} />
+          </div>
+        </Collapse>
+        <div className='w-full flex justify-between items-center p-4 '>
+          {/* 左侧LOGO 标题 */}
+          <div className='flex flex-none flex-grow-0'>
+            <Logo {...props} />
+          </div>
+          <div className='flex'></div>
+
+          {/* 右侧功能 */}
+          <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+            <div
+              onClick={toggleMenuOpen}
+              className='cursor-pointer text-lg p-2'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header

themes/fukasawa/components/MenuItemDrop.js

@@ -7,9 +7,11 @@ export const MenuItemDrop = ({ link }) => {
 
   return (
     <li
-      onMouseOver={() => changeShow(true)}
+      onMouseOver={() => {
+        changeShow(true)
+      }}
       onMouseOut={() => changeShow(false)}
-      className='relative py-1 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
+      className='relative py-1 mb-1.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center '>
       {!hasSubMenu && (
         <Link
           href={link?.href}
@@ -33,7 +35,7 @@ export const MenuItemDrop = ({ link }) => {
           {hasSubMenu && (
             <div className='text-right'>
               <i
-                className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+                className={`px-2 fas fa-chevron-left duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
             </div>
           )}
         </div>
@@ -42,7 +44,7 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 left-52' : 'invisible opacity-0 left-40'} z-20 py-1 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
+          className={`${show ? 'visible opacity-100 left-72' : 'invisible opacity-0 left-80'} z-20 p-2 absolute right-0 top-0 w-full border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
           {link?.subMenus?.map((sLink, index) => {
             return (
               <li key={index}>

themes/fukasawa/components/MenuList.js

@@ -28,11 +28,6 @@ export const MenuList = props => {
       name: locale.NAV.ARCHIVE,
       href: '/archive',
       show: siteConfig('FUKASAWA_MENU_ARCHIVE', null, CONFIG)
-    },
-    {
-      name: locale.NAV.SEARCH,
-      href: '/search',
-      show: siteConfig('FUKASAWA_MENU_SEARCH', null, CONFIG)
     }
   ]
 

themes/fukasawa/components/SocialButton.js

@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52 flex-wrap flex'>
-    <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='w-52 flex-wrap flex'>
+      <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton

themes/fukasawa/components/TopNav.js

@@ -1,50 +0,0 @@
-import { useState, useRef } from 'react'
-import Collapse from '@/components/Collapse'
-import { MenuList } from './MenuList'
-import Logo from './Logo'
-import SearchInput from './SearchInput'
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const TopNav = props => {
-  const [isOpen, changeShow] = useState(false)
-  const collapseRef = useRef(null)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  return (<div id='top-nav' className='z-40 block lg:hidden'>
-
-    {/* 导航栏 */}
-    <div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
-        <div className='py-1 px-5'>
-          <MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-          <SearchInput {...props} />
-        </div>
-      </Collapse>
-      <div className='w-full flex justify-between items-center p-4 '>
-        {/* 左侧LOGO 标题 */}
-        <div className='flex flex-none flex-grow-0'>
-          <Logo {...props} />
-        </div>
-        <div className='flex'>
-        </div>
-
-        {/* 右侧功能 */}
-        <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='cursor-pointer text-lg p-2'>
-            {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>)
-}
-
-export default TopNav

themes/fukasawa/config.js

@@ -10,11 +10,9 @@ const CONFIG = {
   FUKASAWA_MENU_CATEGORY: true, // 显示分类
   FUKASAWA_MENU_TAG: true, // 显示标签
   FUKASAWA_MENU_ARCHIVE: true, // 显示归档
-  FUKASAWA_MENU_SEARCH: false, // 显示搜索
 
   FUKASAWA_SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
   FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT: false, // 侧边栏默认折叠收起
   FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL: false // 侧边栏滚动时折叠 仅文章阅读页有效
-
 }
 export default CONFIG

themes/fukasawa/index.js

@@ -1,27 +1,27 @@
 'use client'
 
-import CONFIG from './config'
-import TopNav from './components/TopNav'
-import AsideLeft from './components/AsideLeft'
-import { isBrowser } from '@/lib/utils'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { AdSlot } from '@/components/GoogleAdsense'
+import replaceSearchResult from '@/components/Mark'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import ArticleDetail from './components/ArticleDetail'
+import ArticleLock from './components/ArticleLock'
+import AsideLeft from './components/AsideLeft'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import BlogArchiveItem from './components/BlogPostArchive'
-import ArticleDetail from './components/ArticleDetail'
-import ArticleLock from './components/ArticleLock'
+import Header from './components/Header'
 import TagItemMini from './components/TagItemMini'
-import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import Link from 'next/link'
-import { Transition } from '@headlessui/react'
-import dynamic from 'next/dynamic'
-import { AdSlot } from '@/components/GoogleAdsense'
+import CONFIG from './config'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import WWAds from '@/components/WWAds'
-import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 
@@ -43,51 +43,58 @@ export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa)
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
+const LayoutBase = props => {
   const { children, headerSlot } = props
   const leftAreaSlot = <Live2D />
   const { onLoading, fullWidth } = useGlobal()
   const searchModal = useRef(null)
   return (
     <ThemeGlobalFukasawa.Provider value={{ searchModal }}>
-      <div id='theme-fukasawa' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
-        <AlgoliaSearchModal cRef={searchModal} {...props} />
+      <div
+        id='theme-fukasawa'
+        className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
         <Style />
+        {/* 页头导航，此主题只在移动端生效 */}
+        <Header {...props} />
 
-        <TopNav {...props} />
-
-        <div className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' flex'}>
+        <div
+          className={
+            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+              ? 'flex-row-reverse'
+              : '') + ' flex'
+          }>
           {/* 侧边抽屉 */}
           <AsideLeft {...props} slot={leftAreaSlot} />
 
-          <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
-            <div id='container-inner' className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
+          <main
+            id='wrapper'
+            className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
+            <div
+              id='container-inner'
+              className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
               <Transition
                 show={!onLoading}
                 appear={true}
-                className="w-full"
-                enter="transition ease-in-out duration-700 transform order-first"
-                enterFrom="opacity-0 translate-y-16"
-                enterTo="opacity-100"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 -translate-y-16"
-                unmount={false}
-              >
+                className='w-full'
+                enter='transition ease-in-out duration-700 transform order-first'
+                enterFrom='opacity-0 translate-y-16'
+                enterTo='opacity-100'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='opacity-100 translate-y-0'
+                leaveTo='opacity-0 -translate-y-16'
+                unmount={false}>
                 <div> {headerSlot} </div>
                 <div> {children} </div>
-
               </Transition>
 
               <div className='mt-2'>
                 <AdSlot type='native' />
               </div>
-
             </div>
           </main>
-
         </div>
 
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
       </div>
     </ThemeGlobalFukasawa.Provider>
   )
@@ -96,49 +103,65 @@ const LayoutBase = (props) => {
 /**
  * 首页
  * @param {*} props notion数据
-            * @returns 首页就是一个博客列表
-            */
-const LayoutIndex = (props) => {
+ * @returns 首页就是一个博客列表
+ */
+const LayoutIndex = props => {
   return <LayoutPostList {...props} />
 }
 
 /**
  * 博客列表
  * @param {*} props
-            */
-const LayoutPostList = (props) => {
-  return <>
-    <div className='w-full p-2'><WWAds className='w-full' orientation='horizontal' /></div>
-    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-  </>
+ */
+const LayoutPostList = props => {
+  const POST_LIST_STYLE = siteConfig('POST_LIST_STYLE')
+  return (
+    <>
+      <div className='w-full p-2'>
+        <WWAds className='w-full' orientation='horizontal' />
+      </div>
+      { POST_LIST_STYLE=== 'page' ? (
+        <BlogListPage {...props} />
+      ) : (
+        <BlogListScroll {...props} />
+      )}
+    </>
+  )
 }
 
 /**
  * 文章详情
  * @param {*} props
-            * @returns
-            */
-const LayoutSlug = (props) => {
+ * @returns
+ */
+const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
     <>
-      {lock ? <ArticleLock validPassword={validPassword} /> : <ArticleDetail {...props} />}
+      {lock ? (
+        <ArticleLock validPassword={validPassword} />
+      ) : (
+        <ArticleDetail {...props} />
+      )}
     </>
   )
 }
@@ -167,26 +190,28 @@ const LayoutSearch = props => {
 /**
  * 归档页面
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
-  return <>
-    <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
-      {Object.keys(archivePosts).map(archiveTitle => (
-        <BlogArchiveItem
-          key={archiveTitle}
-          posts={archivePosts[archiveTitle]}
-          archiveTitle={archiveTitle}
-        />
-      ))}
-    </div>
-  </>
+  return (
+    <>
+      <div className='mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogArchiveItem
+            key={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+            archiveTitle={archiveTitle}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
  * 404
  * @param {*} props
-            * @returns
-            */
+ * @returns
+ */
 const Layout404 = props => {
   return <>404</>
 }
@@ -194,16 +219,17 @@ const Layout404 = props => {
 /**
  * 分类列表
  * @param {*} props
-            * @returns
-            */
-const LayoutCategoryIndex = (props) => {
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
   const { categoryOptions } = props
   return (
     <>
       <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
         <div className='dark:text-gray-200 mb-5'>
-          <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+          <i className='mr-4 fas fa-th' />
+          {locale.COMMON.CATEGORY}:
         </div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
           {categoryOptions?.map(category => {
@@ -214,8 +240,11 @@ const LayoutCategoryIndex = (props) => {
                 passHref
                 legacyBehavior>
                 <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                  className={
+                    'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+                  }>
+                  <i className='mr-4 fas fa-folder' />
+                  {category.name}({category.count})
                 </div>
               </Link>
             )
@@ -229,36 +258,41 @@ const LayoutCategoryIndex = (props) => {
 /**
  * 标签列表
  * @param {*} props
-            * @returns
-            */
-const LayoutTagIndex = (props) => {
+ * @returns
+ */
+const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   const { tagOptions } = props
-  return <>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
-      <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag' />{locale.COMMON.TAGS}:</div>
-      <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
-        {tagOptions.map(tag => {
-          return (
-            <div key={tag.name} className="p-2">
-              <TagItemMini key={tag.name} tag={tag} />
-            </div>
-          )
-        })}
+  return (
+    <>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
+        <div className='dark:text-gray-200 mb-5'>
+          <i className='mr-4 fas fa-tag' />
+          {locale.COMMON.TAGS}:
+        </div>
+        <div id='tags-list' className='duration-200 flex flex-wrap ml-8'>
+          {tagOptions.map(tag => {
+            return (
+              <div key={tag.name} className='p-2'>
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
       </div>
-    </div>
-  </>
+    </>
+  )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }

themes/fukasawa/style.js

@@ -44,7 +44,16 @@ const Style = () => {
         column-gap: .5rem;
         }
     }
+
+    .container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 10px;
+            padding: 10px;
+        }
+
   `}</style>
 }
 
 export { Style }
+

themes/game/components/BlogListPage.js

@@ -1,3 +1,4 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { GameListIndexCombine } from './GameListIndexCombine'
 import PaginationSimple from './PaginationSimple'
@@ -9,7 +10,8 @@ import PaginationSimple from './PaginationSimple'
 export const BlogListPage = props => {
   const { page = 1, postCount } = props
   const { NOTION_CONFIG } = useGlobal()
-  const totalPage = Math.ceil(postCount / NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showNext = page < totalPage
 
   return (

themes/game/components/BlogListScroll.js

@@ -9,7 +9,7 @@ export const BlogListScroll = props => {
   const { posts } = props
   const { locale, NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
 
   let hasMore = false
   const postsToShow =

themes/game/components/PaginationSimple.js

@@ -17,6 +17,7 @@ const PaginationSimple = ({ page, showNext }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
 
   return (
     <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>

themes/gitbook/components/BottomMenuBar.js

@@ -1,23 +1,27 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import JumpToTopButton from './JumpToTopButton'
+import MobileButtonCatalog from './MobileButtonCatalog'
+import MobileButtonPageNav from './MobileButtonPageNav'
 
+/**
+ * 移动端底部导航
+ * @param {*} param0
+ * @returns
+ */
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
+  const showTocButton = post?.toc?.length > 1
 
   return (
-        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
-            <div className='flex justify-between h-full shadow-card'>
-                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
-                <i className="fa-solid fa-book"></i>
-                </div>
-                <div className='flex w-full items-center justify-center cursor-pointer'>
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <>
+      {/* 移动端底部导航按钮 */}
+      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+        <div className='w-full'>
+          <MobileButtonPageNav />
         </div>
+        {showTocButton && (
+          <div className='w-full'>
+            <MobileButtonCatalog />
+          </div>
+        )}
+      </div>
+    </>
   )
 }

themes/gitbook/components/Catalog.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -13,6 +14,7 @@ const Catalog = ({ post }) => {
   const toc = post?.toc
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
+  const {locale}= useGlobal()
 
   // 监听滚动事件
   useEffect(() => {
@@ -67,6 +69,7 @@ const Catalog = ({ post }) => {
 
   return (
     <>
+      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
       <div
         id='toc-wrapper'
         className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>

themes/gitbook/components/CatalogDrawerWrapper.js

@@ -0,0 +1,66 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogDrawerWrapper = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  useEffect(() => {
+    changeTocVisible(false)
+  }, [router])
+  return (
+    <>
+      <div
+        id='gitbook-toc-float'
+        className='fixed top-0 right-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
+          }>
+          {post && (
+            <>
+              <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+                <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+                <i
+                  className='fas fa-times p-1 cursor-pointer'
+                  onClick={() => {
+                    changeTocVisible(false)
+                  }}></i>
+              </div>
+              <div className='dark:text-gray-400 text-gray-600 px-3'>
+                <Catalog post={post} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </>
+  )
+}
+export default CatalogDrawerWrapper

themes/gitbook/components/FloatTocButton.js

@@ -1,25 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}

themes/gitbook/components/Footer.js

@@ -1,33 +1,66 @@
 import { siteConfig } from '@/lib/config'
-
+import SocialButton from './SocialButton'
+/**
+ * 站点也叫
+ * @param {*} param0
+ * @returns
+ */
 const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='z-20 py-2 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'
-        >
-            <hr className='pb-2' />
+    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
+      <hr className='pb-2' />
 
-            <div className='flex justify-center'>
-                <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
-                © {`${copyrightDate}`}
-            </div>
+      <SocialButton />
 
-            <div className='text-xs font-serif'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a></div>
+      <div className='flex justify-center pt-1'>
+        <div>
+          <i className='mx-1 animate-pulse fas fa-heart' />{' '}
+          <a
+            href={siteConfig('LINK')}
+            className='underline font-bold text-gray-500 dark:text-gray-300 '>
+            {siteConfig('AUTHOR')}
+          </a>
+          .<br />
+        </div>
+        © {`${copyrightDate}`}
+      </div>
 
-            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
+      <div className='text-xs font-serif'>
+        Powered By{' '}
+        <a
+          href='https://github.com/tangly1024/NotionNext'
+          className='underline text-gray-500 dark:text-gray-300'>
+          NotionNext {siteConfig('VERSION')}
+        </a>
+      </div>
 
-            <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>
-            <h1 className='pt-1'>{siteConfig('TITLE')}</h1>
+      {siteConfig('BEI_AN') && (
+        <>
+          <i className='fas fa-shield-alt' />{' '}
+          <a href='https://beian.miit.gov.cn/' className='mr-2'>
+            {siteConfig('BEI_AN')}
+          </a>
+          <br />
+        </>
+      )}
 
-        </footer>
+      <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>
+      {/* SEO title */}
+      <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
+    </footer>
   )
 }
 

themes/gitbook/components/Header.js

@@ -90,7 +90,7 @@ export default function Header(props) {
             {isOpen ? (
               <i className='fas fa-times' />
             ) : (
-              <i className='fa-solid fa-ellipsis-vertical' />
+              <i className='fa-solid fa-bars' />
             )}
           </div>
         </div>

themes/gitbook/components/JumpToTopButton.js

@@ -1,4 +1,3 @@
-
 /**
  * 跳转到网页顶部
  * 当屏幕下滑500像素后会出现该控件
@@ -9,15 +8,20 @@
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   return (
-          <div
-              id="jump-to-top"
-              data-aos="fade-up"
-              data-aos-duration="300"
-              data-aos-once="false"
-              data-aos-anchor-placement="top-center"
-              className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
-              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-          </div>
+    <div
+      id='jump-to-top'
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-center'
+      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      <i
+        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
   )
 }
 

themes/gitbook/components/LogoBar.js

@@ -1,6 +1,5 @@
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
-import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
 import CONFIG from '../config'
 
@@ -11,19 +10,8 @@ import CONFIG from '../config'
  */
 export default function LogoBar(props) {
   const { siteInfo } = props
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
   return (
     <div id='top-wrapper' className='w-full flex items-center'>
-      <div
-        onClick={togglePageNavVisible}
-        className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
-        <i
-          className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
-      </div>
       <Link
         href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
         className='flex text-md md:text-xl dark:text-gray-200'>

themes/gitbook/components/MobileButtonCatalog.js

@@ -0,0 +1,31 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端目录按钮
+ */
+export default function MobileButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-list-ol fas' />
+        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+      </a>
+    </div>
+  )
+}

themes/gitbook/components/MobileButtonPageNav.js

@@ -0,0 +1,30 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端文章导航按钮
+ */
+export default function MobileButtonPageNav() {
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+    <div
+      onClick={togglePageNavVisible}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='nav-button'
+        className={
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-book fas' />
+        <span>{locale.COMMON.ARTICLE_LIST}</span>
+      </a>
+    </div>
+  )
+}

themes/gitbook/components/NavPostItem.js

@@ -40,8 +40,8 @@ const NavPostItem = props => {
             !expanded && <Badge />}
         </div>
         <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
-          {group?.items?.map(post => (
-            <div key={post.id} className='ml-3 border-l'>
+          {group?.items?.map((post, index) => (
+            <div key={index} className='ml-3 border-l'>
               <BlogPostCard className='text-sm ml-3' post={post} />
             </div>
           ))}
@@ -51,8 +51,8 @@ const NavPostItem = props => {
   } else {
     return (
       <>
-        {group?.items?.map(post => (
-          <div key={post.id}>
+        {group?.items?.map((post, index) => (
+          <div key={index}>
             <BlogPostCard className='text-sm py-2' post={post} />
           </div>
         ))}

themes/gitbook/components/PageNavDrawer.js

@@ -1,4 +1,7 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import NavPostList from './NavPostList'
 
 /**
@@ -11,11 +14,16 @@ import NavPostList from './NavPostList'
 const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
-
+  const { locale } = useGlobal()
+  const router = useRouter()
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
 
+  useEffect(() => {
+    changePageNavVisible(false)
+  }, [router])
+
   return (
     <>
       <div
@@ -24,7 +32,15 @@ const PageNavDrawer = props => {
         {/* 侧边菜单 */}
         <div
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
-                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+            <span>{locale.COMMON.ARTICLE_LIST}</span>
+            <i
+              className='fas fa-times p-1 cursor-pointer'
+              onClick={() => {
+                changePageNavVisible(false)
+              }}></i>
+          </div>
           {/* 所有文章列表 */}
           <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
             <NavPostList filteredNavPages={filteredNavPages} />

themes/gitbook/components/SocialButton.js

@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,31 +8,176 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <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>}
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
+
+  const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
+  const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
+  const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
+        {CONTACT_GITHUB && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={CONTACT_GITHUB}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_TWITTER && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={CONTACT_TWITTER}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_TELEGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_TELEGRAM}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_LINKEDIN && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_LINKEDIN}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_WEIBO && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={CONTACT_WEIBO}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_INSTAGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={CONTACT_INSTAGRAM}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_EMAIL && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${CONTACT_EMAIL}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {ENABLE_RSS && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_BILIBILI && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={CONTACT_BILIBILI}>
+            <i className='transform hover:scale-125 duration-150 dark:hover:text-green-400 hover:text-green-600 fab fa-bilibili' />
+          </a>
+        )}
+        {CONTACT_YOUTUBE && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={CONTACT_YOUTUBE}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-green-400 hover:text-green-600' />
+          </a>
+        )}
+        {CONTACT_XIAOHONGSHU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'小红书'}
+            href={CONTACT_XIAOHONGSHU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/xiaohongshu.svg'
+              alt='小红书'
+            />
+          </a>
+        )}
+        {CONTACT_ZHISHIXINGQIU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'知识星球'}
+            href={CONTACT_ZHISHIXINGQIU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/zhishixingqiu.svg'
+              alt='知识星球'
+            />{' '}
+          </a>
+        )}
+        {CONTACT_WEHCHAT_PUBLIC && (
+          <button
+            onMouseEnter={openPopover}
+            onMouseLeave={closePopover}
+            aria-label={'微信公众号'}>
+            <div id='wechat-button'>
+              <i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin  dark:hover:text-green-400 hover:text-green-600' />
+            </div>
+            {/* 二维码弹框 */}
+            <div className='absolute'>
+              <div
+                id='pop'
+                className={
+                  (qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
+                  ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
+                }>
+                <div className='p-2 mt-1 w-28 h-28'>
+                  {qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
+      </div>
     </div>
+  )
 }
 export default SocialButton

themes/gitbook/components/TocDrawer.js

@@ -1,34 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import Catalog from './Catalog'
-
-/**
- * 悬浮抽屉目录
- * @param toc
- * @param post
- * @returns {JSX.Element}
- * @constructor
- */
-const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const switchVisible = () => {
-    changeTocVisible(!tocVisible)
-  }
-  return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
-      {/* 侧边菜单 */}
-      <div
-        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
-          {post && <>
-           <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
-             <Catalog post={post}/>
-           </div>
-          </>}
-      </div>
-    </div>
-    {/* 背景蒙版 */}
-    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
-         onClick={switchVisible} />
-  </>
-}
-export default TocDrawer

themes/gitbook/index.js

@@ -9,7 +9,7 @@ import ShareBar from '@/components/ShareBar'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
-import { Transition } from '@headlessui/react'
+import { getShortId } from '@/lib/utils/pageId'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -19,9 +19,10 @@ import ArticleAround from './components/ArticleAround'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
+import BottomMenuBar from './components/BottomMenuBar'
 import Catalog from './components/Catalog'
+import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import InfoCard from './components/InfoCard'
@@ -31,7 +32,6 @@ import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
 import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -54,14 +54,14 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
     localStorage.getItem('post_read_time') || '{}'
   )
   if (post) {
-    postReadTime[post.id] = new Date().getTime()
+    postReadTime[getShortId(post.id)] = new Date().getTime()
   }
   // 更新
   localStorage.setItem('post_read_time', JSON.stringify(postReadTime))
 
   return allNavPages?.map(item => {
     const res = {
-      id: item.id,
+      short_id: item.short_id,
       title: item.title || '',
       pageCoverThumbnail: item.pageCoverThumbnail || '',
       category: item.category || null,
@@ -74,9 +74,9 @@ function getNavPagesWithLatest(allNavPages, latestPosts, post) {
     }
     // 属于最新文章通常6篇 && (无阅读记录 || 最近更新时间大于上次阅读时间)
     if (
-      latestPosts.some(post => post.id === item.id) &&
-      (!postReadTime[item.id] ||
-        postReadTime[item.id] < new Date(item.lastEditedDate).getTime())
+      latestPosts.some(post => post?.id.indexOf(item?.short_id) === 0) &&
+      (!postReadTime[item.short_id] ||
+        postReadTime[item.short_id] < new Date(item.lastEditedDate).getTime())
     ) {
       return { ...res, isLatest: true }
     } else {
@@ -101,13 +101,12 @@ const LayoutBase = props => {
     slotRight,
     slotTop
   } = props
-  const { onLoading, fullWidth } = useGlobal()
+  const { fullWidth } = useGlobal()
   const router = useRouter()
   const [tocVisible, changeTocVisible] = useState(false)
   const [pageNavVisible, changePageNavVisible] = useState(false)
   const [filteredNavPages, setFilteredNavPages] = useState(allNavPages)
 
-  const showTocButton = post?.toc?.length > 1
   const searchModal = useRef(null)
 
   useEffect(() => {
@@ -130,7 +129,7 @@ const LayoutBase = props => {
 
       <div
         id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
         <AlgoliaSearchModal cRef={searchModal} {...props} />
 
         {/* 顶部导航栏 */}
@@ -139,9 +138,8 @@ const LayoutBase = props => {
         <main
           id='wrapper'
           className={
-            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-              ? 'flex-row-reverse'
-              : '') + 'relative flex justify-between w-full h-full mx-auto'
+            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
+            'relative flex justify-between w-full h-full mx-auto'
           }>
           {/* 左侧推拉抽屉 */}
           {fullWidth ? null : (
@@ -149,16 +147,19 @@ const LayoutBase = props => {
               className={
                 'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
               }>
-              <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'>
-                {slotLeft}
-                <SearchInput className='my-3 rounded-md' />
-                <div className='mb-20'>
+              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+                {/* 导航 */}
+                <div className='overflow-y-scroll scroll-hidden'>
+                  {/* 嵌入 */}
+                  {slotLeft}
+                  {/* 搜索框 */}
+                  <SearchInput className='my-3 rounded-md' />
+
+                  {/* 文章列表 */}
                   {/* 所有文章列表 */}
                   <NavPostList filteredNavPages={filteredNavPages} />
                 </div>
-              </div>
-
-              <div className='w-72 fixed left-0 bottom-0 z-20 bg-white'>
+                {/* 页脚 */}
                 <Footer {...props} />
               </div>
             </div>
@@ -173,7 +174,7 @@ const LayoutBase = props => {
               {slotTop}
               <WWAds className='w-full' orientation='horizontal' />
 
-              <Transition
+              {/* <Transition
                 show={!onLoading}
                 appear={true}
                 enter='transition ease-in-out duration-700 transform order-first'
@@ -182,9 +183,9 @@ const LayoutBase = props => {
                 leave='transition ease-in-out duration-300 transform'
                 leaveFrom='opacity-100 translate-y-0'
                 leaveTo='opacity-0 -translate-y-16'
-                unmount={false}>
-                {children}
-              </Transition>
+                unmount={false}> */}
+              {children}
+              {/* </Transition> */}
 
               {/* Google广告 */}
               <AdSlot type='in-article' />
@@ -211,6 +212,7 @@ const LayoutBase = props => {
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
                 <div className='py-4'>
+                  {/* 桌面端目录 */}
                   <Catalog {...props} />
                   {slotRight}
                   {router.route === '/' && (
@@ -235,18 +237,11 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端悬浮目录按钮 */}
-        {showTocButton && !tocVisible && (
-          <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-            <FloatTocButton {...props} />
-          </div>
-        )}
-
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
 
         {/* 移动端底部导航栏 */}
-        {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+        <BottomMenuBar {...props} />
       </div>
     </ThemeGlobalGitbook.Provider>
   )
@@ -366,7 +361,8 @@ const LayoutSlug = props => {
             </section>
           )}
 
-          <TocDrawer {...props} />
+          {/* 文章目录 */}
+          <CatalogDrawerWrapper {...props} />
         </div>
       )}
     </>
@@ -412,11 +408,9 @@ const LayoutArchive = props => {
  */
 const Layout404 = props => {
   return (
-    <>
-      <div className='w-full h-96 py-80 flex justify-center items-center'>
-        404 Not found.
-      </div>
-    </>
+    <div className='w-full h-96 py-80 flex justify-center items-center'>
+      404 Not found.
+    </div>
   )
 }
 

themes/gitbook/style.js

@@ -5,14 +5,18 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    
-    // 底色
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      .dark body {
         background-color: black;
-    }
+      }
 
-  `}</style>
+      .bottom-button-group {
+        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
+      }
+    `}</style>
+  )
 }
 
 export { Style }

themes/heo/components/ArticleAdjacent.js

@@ -1,87 +0,0 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
-
-/**
- * 上一篇，下一篇文章
- * @param {prev,next} param0
- * @returns
- */
-export default function ArticleAdjacent({ prev, next }) {
-  const [isScrollEnd, setIsScrollEnd] = useState(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    setIsScrollEnd(false)
-  }, [router])
-
-  useEffect(() => {
-    // 文章是否已经到了底部
-    const targetElement = document.getElementById('article-end')
-
-    const handleIntersect = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          setIsScrollEnd(true)
-        }
-      })
-    }
-
-    const options = {
-      root: null,
-      rootMargin: '0px',
-      threshold: 0.1
-    }
-
-    const observer = new IntersectionObserver(handleIntersect, options)
-    observer.observe(targetElement)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  if (!prev || !next || !siteConfig('HEO_ARTICLE_ADJACENT', null, CONFIG)) {
-    return <></>
-  }
-
-  return (
-        <div id='article-end'>
-            {/* 移动端 */}
-            <section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
-                <Link
-                    href={`/${prev.slug}`}
-                    passHref
-                    className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-t-xl dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'
-                >
-                    <div className='flex justify-start items-center w-full'>上一篇</div>
-                    <div className='flex justify-center items-center text-lg font-bold'>{prev.title}</div>
-                </Link>
-                <Link
-                    href={`/${next.slug}`}
-                    passHref
-                    className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-b-xl dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'
-                >
-                    <div className='flex justify-start items-center w-full'>下一篇</div>
-                    <div className='flex justify-center items-center text-lg font-bold'>{next.title}</div>
-                </Link>
-            </section>
-
-            {/* 桌面端 */}
-
-            <div id='pc-next-post' className={`hidden md:block fixed z-40 right-24 bottom-4 duration-200 transition-all ${isScrollEnd ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
-                <Link
-                    href={`/${next.slug}`}
-                    className='cursor-pointer drop-shadow-xl duration transition-all h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:text-white hover:font-bold hover:bg-blue-600 rounded-lg flex flex-col justify-between'
-                >
-                    <div className='text-xs'>下一篇</div>
-                    <hr />
-                    <div>{next?.title}</div>
-                </Link>
-            </div>
-
-        </div>
-  )
-}

themes/heo/components/BlogPostCard.js

@@ -30,7 +30,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
         {/* 图片封面 */}
         {showPageCover && (
           <Link href={post?.href} passHref legacyBehavior>
-            <div className='w-full md:w-5/12 2xl:w-full overflow-hidden'>
+            <div className='w-full md:w-5/12 2xl:w-full overflow-hidden cursor-pointer select-none'>
               <LazyImage
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
@@ -50,11 +50,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
             {/* 分类 */}
             {post?.category && (
               <div
-                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
+                className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-300 text-gray-600 hover:text-indigo-700 dark:hover:text-yellow-500`}>
                 <Link
                   passHref
                   href={`/category/${post.category}`}
-                  className='cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-yellow-700  dark:text-gray-600 transform'>
+                  className='cursor-pointer text-xs font-normal menu-link '>
                   {post.category}
                 </Link>
               </div>
@@ -76,7 +76,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
           {/* 摘要 */}
           {(!showPreview || showSummary) && (
-            <main className='line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
+            <main className='line-clamp-2 replace text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
               {post.summary}
             </main>
           )}

themes/heo/components/BlogPostListPage.js

@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {

themes/heo/components/BlogPostListScroll.js

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
   const { NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
 
   let hasMore = false

themes/heo/components/Catalog.js

@@ -63,14 +63,14 @@ const Catalog = ({ toc }) => {
     <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
     <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full'>
-        {toc.map((tocItem) => {
+        {toc?.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           tocIds.push(id)
           return (
             <a
               key={id}
               href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+              className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}

themes/heo/components/CategoryBar.js

@@ -29,23 +29,40 @@ export default function CategoryBar(props) {
     }
   }
 
-  return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
+  return (
+    <div
+      id='category-bar'
+      className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]  
   ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''}  py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
+      <div
+        id='category-bar-items'
+        ref={categoryBarItemsRef}
+        className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
+        <MenuItem href='/' name={locale.NAV.INDEX} />
+        {categoryOptions?.map((c, index) => (
+          <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />
+        ))}
+      </div>
 
-        <div id='category-bar-items' ref={categoryBarItemsRef} className='scroll-smooth max-w-4xl rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
-            <MenuItem href='/' name={locale.NAV.INDEX} />
-            {categoryOptions?.map((c, index) => <MenuItem key={index} href={`/category/${c.name}`} name={c.name} />)}
-        </div>
-
-        <div id='category-bar-next' className='flex items-center justify-center'>
-            <div id='right' className='cursor-pointer mx-2' onClick={handleToggleScroll}>
-            {scrollRight ? <ChevronDoubleLeft className={'w-5 h-5'} /> : <ChevronDoubleRight className={'w-5 h-5'} /> }
-            </div>
-            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
-                {locale.MENU.CATEGORY}
-            </Link>
+      <div id='category-bar-next' className='flex items-center justify-center'>
+        <div
+          id='right'
+          className='cursor-pointer mx-2 dark:text-gray-300 dark:hover:text-yellow-600 hover:text-indigo-600'
+          onClick={handleToggleScroll}>
+          {scrollRight ? (
+            <ChevronDoubleLeft className={'w-5 h-5'} />
+          ) : (
+            <ChevronDoubleRight className={'w-5 h-5'} />
+          )}
         </div>
+        <Link
+          href='/category'
+          className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600 dark:hover:text-yellow-600'>
+          {locale.MENU.CATEGORY}
+        </Link>
+      </div>
     </div>
+  )
 }
 
 /**
@@ -57,7 +74,10 @@ const MenuItem = ({ href, name }) => {
   const router = useRouter()
   const { category } = router.query
   const selected = category === name
-  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
-        <Link href={href}>{name}</Link>
+  return (
+    <div
+      className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
+      <Link href={href}>{name}</Link>
     </div>
+  )
 }

themes/heo/components/Footer.js

@@ -1,49 +1,66 @@
-import SocialButton from './SocialButton'
 import { siteConfig } from '@/lib/config'
+import SocialButton from './SocialButton'
 
 const Footer = ({ title }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'
-        >
+    <footer className='relative flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'>
+      {/* 颜色过度区 */}
+      <div
+        id='color-transition'
+        className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'
+      />
 
-            {/* 颜色过度区 */}
-            <div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
+      {/* 社交按钮 */}
+      <div className='w-full h-24'>
+        <SocialButton />
+      </div>
 
-            </div>
+      <br />
 
-            {/* 社交按钮 */}
-            <div className='w-full h-24'>
-                <SocialButton />
-            </div>
-
-            <br />
-
-            {/* 底部页面信息 */}
-            <div id='footer-bottom' className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
-
-                <div id='footer-bottom-left'>
-                   NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold  dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.
-                </div>
-
-            <div id='footer-bottom-right'>
-                {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a></>}
-
-                <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>
-
-                {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
-
-            </div>
+      {/* 底部页面信息 */}
+      <div
+        id='footer-bottom'
+        className='w-full h-20 flex flex-col p-3 lg:flex-row justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#21232A] border-t dark:border-t-[#3D3D3F]'>
+        <div id='footer-bottom-left'>
+          NotionNext {siteConfig('VERSION')} <i className='fas fa-copyright' />{' '}
+          {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' />{' '}
+          <a
+            href={siteConfig('LINK')}
+            className='underline font-bold dark:text-gray-300 '>
+            {siteConfig('AUTHOR')}
+          </a>
+          .
         </div>
-        </footer >
+
+        <div id='footer-bottom-right'>
+          {siteConfig('BEI_AN') && (
+            <>
+              <i className='fas fa-shield-alt' />{' '}
+              <a href='https://beian.miit.gov.cn/' className='mr-2'>
+                {siteConfig('BEI_AN')}
+              </a>
+            </>
+          )}
+
+          <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>
+
+          {/* <h1 className='text-xs pt-4 text-light-400 dark:text-gray-400'>{title} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1> */}
+        </div>
+      </div>
+    </footer>
   )
 }
 

themes/heo/components/Header.js

@@ -0,0 +1,195 @@
+import { siteConfig } from '@/lib/config'
+import { isBrowser } from '@/lib/utils'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import DarkModeButton from './DarkModeButton'
+import Logo from './Logo'
+import { MenuListTop } from './MenuListTop'
+import RandomPostButton from './RandomPostButton'
+import ReadingProgress from './ReadingProgress'
+import SearchButton from './SearchButton'
+import SlideOver from './SlideOver'
+
+/**
+ * 页头：顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const [fixedNav, setFixedNav] = useState(false)
+  const [textWhite, setTextWhite] = useState(false)
+  const [navBgWhite, setBgWhite] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const router = useRouter()
+  const slideOverRef = useRef()
+
+  const toggleMenuOpen = () => {
+    slideOverRef?.current?.toggleSlideOvers()
+  }
+
+  /**
+   * 根据滚动条，切换导航栏样式
+   */
+  const scrollTrigger = useCallback(
+    throttle(() => {
+      const scrollS = window.scrollY
+      // 导航栏设置 白色背景
+      if (scrollS <= 1) {
+        setFixedNav(false)
+        setBgWhite(false)
+        setTextWhite(false)
+
+        // 文章详情页特殊处理
+        if (document?.querySelector('#post-bg')) {
+          setFixedNav(true)
+          setTextWhite(true)
+        }
+      } else {
+        // 向下滚动后的导航样式
+        setFixedNav(true)
+        setTextWhite(false)
+        setBgWhite(true)
+      }
+    }, 100)
+  )
+  useEffect(() => {
+    scrollTrigger()
+  }, [router])
+
+  // 监听滚动
+  useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  // 导航栏根据滚动轮播菜单内容
+  useEffect(() => {
+    let prevScrollY = 0
+    let ticking = false
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY
+          if (currentScrollY > prevScrollY) {
+            setActiveIndex(1) // 向下滚动时设置activeIndex为1
+          } else {
+            setActiveIndex(0) // 向上滚动时设置activeIndex为0
+          }
+          prevScrollY = currentScrollY
+          ticking = false
+        })
+        ticking = true
+      }
+    }
+
+    if (isBrowser) {
+      window.addEventListener('scroll', handleScroll)
+    }
+
+    return () => {
+      if (isBrowser) {
+        window.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <style jsx>{`
+        @keyframes fade-in-down {
+          0% {
+            opacity: 0.5;
+            transform: translateY(-30%);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes fade-in-up {
+          0% {
+            opacity: 0.5;
+            transform: translateY(30%);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .fade-in-down {
+          animation: fade-in-down 0.3s ease-in-out;
+        }
+
+        .fade-in-up {
+          animation: fade-in-up 0.3s ease-in-out;
+        }
+      `}</style>
+
+      {/* fixed时留白高度 */}
+      {fixedNav && !document?.querySelector('#post-bg') && (
+        <div className='h-16'></div>
+      )}
+
+      {/* 顶部导航菜单栏 */}
+      <nav
+        id='nav'
+        className={`z-20 h-16 top-0 w-full duration-300 transition-all
+            ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
+            ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
+            ${navBgWhite ? 'bg-white dark:bg-[#18171d] shadow' : 'bg-transparent'}`}>
+        <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-6'>
+          {/* 左侧logo */}
+          <Logo {...props} />
+
+          {/* 中间菜单 */}
+          <div
+            id='nav-bar-swipe'
+            className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full`}>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 0 ? 'opacity-100 mt-0' : '-mt-20 opacity-0 invisible'}`}>
+              <MenuListTop {...props} />
+            </div>
+            <div
+              className={`absolute transition-all duration-700 ${activeIndex === 1 ? 'opacity-100 mb-0' : '-mb-20 opacity-0 invisible'}`}>
+              <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>
+                {siteConfig('AUTHOR') || siteConfig('TITLE')}{' '}
+                {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}
+              </h1>
+            </div>
+          </div>
+
+          {/* 右侧固定 */}
+          <div className='flex flex-shrink-0 justify-end items-center w-48'>
+            <RandomPostButton {...props} />
+            <SearchButton {...props} />
+            {!JSON.parse(siteConfig('THEME_SWITCH')) && (
+              <div className='hidden md:block'>
+                <DarkModeButton {...props} />
+              </div>
+            )}
+            <ReadingProgress />
+
+            {/* 移动端菜单按钮 */}
+            <div
+              onClick={toggleMenuOpen}
+              className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
+              <i className='fas fa-bars' />
+            </div>
+          </div>
+
+          {/* 右边侧拉抽屉 */}
+          <SlideOver cRef={slideOverRef} {...props} />
+        </div>
+      </nav>
+    </>
+  )
+}
+
+export default Header

themes/heo/components/Hero.js

@@ -2,6 +2,7 @@
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
@@ -62,13 +63,13 @@ function BannerGroup(props) {
  */
 function Banner(props) {
   const router = useRouter()
-  const { latestPosts } = props
+  const { allNavPages } = props
   /**
    * 随机跳转文章
    */
   function handleClickBanner() {
-    const randomIndex = Math.floor(Math.random() * latestPosts.length)
-    const randomPost = latestPosts[randomIndex]
+    const randomIndex = Math.floor(Math.random() * allNavPages.length)
+    const randomPost = allNavPages[randomIndex]
     router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
   }
 
@@ -161,13 +162,20 @@ function TagsGroupBar() {
  * @returns
  */
 function GroupMenu() {
+  const url_1 = siteConfig('HEO_HERO_CATEGORY_1', {}, CONFIG)?.url || ''
+  const title_1 = siteConfig('HEO_HERO_CATEGORY_1', {}, CONFIG)?.title || ''
+  const url_2 = siteConfig('HEO_HERO_CATEGORY_2', {}, CONFIG)?.url || ''
+  const title_2 = siteConfig('HEO_HERO_CATEGORY_2', {}, CONFIG)?.title || ''
+  const url_3 = siteConfig('HEO_HERO_CATEGORY_3', {}, CONFIG)?.url || ''
+  const title_3 = siteConfig('HEO_HERO_CATEGORY_3', {}, CONFIG)?.title || ''
+
   return (
     <div className='h-[165px] select-none xl:h-20 flex flex-col justify-between xl:space-y-0 xl:flex-row w-28 lg:w-48 xl:w-full xl:flex-nowrap xl:space-x-3'>
       <Link
-        href={siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.url}
+        href={url_1}
         className='group relative overflow-hidden bg-gradient-to-r from-blue-500 to-blue-400 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
         <div className='font-bold lg:text-lg  pl-5 relative -mt-2'>
-          {siteConfig('HEO_HERO_CATEGORY_1', null, CONFIG)?.title}
+          {title_1}
           <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
         <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
@@ -175,10 +183,10 @@ function GroupMenu() {
         </div>
       </Link>
       <Link
-        href={siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.url}
+        href={url_2}
         className='group relative overflow-hidden bg-gradient-to-r from-red-500 to-yellow-500 flex h-20 justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
         <div className='font-bold lg:text-lg pl-5 relative -mt-2'>
-          {siteConfig('HEO_HERO_CATEGORY_2', null, CONFIG)?.title}
+          {title_2}
           <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
         <div className='hidden lg:block absolute right-6  duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
@@ -187,10 +195,10 @@ function GroupMenu() {
       </Link>
       {/* 第三个标签在小屏上不显示 */}
       <Link
-        href={siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.url}
+        href={url_3}
         className='group relative overflow-hidden bg-gradient-to-r from-teal-300 to-cyan-300 hidden h-20 xl:flex justify-start items-center text-white rounded-xl xl:hover:w-1/2 xl:w-1/3 transition-all duration-500 ease-in'>
         <div className='font-bold text-lg pl-5 relative -mt-2'>
-          {siteConfig('HEO_HERO_CATEGORY_3', null, CONFIG)?.title}
+          {title_3}
           <span className='absolute -bottom-0.5 left-5 w-5 h-0.5 bg-white rounded-full'></span>
         </div>
         <div className='absolute right-6 duration-700 ease-in-out transition-all scale-[2] translate-y-6 rotate-12 opacity-20 group-hover:opacity-80 group-hover:scale-100 group-hover:translate-y-0 group-hover:rotate-0'>
@@ -206,6 +214,7 @@ function GroupMenu() {
  */
 function TopGroup(props) {
   const { latestPosts, allNavPages, siteInfo } = props
+  const { locale } = useGlobal()
   const todayCardRef = useRef()
   function handleMouseLeave() {
     todayCardRef.current.coverUp()
@@ -238,13 +247,14 @@ function TopGroup(props) {
                 </div>
                 {/* hover 悬浮的 ‘荐’ 字 */}
                 <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
-                  荐
+                  {locale.COMMON.RECOMMEND_BADGES}
                 </div>
               </div>
             </Link>
           )
         })}
       </div>
+      {/* 一个大的跳转文章卡片 */}
       <TodayCard cRef={todayCardRef} siteInfo={siteInfo} />
     </div>
   )
@@ -304,6 +314,7 @@ function getTopPosts({ latestPosts, allNavPages }) {
 function TodayCard({ cRef, siteInfo }) {
   const router = useRouter()
   const link = siteConfig('HEO_HERO_TITLE_LINK', null, CONFIG)
+  const { locale } = useGlobal()
   // 卡牌是否盖住下层
   const [isCoverUp, setIsCoverUp] = useState(true)
 
@@ -319,10 +330,10 @@ function TodayCard({ cRef, siteInfo }) {
   })
 
   /**
-   * 点击更多
+   * 查看更多
    * @param {*} e
    */
-  function handleClickMore(e) {
+  function handleClickShowMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
@@ -348,10 +359,11 @@ function TodayCard({ cRef, siteInfo }) {
           isCoverUp
             ? 'opacity-100 cursor-pointer'
             : 'opacity-0 transform scale-110 pointer-events-none'
-        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] rounded-xl relative overflow-hidden flex items-end`}>
+        } shadow transition-all duration-200 today-card h-full bg-black rounded-xl relative overflow-hidden flex items-end`}>
+        {/* 卡片文字信息 */}
         <div
           id='today-card-info'
-          className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
+          className='flex justify-between w-full relative text-white p-10 items-end'>
           <div className='flex flex-col'>
             <div className='text-xs font-light'>
               {siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}
@@ -360,27 +372,31 @@ function TodayCard({ cRef, siteInfo }) {
               {siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}
             </div>
           </div>
+          {/* 查看更多的按钮 */}
           <div
-            onClick={handleClickMore}
-            className={`'${
-              isCoverUp ? '' : 'hidden pointer-events-none '
-            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] transition-colors duration-100 rounded-3xl`}>
+            onClick={handleClickShowMore}
+            className={`'${isCoverUp ? '' : 'hidden pointer-events-none'} z-10 group flex items-center px-3 h-10 justify-center  rounded-3xl
+            glassmorphism transition-colors duration-100 `}>
             <PlusSmall
-              className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'}
+              className={
+                'group-hover:rotate-180 duration-500 transition-all w-6 h-6 mr-2 bg-white rounded-full stroke-black'
+              }
             />
             <div id='more' className='select-none'>
-              更多推荐
+              {locale.COMMON.RECOMMEND_POSTS}
             </div>
           </div>
         </div>
-        <div
+
+        {/* 封面图 */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={siteInfo?.pageCover}
           id='today-card-cover'
           className={`${
             isCoverUp ? '' : ' pointer-events-none'
-          } cursor-pointer today-card-cover absolute w-full h-full top-0`}
-          style={{
-            background: `url('${siteInfo?.pageCover}') no-repeat center /cover`
-          }}></div>
+          } hover:scale-110 duration-1000 object-cover cursor-pointer today-card-cover absolute w-full h-full top-0`}
+        />
       </div>
     </div>
   )

themes/heo/components/InfoCard.js

@@ -1,6 +1,6 @@
-import { siteConfig } from '@/lib/config'
-import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import { ArrowRightCircle } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -18,42 +18,83 @@ export function InfoCard(props) {
   const router = useRouter()
   // 在文章详情页特殊处理
   const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
+  const url1 = siteConfig('HEO_INFO_CARD_URL1', null, CONFIG)
+  const icon1 = siteConfig('HEO_INFO_CARD_ICON1', null, CONFIG)
+  const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
+  const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
   return (
-        <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
-            {/* 信息卡牌第一行 */}
-            <div className='flex justify-between'>
-                {/* 问候语 */}
-                <GreetingsWords />
-                <div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
-                    <LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={siteConfig('AUTHOR')} />
-                </div>
-            </div>
+    <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
+      {/* 信息卡牌第一行 */}
+      <div className='flex justify-between'>
+        {/* 问候语 */}
+        <GreetingsWords />
+        <div
+          className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-6 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
+          <LazyImage
+            src={siteInfo?.icon}
+            className='rounded-full'
+            width={isSlugPage ? 100 : 28}
+            alt={siteConfig('AUTHOR')}
+          />
+        </div>
+      </div>
 
-            <h2 className='text-3xl font-extrabold mt-3'>
-                {siteConfig('AUTHOR')}
-            </h2>
+      <h2 className='text-3xl font-extrabold mt-3'>{siteConfig('AUTHOR')}</h2>
 
-            {/* 公告栏 */}
-            <div>
-                <Announcement post={notice} style={{ color: 'white !important' }} />
-            </div>
+      {/* 公告栏 */}
+      <div>
+        <Announcement post={notice} style={{ color: 'white !important' }} />
+      </div>
 
-            <div className='flex justify-between'>
-                <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
-                    {/* 两个社交按钮 */}
-                    <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        <Link href='/about'><GlobeAlt className={'w-6 h-6'} /></Link>
-                    </div>
-                    <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-                        {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
-                            <i className='fab fa-github text-xl' />
-                        </Link>
-                        }
-                    </div>
-                </div>
-                <MoreButton />
+      <div className='flex justify-between'>
+        <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
+          {/* 两个社交按钮 */}
+          {url1 && (
+            <div className='w-10 text-center bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url1}>
+                <i className={icon1} />
+              </Link>
             </div>
-        </Card>
+          )}
+          {url2 && (
+            <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url2}>
+                <i className={icon2} />
+              </Link>
+            </div>
+          )}
+        </div>
+        {/* 第三个按钮 */}
+        <MoreButton />
+      </div>
+    </Card>
+  )
+}
+
+/**
+ * 了解更多按鈕
+ * @returns
+ */
+function MoreButton() {
+  const url3 = siteConfig('HEO_INFO_CARD_URL3', null, CONFIG)
+  const text3 = siteConfig('HEO_INFO_CARD_TEXT3', null, CONFIG)
+  if (!url3) {
+    return <></>
+  }
+  return (
+    <Link href={url3}>
+      <div
+        className={
+          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
+        }>
+        <ArrowRightCircle
+          className={
+            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
+          }
+        />
+        <div className='font-bold'>{text3}</div>
+      </div>
+    </Link>
   )
 }
 
@@ -69,20 +110,11 @@ function GreetingsWords() {
     setGreeting(greetings[randomIndex])
   }
 
-  return <div onClick={handleChangeGreeting} className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
-        {greeting}
+  return (
+    <div
+      onClick={handleChangeGreeting}
+      className=' select-none cursor-pointer py-1 px-2 bg-indigo-400 hover:bg-indigo-50  hover:text-indigo-950 dark:bg-yellow-500 dark:hover:text-white dark:hover:bg-black text-sm rounded-lg  duration-200 transition-colors'>
+      {greeting}
     </div>
-}
-
-/**
- * 了解更多按鈕
- * @returns
- */
-function MoreButton() {
-  return <Link href='/about'>
-        <div className={'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'}>
-            <ArrowRightCircle className={'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'} />
-            <div className='font-bold'>了解更多</div>
-        </div>
-    </Link>
+  )
 }

themes/heo/components/LatestPostsGroupMini.js

@@ -50,13 +50,13 @@ export default function LatestPostsGroupMini({ latestPosts, siteInfo }) {
             </div>
             <div
               className={
-                (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                (selected ? ' text-indigo-400 ' : 'dark:text-gray-200') +
                 ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
-                ' hover:text-indigo-400 cursor-pointer items-center flex'
+                ' hover:text-indigo-400 dark:hover:text-yellow-600 cursor-pointer items-center flex'
               }>
               <div>
                 <div className='line-clamp-2 menu-link'>{post.title}</div>
-                <div className='text-gray-500'>{post.lastEditedDay}</div>
+                <div className='text-gray-400'>{post.lastEditedDay}</div>
               </div>
             </div>
           </Link>

themes/heo/components/Logo.js

@@ -1,24 +1,30 @@
 import { Home } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
-import Link from 'next/link'
 import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
 
 const Logo = props => {
   const { siteInfo } = props
   return (
-        <Link href='/' passHref legacyBehavior>
-            <div className='flex flex-nowrap justify-center items-center cursor-pointer font-extrabold'>
-                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={siteConfig('AUTHOR')} className='mr-4 hidden md:block' />
-                <div id='logo-text' className='group rounded-2xl flex-none relative'>
-                    <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
-                        {siteConfig('TITLE') }
-                    </div>
-                    <div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 py-1 duration-200'>
-                        <Home className={'w-6 h-6 stroke-white stroke-2 '}/>
-                    </div>
-                </div>
-            </div>
-        </Link>
+    <Link href='/' passHref legacyBehavior>
+      <div className='flex flex-nowrap items-center cursor-pointer font-extrabold'>
+        <LazyImage
+          src={siteInfo?.icon}
+          width={24}
+          height={24}
+          alt={siteConfig('AUTHOR')}
+          className='mr-4 hidden md:block'
+        />
+        <div id='logo-text' className='group rounded-2xl flex-none relative'>
+          <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
+            {siteConfig('TITLE')}
+          </div>
+          <div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 py-1 duration-200'>
+            <Home className={'w-6 h-6 stroke-white stroke-2 '} />
+          </div>
+        </div>
+      </div>
+    </Link>
   )
 }
 export default Logo

themes/heo/components/MenuItemCollapse.js

@@ -28,7 +28,7 @@ export const MenuItemCollapse = ({ link }) => {
   return (
     <>
       <div
-        className='select-none w-full px-2 py-2 border rounded-xl text-left dark:bg-hexo-black-gray'
+        className='select-none w-full p-2 border dark:border-gray-600 rounded-lg text-left dark:bg-[#1e1e1e]'
         onClick={toggleShow}>
         {!hasSubMenu && (
           <Link
@@ -62,7 +62,7 @@ export const MenuItemCollapse = ({ link }) => {
             return (
               <div
                 key={index}
-                className='dark:bg-black dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                className='dark:bg-hexo-black-gray dark:text-gray-200 text-left px-3 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}

themes/heo/components/MenuItemDrop.js

@@ -22,7 +22,6 @@ export const MenuItemDrop = ({ link }) => {
           {link?.icon && <i className={link?.icon} />} {link?.name}
         </Link>
       )}
-
       {/* 含子菜单的按钮 */}
       {hasSubMenu && (
         <>
@@ -31,17 +30,16 @@ export const MenuItemDrop = ({ link }) => {
           </div>
         </>
       )}
-
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
           style={{ backdropFilter: 'blur(3px)' }}
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
           {link.subMenus.map((sLink, index) => {
             return (
               <li
                 key={index}
-                className='cursor-pointer hover:bg-blue-600 hover:text-white text-gray-900  tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
+                className='cursor-pointer hover:bg-blue-600 dark:hover:bg-yellow-600 hover:text-white text-gray-900 dark:text-gray-100  tracking-widest transition-all duration-200 py-1 pr-6 pl-3'>
                 <Link href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}

themes/heo/components/MenuListSide.js

@@ -48,7 +48,7 @@ export const MenuListSide = props => {
   }
 
   return (
-    <nav className='flex-col space-y-2'>
+    <nav className='flex-col space-y-1'>
       {links?.map((link, index) => (
         <MenuItemCollapse key={index} link={link} />
       ))}

themes/heo/components/NavBar.js

@@ -1,170 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import Logo from './Logo'
-import throttle from 'lodash.throttle'
-import RandomPostButton from './RandomPostButton'
-import SearchButton from './SearchButton'
-import DarkModeButton from './DarkModeButton'
-import SlideOver from './SlideOver'
-import ReadingProgress from './ReadingProgress'
-import { MenuListTop } from './MenuListTop'
-import { isBrowser } from '@/lib/utils'
-import { siteConfig } from '@/lib/config'
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const NavBar = props => {
-  const [fixedNav, setFixedNav] = useState(false)
-  const [textWhite, setTextWhite] = useState(false)
-  const [navBgWhite, setBgWhite] = useState(false)
-
-  const [activeIndex, setActiveIndex] = useState(0)
-
-  const slideOverRef = useRef()
-
-  const toggleMenuOpen = () => {
-    slideOverRef?.current?.toggleSlideOvers()
-  }
-
-  /**
-       * 根据滚动条，切换导航栏样式
-       */
-  const scrollTrigger = useCallback(throttle(() => {
-    const scrollS = window.scrollY
-    // 导航栏设置 白色背景
-    if (scrollS <= 0) {
-      setFixedNav(false)
-      setBgWhite(false)
-
-      // 文章详情页特殊处理
-      if (document.querySelector('#post-bg')) {
-        setFixedNav(true)
-        setTextWhite(true)
-        setBgWhite(false)
-      }
-    } else {
-      // 向下滚动后的导航样式
-      setFixedNav(true)
-      setTextWhite(false)
-      setBgWhite(true)
-    }
-  }, 200))
-
-  // 监听滚动
-  useEffect(() => {
-    scrollTrigger()
-    window.addEventListener('scroll', scrollTrigger)
-    return () => {
-      window.removeEventListener('scroll', scrollTrigger)
-    }
-  }, [])
-
-  // 监听导航栏显示文字
-  useEffect(() => {
-    let prevScrollY = 0
-    let ticking = false
-
-    const handleScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          const currentScrollY = window.scrollY
-
-          if (currentScrollY > prevScrollY) {
-            setActiveIndex(1) // 向下滚动时设置activeIndex为1
-          } else {
-            setActiveIndex(0) // 向上滚动时设置activeIndex为0
-          }
-
-          prevScrollY = currentScrollY
-          ticking = false
-        })
-
-        ticking = true
-      }
-    }
-
-    if (isBrowser) {
-      window.addEventListener('scroll', handleScroll)
-    }
-
-    return () => {
-      if (isBrowser) {
-        window.removeEventListener('scroll', handleScroll)
-      }
-    }
-  }, [])
-
-  return (<>
-        <style jsx>{`
-            @keyframes fade-in-down {
-                0% {
-                opacity: 0.5;
-                transform: translateY(-30%);
-                }
-                100% {
-                opacity: 1;
-                transform: translateY(0);
-                }
-            }
-            
-            @keyframes fade-in-up {
-                0% {
-                opacity: 0.5;
-                transform: translateY(30%);
-                }
-                100% {
-                opacity: 1;
-                transform: translateY(0);
-                }
-            }
-            
-            .fade-in-down {
-                animation: fade-in-down 0.3s ease-in-out;
-            }
-            
-            .fade-in-up {
-                animation: fade-in-up 0.3s ease-in-out;
-            }
-        `}</style>
-
-        {/* 顶部导航菜单栏 */}
-        <nav id='nav' className={`z-20 h-16 top-0 w-full
-            ${fixedNav ? 'fixed' : 'relative bg-transparent'} 
-            ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  
-            ${navBgWhite ? 'bg-white dark:bg-[#18171d]' : 'bg-transparent'}`}>
-
-            <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
-                {/* 左侧logo */}
-                <div className='flex'>
-                    <Logo {...props} />
-                </div>
-
-                {/* 中间菜单 */}
-                <div id='nav-bar-swipe' className={`hidden lg:flex flex-grow flex-col items-center justify-center h-full relative w-full ${activeIndex === 0 ? 'fade-in-down' : 'fade-in-up'}`}>
-                    {activeIndex === 0 && <MenuListTop {...props} />}
-                    {activeIndex === 1 && <h1 className='font-bold text-center text-light-400 dark:text-gray-400'>{siteConfig('AUTHOR') || siteConfig('TITLE')} {siteConfig('BIO') && <>|</>} {siteConfig('BIO')}</h1>}
-                </div>
-
-                {/* 右侧固定 */}
-                <div className='flex flex-shrink-0 justify-center items-center'>
-                    <RandomPostButton {...props} />
-                    <SearchButton {...props}/>
-                    {!JSON.parse(siteConfig('THEME_SWITCH')) && <div className='hidden md:block'><DarkModeButton {...props} /></div>}
-                    <ReadingProgress />
-
-                    {/* 移动端菜单按钮 */}
-                    <div onClick={toggleMenuOpen} className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
-                        <i className='fas fa-bars' />
-                    </div>
-                </div>
-
-                {/* 右边侧拉抽屉 */}
-                <SlideOver cRef={slideOverRef} {...props} />
-            </div>
-        </nav>
-    </>)
-}
-
-export default NavBar

themes/heo/components/NoticeBar.js

@@ -1,14 +1,15 @@
-
 import { ArrowRightCircle } from '@/components/HeroIcons'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import Swipe from './Swipe'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 通知横幅
  */
 export function NoticeBar() {
   let notices = siteConfig('HEO_NOTICE_BAR', null, CONFIG)
+  const { locale } = useGlobal()
   if (typeof notices === 'string') {
     notices = JSON.parse(notices)
   }
@@ -17,14 +18,16 @@ export function NoticeBar() {
   }
 
   return (
-        <div className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-            <div className="animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
-                <span className='whitespace-nowrap'>此刻</span>
-                <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
-                    <Swipe items={notices} />
-                </div>
-                <div><ArrowRightCircle className={'w-5 h-5'} /></div>
-            </div>
+    <div className='max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold'>
+      <div className='animate__animated animate__fadeIn animate__fast group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5'>
+        <span className='whitespace-nowrap'>{locale.COMMON.NOW}</span>
+        <div className='w-full h-full hover:text-indigo-600 dark:hover:text-yellow-600 flex justify-center items-center'>
+          <Swipe items={notices} />
         </div>
+        <div>
+          <ArrowRightCircle className={'w-5 h-5'} />
+        </div>
+      </div>
+    </div>
   )
 }

themes/heo/components/PaginationNumber.js

@@ -21,6 +21,7 @@ const PaginationNumber = ({ page, totalPage }) => {
     .split('?')[0]
     .replace(/\/page\/[1-9]\d*/, '')
     .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   const [value, setValue] = useState('')
@@ -44,7 +45,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <>
       {/* pc端分页按钮 */}
-      <div className="hidden lg:flex justify-between items-end mt-10 mb-5 font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2 overflow-x-auto">
+      <div className='hidden lg:flex justify-between items-end mt-10 font-medium text-black duration-500 dark:text-gray-300 pt-3 space-x-2 overflow-x-auto'>
         {/* 上一页 */}
         <Link
           href={{
@@ -54,32 +55,29 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'}`}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
-            <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
+          rel='prev'
+          className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4' />
+            <div className='absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0'>
               {locale.PAGINATION.PREV}
             </div>
           </div>
         </Link>
 
         {/* 分页 */}
-        <div className="flex items-center space-x-2">
+        <div className='flex items-center space-x-2'>
           {pages}
 
           {/* 跳转页码 */}
-          <div className="bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200">
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border dark:border-gray-600 flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
             <input
               value={value}
-              className="w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg"
-              onInput={handleInputChange}
-            ></input>
+              className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg'
+              onInput={handleInputChange}></input>
             <div
               onClick={jumpToPage}
-              className="cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white"
-            >
+              className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
               <ChevronDoubleRight className={'w-4 h-4'} />
             </div>
           </div>
@@ -91,12 +89,11 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} `}
-        >
-          <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
-            <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
-            <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
+          rel='next'
+          className={`${+showNext ? 'block' : 'invisible'} `}>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 rounded-lg cursor-pointer group'>
+            <i className='fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6' />
+            <div className='absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2'>
               {locale.PAGINATION.NEXT}
             </div>
           </div>
@@ -105,7 +102,7 @@ const PaginationNumber = ({ page, totalPage }) => {
 
       {/* 移动端分页 */}
 
-      <div className="lg:hidden w-full flex flex-row">
+      <div className='lg:hidden w-full flex flex-row'>
         {/* 上一页 */}
         <Link
           href={{
@@ -115,13 +112,12 @@ const PaginationNumber = ({ page, totalPage }) => {
                 : `${pagePrefix}/page/${currentPage - 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="prev"
-          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='prev'
+          className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.PREV}
         </Link>
 
-        {showPrev && showNext && <div className="w-12"></div>}
+        {showPrev && showNext && <div className='w-12'></div>}
 
         {/* 下一页 */}
         <Link
@@ -129,9 +125,8 @@ const PaginationNumber = ({ page, totalPage }) => {
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}
-        >
+          rel='next'
+          className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
           {locale.PAGINATION.NEXT}
         </Link>
       </div>
@@ -161,8 +156,7 @@ function getPageElement(page, currentPage, pagePrefix) {
           ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
           : 'dark:bg-[#1e1e1e] bg-white') +
         ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
-      }
-    >
+      }>
       {page}
     </Link>
   )
@@ -195,7 +189,7 @@ function generatePages(pagePrefix, page, currentPage, totalPage) {
     }
     if (startPage > 2) {
       pages.push(
-        <div key={-1} className="-mt-2 mx-1">
+        <div key={-1} className='-mt-2 mx-1'>
           ...{' '}
         </div>
       )

themes/heo/components/PostAdjacent.js

@@ -0,0 +1,101 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function PostAdjacent({ prev, next }) {
+  const [isShow, setIsShow] = useState(false)
+  const router = useRouter()
+  const { locale } = useGlobal()
+
+  useEffect(() => {
+    setIsShow(false)
+  }, [router])
+
+  useEffect(() => {
+    // 文章到底部时显示下一篇文章推荐
+    const articleEnd = document.getElementById('article-end')
+    const footerBottom = document.getElementById('footer-bottom')
+
+    const handleIntersect = entries => {
+      entries.forEach(entry => {
+        if (entry.target === articleEnd) {
+          if (entry.isIntersecting) {
+            setIsShow(true)
+          }
+        } else if (entry.target === footerBottom) {
+          if (entry.isIntersecting) {
+            setIsShow(false)
+          }
+        }
+      })
+    }
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+
+    const observer = new IntersectionObserver(handleIntersect, options)
+    if (articleEnd) observer.observe(articleEnd)
+    if (footerBottom) observer.observe(footerBottom)
+
+    return () => {
+      if (articleEnd) observer.unobserve(articleEnd)
+      if (footerBottom) observer.unobserve(footerBottom)
+      observer.disconnect()
+    }
+  }, [])
+
+  if (!prev || !next || !siteConfig('HEO_ARTICLE_ADJACENT', null, CONFIG)) {
+    return <></>
+  }
+
+  return (
+    <div id='article-end'>
+      {/* 移动端 */}
+      <section className='lg:hidden pt-8 text-gray-800 items-center text-xs md:text-sm flex flex-col m-1 '>
+        <Link
+          href={`/${prev.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-t-xl dark:bg-[#1e1e1e] border dark:border-gray-600 border-b-0 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>上一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {prev.title}
+          </div>
+        </Link>
+        <Link
+          href={`/${next.slug}`}
+          passHref
+          className='cursor-pointer justify-between space-y-1 px-5 py-6 rounded-b-xl dark:bg-[#1e1e1e] border dark:border-gray-600 items-center dark:text-white flex flex-col w-full h-18 duration-200'>
+          <div className='flex justify-start items-center w-full'>下一篇</div>
+          <div className='flex justify-center items-center text-lg font-bold'>
+            {next.title}
+          </div>
+        </Link>
+      </section>
+
+      {/* 桌面端 */}
+
+      <div
+        id='pc-next-post'
+        className={`${isShow ? 'mb-5 opacity-100' : '-mb-24 opacity-0'} hidden md:block fixed z-40 right-10 bottom-4 duration-200 transition-all`}>
+        <Link
+          href={`/${next.slug}`}
+          className='text-sm block p-4 w-72 h-28 cursor-pointer drop-shadow-xl duration transition-all dark:bg-[#1e1e1e] border dark:border-gray-600 bg-white dark:text-gray-300 dark:hover:text-yellow-600 hover:font-bold hover:text-blue-600 rounded-lg'>
+          <div className='font-semibold'>{locale.COMMON.NEXT_POST}</div>
+          <hr className='mt-2 mb-3' />
+          <div className='line-clamp-2'>{next?.title}</div>
+        </Link>
+      </div>
+    </div>
+  )
+}

themes/heo/components/PostCopyright.js

@@ -1,11 +1,15 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
-export default function ArticleCopyright () {
+/**
+ * 版权声明
+ * @returns
+ */
+export default function PostCopyright() {
   const router = useRouter()
   const [path, setPath] = useState(siteConfig('LINK') + router.asPath)
   useEffect(() => {
@@ -19,17 +23,19 @@ export default function ArticleCopyright () {
   }
 
   return (
-    <section className="dark:text-gray-300 mt-6 mx-1 ">
-      <ul className="overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500">
+    <section className='dark:text-gray-300 mt-6 mx-1 '>
+      <ul className='overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-indigo-500'>
         <li>
           <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
-          <Link href={'/about'} className="hover:underline">
+          <Link href={'/about'} className='hover:underline'>
             {siteConfig('AUTHOR')}
           </Link>
         </li>
         <li>
-        <strong className='mr-2'>{locale.COMMON.URL}:</strong>
-          <a className="whitespace-normal break-words hover:underline" href={path}>
+          <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+          <a
+            className='whitespace-normal break-words hover:underline'
+            href={path}>
             {path}
           </a>
         </li>

themes/heo/components/PostHeader.js

@@ -1,105 +1,142 @@
-import Link from 'next/link'
-import { siteConfig } from '@/lib/config'
-import NotionIcon from '@/components/NotionIcon'
-import WavesArea from './WavesArea'
 import { HashTag } from '@/components/HeroIcons'
-import WordCount from '@/components/WordCount'
 import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import WordCount from '@/components/WordCount'
+import { siteConfig } from '@/lib/config'
 import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import WavesArea from './WavesArea'
 
-export default function PostHeader({ post, siteInfo }) {
+/**
+ * 文章页头
+ * @param {*} param0
+ * @returns
+ */
+export default function PostHeader({ post, siteInfo, isDarkMode }) {
   if (!post) {
     return <></>
   }
   // 文章头图
   const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
-
+  const ANALYTICS_BUSUANZI_ENABLE = siteConfig('ANALYTICS_BUSUANZI_ENABLE')
   return (
-        <div id='post-bg' className="w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10 mb-5">
-            <style jsx>{` 
-                .coverdiv:after {
-                    position: absolute;
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    box-shadow: 110px -130px 300px 60px #0060e0 inset;
-                }
-            `}</style>
+    <div
+      id='post-bg'
+      className='md:mb-0 -mb-5 w-full h-[30rem] relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat z-10'>
+      <style jsx>{`
+        .coverdiv:after {
+          position: absolute;
+          content: '';
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          box-shadow: 110px -130px 500px 100px ${isDarkMode
+              ? '#CA8A04'
+              : '#0060e0'} inset;
+        }
+      `}</style>
 
-            <div style={{ backdropFilter: 'blur(15px)' }} className={'bg-[#0060e0] absolute top-0 w-full h-full py-10 flex justify-center items-center'}>
-
-                {/* 文章背景图 */}
-                <div id='post-cover-wrapper' style={{ filter: 'blur(15px)' }} className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
-                    <LazyImage id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
-                </div>
-
-                {/* 文章文字描述 */}
-                <div id='post-info' className='absolute top-48 z-10 flex flex-col space-y-4 lg:-mt-12 w-full max-w-[86rem] px-5'>
-                    {/* 分类+标签 */}
-                    <div className='flex justify-center md:justify-start items-center'>
-                        {post.category && <>
-                            <Link href={`/category/${post.category}`} className='mr-4' passHref legacyBehavior>
-                                <div className="cursor-pointer font-sm font-bold px-3 py-1 rounded-lg bg-blue-500 hover:bg-white text-white hover:text-blue-500 duration-200 ">
-                                    {post.category}
-                                </div>
-                            </Link>
-                        </>}
-
-                        {post.tagItems && (
-                            <div className="hidden md:flex justify-center flex-nowrap overflow-x-auto">
-                                {post.tagItems.map((tag, index) => (
-                                    <Link
-                                        key={index}
-                                        href={`/tag/${encodeURIComponent(tag.name)}`}
-                                        passHref
-                                        className={'cursor-pointer inline-block text-gray-50 hover:text-white duration-200 py-0.5 px-1 whitespace-nowrap '}>
-                                        <div className='font-light flex items-center'><HashTag className='text-gray-200 stroke-2 mr-0.5 w-3 h-3' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-
-                                    </Link>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-
-                    {/* 文章Title */}
-                    <div className="max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white">
-                        {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}{post.title}
-                    </div>
-
-                    {/* 标题底部补充信息 */}
-                    <section className="flex-wrap shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white dark:text-gray-400 font-light leading-8">
-
-                        <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
-                            <div className='mr-2'><WordCount /></div>
-                            {post?.type !== 'Page' && (
-                                <>
-                                    <Link
-                                        href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
-                                        passHref
-                                        className="pl-1 mr-2 cursor-pointer hover:underline">
-                                        <i className="fa-regular fa-calendar"></i> {post?.publishDay}
-                                    </Link>
-                                </>
-                            )}
-
-                            <div className="pl-1 mr-2">
-                              <i className="fa-regular fa-calendar-check"></i> {post.lastEditedDay}
-                            </div>
-
-                        </div>
-
-                        {JSON.parse(siteConfig('ANALYTICS_BUSUANZI_ENABLE')) && <div className="busuanzi_container_page_pv font-light mr-2">
-                            <i className="fa-solid fa-fire-flame-curved"></i> <span className="mr-2 busuanzi_value_page_pv" />
-                        </div>}
-                    </section>
-
-                </div>
-
-                <WavesArea />
-
-            </div>
+      <div
+        className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
+        {/* 文章背景图 */}
+        <div
+          id='post-cover-wrapper'
+          style={{
+            filter: 'blur(15px)'
+          }}
+          className='coverdiv lg:opacity-50 lg:translate-x-96 lg:rotate-12'>
+          <LazyImage
+            id='post-cover'
+            className='w-full h-full object-cover max-h-[50rem] min-w-[50vw] min-h-[20rem]'
+            src={headerImage}
+          />
         </div>
+
+        {/* 文章文字描述 */}
+        <div
+          id='post-info'
+          className='absolute top-48 z-10 flex flex-col space-y-4 lg:-mt-12 w-full max-w-[86rem] px-5'>
+          {/* 分类+标签 */}
+          <div className='flex justify-center md:justify-start items-center gap-4'>
+            {post.category && (
+              <>
+                <Link
+                  href={`/category/${post.category}`}
+                  className='mr-4'
+                  passHref
+                  legacyBehavior>
+                  <div className='cursor-pointer font-sm font-bold px-3 py-1 rounded-lg  hover:bg-white text-white bg-blue-500 dark:bg-yellow-500 hover:text-blue-500 duration-200 '>
+                    {post.category}
+                  </div>
+                </Link>
+              </>
+            )}
+
+            {post.tagItems && (
+              <div className='hidden md:flex justify-center flex-nowrap overflow-x-auto'>
+                {post.tagItems.map((tag, index) => (
+                  <Link
+                    key={index}
+                    href={`/tag/${encodeURIComponent(tag.name)}`}
+                    passHref
+                    className={
+                      'cursor-pointer inline-block text-gray-50 hover:text-white duration-200 py-0.5 px-1 whitespace-nowrap '
+                    }>
+                    <div className='font-light flex items-center'>
+                      <HashTag className='text-gray-200 stroke-2 mr-0.5 w-3 h-3' />{' '}
+                      {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 文章Title */}
+          <div className='max-w-5xl font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </div>
+
+          {/* 标题底部补充信息 */}
+          <section className='flex-wrap dark:text-gray-200 text-opacity-70 shadow-text-md flex text-sm  justify-center md:justify-start mt-4 text-white font-light leading-8'>
+            <div className='flex justify-center '>
+              <div className='mr-2'>
+                <WordCount />
+              </div>
+              {post?.type !== 'Page' && (
+                <>
+                  <Link
+                    href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
+                    passHref
+                    className='pl-1 mr-2 cursor-pointer hover:underline'>
+                    <i className='fa-regular fa-calendar'></i>{' '}
+                    {post?.publishDay}
+                  </Link>
+                </>
+              )}
+
+              <div className='pl-1 mr-2'>
+                <i className='fa-regular fa-calendar-check'></i>{' '}
+                {post.lastEditedDay}
+              </div>
+            </div>
+
+            {/* 阅读统计 */}
+            {ANALYTICS_BUSUANZI_ENABLE && (
+              <div className='busuanzi_container_page_pv font-light mr-2'>
+                <i className='fa-solid fa-fire-flame-curved'></i>{' '}
+                <span className='mr-2 busuanzi_value_page_pv' />
+              </div>
+            )}
+          </section>
+        </div>
+
+        <WavesArea />
+      </div>
+    </div>
   )
 }

themes/heo/components/PostLock.js

@@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
  * @param validPassword(bool) 回调函数，校验正确回调入参为true
  * @returns
  */
-export const ArticleLock = props => {
+export const PostLock = props => {
   const { validPassword } = props
   const { locale } = useGlobal()
   const submitPassword = () => {
@@ -27,25 +27,35 @@ export const ArticleLock = props => {
     passwordInputRef.current.focus()
   }, [])
 
-  return <div id='container' className='w-full flex justify-center items-center h-96 '>
-    <div className='text-center space-y-3'>
-      <div className='font-bold dark:text-gray-300 text-black'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
-      <div className='flex mx-4'>
-        <input id="password" type='password'
-            onKeyDown={(e) => {
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold dark:text-gray-300 text-black'>
+          {locale.COMMON.ARTICLE_LOCK_TIPS}
+        </div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
               if (e.key === 'Enter') {
                 submitPassword()
               }
             }}
             ref={passwordInputRef} // 绑定ref到passwordInputRef变量
-            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500'>
-        </input>
-        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
-          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg  font-light leading-10 bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
         </div>
-      </div>
-      <div id='tips'>
+        <div id='tips'></div>
       </div>
     </div>
-  </div>
+  )
 }

themes/heo/components/PostRecommend.js

@@ -9,7 +9,7 @@ import CONFIG from '../config'
  * @param {prev,next} param0
  * @returns
  */
-export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+export default function PostRecommend({ recommendPosts, siteInfo }) {
   const { locale } = useGlobal()
 
   if (
@@ -55,6 +55,10 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                   src={headerImage}
                   className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200'
                 />
+                {/* 卡片的阴影遮罩，为了凸显图片上的文字 */}
+                <div className='h-3/4 w-full absolute left-0 bottom-0'>
+                  <div className='h-full w-full absolute opacity-80 group-hover:opacity-100 transition-all duration-1000 bg-gradient-to-b from-transparent to-black'></div>
+                </div>
               </div>
             </Link>
           )

themes/heo/components/SideRight.js

@@ -1,12 +1,12 @@
+import Live2D from '@/components/Live2D'
+import dynamic from 'next/dynamic'
+import { AnalyticsCard } from './AnalyticsCard'
 import Card from './Card'
-import TagGroups from './TagGroups'
 import Catalog from './Catalog'
 import { InfoCard } from './InfoCard'
-import dynamic from 'next/dynamic'
-import Live2D from '@/components/Live2D'
-import { AnalyticsCard } from './AnalyticsCard'
-import TouchMeCard from './TouchMeCard'
 import LatestPostsGroupMini from './LatestPostsGroupMini'
+import TagGroups from './TagGroups'
+import TouchMeCard from './TouchMeCard'
 
 const FaceBookPage = dynamic(
   () => {
@@ -27,46 +27,49 @@ const FaceBookPage = dynamic(
  * @returns
  */
 export default function SideRight(props) {
-  const {
-    post, tagOptions,
-    currentTag, rightAreaSlot
-  } = props
+  const { post, tagOptions, currentTag, rightAreaSlot } = props
+
+  // 只摘取标签的前60个，防止右侧过长
+  const sortedTags = tagOptions?.slice(0, 60) || []
 
   return (
-        <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+    <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+      <InfoCard {...props} className='w-72' />
 
-            <InfoCard {...props} className='w-72' />
+      <div className='sticky top-20 space-y-4'>
+        {/* 文章页显示目录 */}
+        {post && post.toc && post.toc.length > 0 && (
+          <Card className='bg-white dark:bg-[#1e1e1e]'>
+            <Catalog toc={post.toc} />
+          </Card>
+        )}
 
-            <div className='sticky top-20 space-y-4'>
-
-                {/* 文章页显示目录 */}
-                {post && post.toc && post.toc.length > 0 && (
-                    <Card className='bg-white dark:bg-[#1e1e1e]'>
-                        <Catalog toc={post.toc} />
-                    </Card>
-                )}
-
-                {/* 联系交流群 */}
-                <TouchMeCard />
-
-                {/* 最新文章列表 */}
-                <div className={'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
-                    <LatestPostsGroupMini {...props} />
-                </div>
-
-                {rightAreaSlot}
-
-                <FaceBookPage />
-                <Live2D />
-
-                {/* 标签和成绩 */}
-                <Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
-                    <TagGroups tags={tagOptions} currentTag={currentTag} />
-                    <hr className='mx-1 flex border-dashed relative my-4' />
-                    <AnalyticsCard {...props} />
-                </Card>
-            </div>
+        {/* 联系交流群 */}
+        <TouchMeCard />
 
+        {/* 最新文章列表 */}
+        <div
+          className={
+            'border hover:border-indigo-600  dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
+          }>
+          <LatestPostsGroupMini {...props} />
         </div>
+
+        {rightAreaSlot}
+
+        <FaceBookPage />
+        <Live2D />
+
+        {/* 标签和成绩 */}
+        <Card
+          className={
+            'bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600  dark:hover:border-yellow-600 duration-200'
+          }>
+          <TagGroups tags={sortedTags} currentTag={currentTag} />
+          <hr className='mx-1 flex border-dashed relative my-4' />
+          <AnalyticsCard {...props} />
+        </Card>
+      </div>
+    </div>
   )
 }

themes/heo/components/SlideOver.js

@@ -1,10 +1,17 @@
-
-import { Fragment, useImperativeHandle, useRef, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
 import DarkModeButton from '@/components/DarkModeButton'
+import { useGlobal } from '@/lib/global'
+import { Dialog, Transition } from '@headlessui/react'
 import Link from 'next/link'
-import TagGroups from './TagGroups'
+import { useRouter } from 'next/router'
+import {
+  Fragment,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
 import { MenuListSide } from './MenuListSide'
+import TagGroups from './TagGroups'
 
 /**
  * 侧边抽屉
@@ -13,101 +20,105 @@ import { MenuListSide } from './MenuListSide'
 export default function SlideOver(props) {
   const { cRef, tagOptions } = props
   const [open, setOpen] = useState(false)
-
+  const { locale } = useGlobal()
+  const router = useRouter()
   /**
-                    * 函数组件暴露方法useImperativeHandle
-                    */
+   * 函数组件暴露方法useImperativeHandle
+   **/
   useImperativeHandle(cRef, () => ({
     toggleSlideOvers: toggleSlideOvers
   }))
 
+  /**
+   * 开关侧拉抽屉
+   */
   const toggleSlideOvers = () => {
     setOpen(!open)
   }
 
+  /**
+   * 自动关闭抽屉
+   */
+  useEffect(() => {
+    setOpen(false)
+  }, [router])
+
   return (
-        <Transition.Root show={open} as={Fragment}>
-            <Dialog as="div" className="relative z-20" onClose={setOpen}>
-                <Transition.Child
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-20' onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-in-out duration-500'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in-out duration-500'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'>
+          <div className='fixed inset-0 glassmorphism bg-black bg-opacity-30 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 overflow-hidden'>
+          <div className='absolute inset-0 overflow-hidden'>
+            <div className='pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10'>
+              <Transition.Child
+                as={Fragment}
+                enter='transform transition ease-in-out duration-500 sm:duration-700'
+                enterFrom='translate-x-full'
+                enterTo='translate-x-0'
+                leave='transform transition ease-in-out duration-500 sm:duration-700'
+                leaveFrom='translate-x-0'
+                leaveTo='translate-x-full'>
+                <Dialog.Panel className='pointer-events-auto relative w-96 max-w-md'>
+                  <Transition.Child
                     as={Fragment}
-                    enter="ease-in-out duration-500"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="ease-in-out duration-500"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                >
-                    <div className="fixed inset-0 glassmorphism bg-black bg-opacity-30 transition-opacity" />
-                </Transition.Child>
-
-                <div className="fixed inset-0 overflow-hidden">
-                    <div className="absolute inset-0 overflow-hidden">
-                        <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="transform transition ease-in-out duration-500 sm:duration-700"
-                                enterFrom="translate-x-full"
-                                enterTo="translate-x-0"
-                                leave="transform transition ease-in-out duration-500 sm:duration-700"
-                                leaveFrom="translate-x-0"
-                                leaveTo="translate-x-full"
-                            >
-                                <Dialog.Panel className="pointer-events-auto relative w-96 max-w-md">
-                                    <Transition.Child
-                                        as={Fragment}
-                                        enter="ease-in-out duration-500"
-                                        enterFrom="opacity-0"
-                                        enterTo="opacity-100"
-                                        leave="ease-in-out duration-500"
-                                        leaveFrom="opacity-100"
-                                        leaveTo="opacity-0"
-                                    >
-                                        <div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4">
-                                            <button
-                                                type="button"
-                                                className="rounded-md text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
-                                                onClick={() => setOpen(false)}
-                                            >
-                                                <span className="sr-only">Close panel</span>
-                                                <i className="fa-solid fa-xmark px-2"></i>
-                                            </button>
-                                        </div>
-                                    </Transition.Child>
-                                    {/* 内容 */}
-                                    <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-[#18171d] py-6 shadow-xl">
-                                        <div className="relative mt-6 flex-1 flex-col space-y-3 px-4 sm:px-6 dark:text-white ">
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>功能</div>
-                                                {/* 切换深色模式 */}
-                                                <DarkModeBlockButton />
-                                            </section>
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>博客</div>
-                                                {/* 导航按钮 */}
-                                                <div className='gap-2 grid grid-cols-2'>
-                                                    <Button title={'主页'} url={'/'} />
-                                                    <Button title={'关于'} url={'/about'} />
-                                                </div>
-                                                {/* 用户自定义菜单 */}
-                                                <MenuListSide {...props}/>
-                                            </section>
-
-                                            <section className='space-y-2 flex flex-col'>
-                                                <div>标签</div>
-                                                <TagGroups tags={tagOptions} />
-                                            </section>
-
-                                        </div>
-                                    </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
+                    enter='ease-in-out duration-500'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in-out duration-500'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'>
+                    <div className='absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4'>
+                      <button
+                        type='button'
+                        className='rounded-md text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-white'
+                        onClick={() => setOpen(false)}>
+                        <span className='sr-only'>Close panel</span>
+                        <i className='fa-solid fa-xmark px-2'></i>
+                      </button>
                     </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
+                  </Transition.Child>
+                  {/* 内容 */}
+                  <div className='flex h-full flex-col overflow-y-scroll bg-white dark:bg-[#18171d] py-6 shadow-xl'>
+                    <div className='relative mt-6 flex-1 flex-col space-y-3 px-4 sm:px-6 dark:text-white '>
+                      <section className='space-y-2 flex flex-col'>
+                        {/* 切换深色模式 */}
+                        <DarkModeBlockButton />
+                      </section>
+
+                      <section className='space-y-2 flex flex-col'>
+                        <div>{locale.COMMON.BLOG}</div>
+                        {/* 导航按钮 */}
+                        <div className='gap-2 grid grid-cols-2'>
+                          <Button title={'主页'} url={'/'} />
+                          <Button title={'关于'} url={'/about'} />
+                        </div>
+                        {/* 用户自定义菜单 */}
+                        <MenuListSide {...props} />
+                      </section>
+
+                      <section className='space-y-2 flex flex-col'>
+                        <div>{locale.COMMON.TAGS}</div>
+                        <TagGroups tags={tagOptions} />
+                      </section>
+                    </div>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
   )
 }
 
@@ -116,19 +127,34 @@ export default function SlideOver(props) {
  */
 function DarkModeBlockButton() {
   const darkModeRef = useRef()
+  const { isDarkMode, locale } = useGlobal()
+
   function handleChangeDarkMode() {
     darkModeRef?.current?.handleChangeDarkMode()
   }
-  return <button onClick={handleChangeDarkMode} className={'group duration-200 hover:text-white hover:shadow-md hover:bg-blue-600 flex justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white dark:bg-[#ff953e]  rounded-lg'}>
-        <DarkModeButton cRef={darkModeRef} className='group-hover:text-white' /> 显示模式
+  return (
+    <button
+      onClick={handleChangeDarkMode}
+      className={
+        'group duration-200 hover:text-white hover:shadow-md hover:bg-blue-600 flex justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white dark:bg-[#ff953e]  rounded-lg'
+      }>
+      <DarkModeButton cRef={darkModeRef} className='group-hover:text-white' />{' '}
+      {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}
     </button>
+  )
 }
 
 /**
  * 一个简单的按钮
  */
 function Button({ title, url }) {
-  return <Link href={url} className={'duration-200 hover:text-white hover:shadow-md flex cursor-pointer justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white hover:bg-blue-600 dark:bg-[#1e1e1e] rounded-lg'}>
-        {title}
+  return (
+    <Link
+      href={url}
+      className={
+        'duration-200 hover:text-white hover:shadow-md flex cursor-pointer justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white hover:bg-blue-600 dark:bg-[#1e1e1e] rounded-lg'
+      }>
+      {title}
     </Link>
+  )
 }

themes/heo/components/SocialButton.js

@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton

themes/heo/components/Swipe.js

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react'
 export function Swipe({ items }) {
   const [activeIndex, setActiveIndex] = useState(0)
 
-  const handleClick = (item) => {
+  const handleClick = item => {
     if (isBrowser) {
       window.open(item?.url)
     }
@@ -24,50 +24,53 @@ export function Swipe({ items }) {
   }, [activeIndex, items.length])
 
   return (
-        <div className="h-full relative w-full overflow-hidden">
-            {items.map((item, index) => (
-                <div
-                    onClick={() => handleClick(item)}
-                    key={index}
-                    className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${index === activeIndex ? 'translate-y-0 slide-in' : 'translate-y-full slide-out'
-                        }`}
-                >
-                    {item.title}
-                </div>
-            ))}
-            <style jsx>{`
-            .slide-in {
-                animation-name: slide-in;
-                animation-duration: 0.5s;
-                animation-fill-mode: forwards;
-            }
-            
-            .slide-out {
-                animation-name: slide-out;
-                animation-duration: 0.5s;
-                animation-fill-mode: forwards;
-            }
-            
-            @keyframes slide-in {
-                from {
-                transform: translateY(100%);
-                }
-                to {
-                transform: translateY(0);
-                }
-            }
-            
-            @keyframes slide-out {
-                from {
-                transform: translateY(0);
-                }
-                to {
-                transform: translateY(-100%);
-                }
-            }
-      `}</style>
+    <div className='h-full relative w-full overflow-hidden'>
+      {items.map((item, index) => (
+        <div
+          onClick={() => handleClick(item)}
+          key={index}
+          className={`whitespace-nowrap absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${
+            index === activeIndex
+              ? 'translate-y-0 slide-in'
+              : 'translate-y-full slide-out'
+          }`}>
+          {item.title}
         </div>
+      ))}
+
+      <style jsx>{`
+        .slide-in {
+          animation-name: slide-in;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        .slide-out {
+          animation-name: slide-out;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes slide-in {
+          from {
+            transform: translateY(100%);
+          }
+          to {
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slide-out {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(-100%);
+          }
+        }
+      `}</style>
+    </div>
   )
-};
+}
 
 export default Swipe

themes/heo/components/TagItemMini.js

@@ -7,8 +7,13 @@ const TagItemMini = ({ tag, selected = false }) => {
       key={tag}
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
-      className={'cursor-pointer inline-block hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 px-2 py-1 rounded-2xl dark:text-white duration-200 text-sm whitespace-nowrap ' }>
-      <div className='font-light flex items-center'><HashTag className='text-gray-500 stroke-2 mr-0.5 w-3 h-3'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+      className={
+        'cursor-pointer inline-block hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 px-2 py-1 rounded-2xl dark:text-white duration-200 text-sm whitespace-nowrap '
+      }>
+      <div className='font-light flex items-center'>
+        <HashTag className='stroke-2 mr-0.5 w-3 h-3' />{' '}
+        {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+      </div>
     </Link>
   )
 }

themes/heo/components/WavesArea.js

@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { useEffect, useState } from 'react'
 
 /**
  * 文章波浪动画
@@ -6,60 +7,96 @@ import { useGlobal } from '@/lib/global'
 export default function WavesArea() {
   const { isDarkMode } = useGlobal()
   const color = isDarkMode ? '#18171d' : '#f7f9fe'
+  const [showWave, setShowWave] = useState(true)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 800) {
+        setShowWave(false)
+      } else {
+        setShowWave(true)
+      }
+    }
+
+    // Initial check
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  if (!showWave) {
+    return null
+  }
 
   return (
-        <section className="main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0">
-            <svg className="waves-svg w-full h-[60px]" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
-                <defs>
-                    <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
-                </defs>
-                <g className="parallax">
-                    <use href="#gentle-wave" x="48" y="0"></use>
-                    <use href="#gentle-wave" x="48" y="3"></use>
-                    <use href="#gentle-wave" x="48" y="5"></use>
-                    <use href="#gentle-wave" x="48" y="7"></use>
-                </g>
-            </svg>
-            <style jsx global>{`
-                /* Animation */
+    <section className='main-hero-waves-area waves-area w-full absolute left-0 z-10 bottom-0'>
+      <svg
+        className='waves-svg w-full h-[60px]'
+        xmlns='http://www.w3.org/2000/svg'
+        xlink='http://www.w3.org/1999/xlink'
+        viewBox='0 24 150 28'
+        preserveAspectRatio='none'
+        shapeRendering='auto'>
+        <defs>
+          <path
+            id='gentle-wave'
+            d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z'></path>
+        </defs>
+        <g className='parallax'>
+          <use href='#gentle-wave' x='48' y='0'></use>
+          <use href='#gentle-wave' x='48' y='3'></use>
+          <use href='#gentle-wave' x='48' y='5'></use>
+          <use href='#gentle-wave' x='48' y='7'></use>
+        </g>
+      </svg>
+      <style jsx global>
+        {`
+          /* Animation */
 
-                .parallax > use {
-                  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
-                }
-                .parallax > use:nth-child(1) {
-                  animation-delay: -2s;
-                  animation-duration: 7s;
-                  fill: ${color};
-                  opacity: 0.5;
-                }
-                .parallax > use:nth-child(2) {
-                  animation-delay: -3s;
-                  animation-duration: 10s;
-                  fill: ${color};
-                  opacity: 0.6;
-                }
-                .parallax > use:nth-child(3) {
-                  animation-delay: -4s;
-                  animation-duration: 13s;
-                  fill: ${color};
-                  opacity: 0.7;
-                }
-                .parallax > use:nth-child(4) {
-                  animation-delay: -5s;
-                  animation-duration: 20s;
-                  fill: ${color};
-                }
-                
-                @keyframes move-forever {
-                  0% {
-                    transform: translate3d(-90px, 0, 0);
-                  }
-                  100% {
-                    transform: translate3d(85px, 0, 0);
-                  }
-                }
-            `}
-            </style>
-        </section>
+          .parallax > use {
+            animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5)
+              infinite;
+          }
+          .parallax > use:nth-child(1) {
+            animation-delay: -2s;
+            animation-duration: 7s;
+            fill: ${color};
+            opacity: 0.5;
+          }
+          .parallax > use:nth-child(2) {
+            animation-delay: -3s;
+            animation-duration: 10s;
+            fill: ${color};
+            opacity: 0.6;
+          }
+          .parallax > use:nth-child(3) {
+            animation-delay: -4s;
+            animation-duration: 13s;
+            fill: ${color};
+            opacity: 0.7;
+          }
+          .parallax > use:nth-child(4) {
+            animation-delay: -5s;
+            animation-duration: 20s;
+            fill: ${color};
+          }
+
+          @keyframes move-forever {
+            0% {
+              transform: translate3d(-90px, 0, 0);
+            }
+            100% {
+              transform: translate3d(85px, 0, 0);
+            }
+          }
+        `}
+      </style>
+    </section>
   )
 }

themes/heo/config.js

@@ -42,7 +42,14 @@ const CONFIG = {
     '🤖️ 数码科技爱好者',
     '🧱 团队小组发动机'
   ],
-  HEO_INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
+
+  // 个人资料底部按钮
+  HEO_INFO_CARD_URL1: '/about',
+  HEO_INFO_CARD_ICON1: 'fas fa-user',
+  HEO_INFO_CARD_URL2: 'https://github.com/tangly1024',
+  HEO_INFO_CARD_ICON2: 'fab fa-github',
+  HEO_INFO_CARD_URL3: 'https://www.tangly1024.com',
+  HEO_INFO_CARD_TEXT3: '了解更多',
 
   // 用户技能图标
   HEO_GROUP_ICONS: [

themes/heo/index.js

@@ -6,41 +6,41 @@
  *  2. 更多说明参考此[文档](https://docs.tangly1024.com/article/notionnext-heo)
  */
 
-import CONFIG from './config'
-import { useEffect, useState } from 'react'
-import Footer from './components/Footer'
-import SideRight from './components/SideRight'
-import NavBar from './components/NavBar'
+import Comment from '@/components/Comment'
+import { AdSlot } from '@/components/GoogleAdsense'
+import { HashTag } from '@/components/HeroIcons'
+import LazyImage from '@/components/LazyImage'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { loadWowJS } from '@/lib/plugins/wow'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import BlogPostArchive from './components/BlogPostArchive'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import Hero from './components/Hero'
-import { useRouter } from 'next/router'
-import SearchNav from './components/SearchNav'
-import BlogPostArchive from './components/BlogPostArchive'
-import { ArticleLock } from './components/ArticleLock'
-import PostHeader from './components/PostHeader'
-import Comment from '@/components/Comment'
-import NotionPage from '@/components/NotionPage'
-import ArticleAdjacent from './components/ArticleAdjacent'
-import ArticleCopyright from './components/ArticleCopyright'
-import ArticleRecommend from './components/ArticleRecommend'
-import ShareBar from '@/components/ShareBar'
-import Link from 'next/link'
 import CategoryBar from './components/CategoryBar'
-import { Transition } from '@headlessui/react'
-import { Style } from './style'
-import { NoticeBar } from './components/NoticeBar'
-import { HashTag } from '@/components/HeroIcons'
-import LatestPostsGroup from './components/LatestPostsGroup'
 import FloatTocButton from './components/FloatTocButton'
-import replaceSearchResult from '@/components/Mark'
-import LazyImage from '@/components/LazyImage'
-import WWAds from '@/components/WWAds'
-import { AdSlot } from '@/components/GoogleAdsense'
-import { siteConfig } from '@/lib/config'
-import { isBrowser } from '@/lib/utils'
-import { loadWowJS } from '@/lib/plugins/wow'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import Hero from './components/Hero'
+import LatestPostsGroup from './components/LatestPostsGroup'
+import { NoticeBar } from './components/NoticeBar'
+import PostAdjacent from './components/PostAdjacent'
+import PostCopyright from './components/PostCopyright'
+import PostHeader from './components/PostHeader'
+import { PostLock } from './components/PostLock'
+import PostRecommend from './components/PostRecommend'
+import SearchNav from './components/SearchNav'
+import SideRight from './components/SideRight'
+import CONFIG from './config'
+import { Style } from './style'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -49,38 +49,39 @@ import { loadWowJS } from '@/lib/plugins/wow'
  * @constructor
  */
 const LayoutBase = props => {
-  const {
-    children,
-    slotTop,
-    className
-  } = props
+  const { children, slotTop, className } = props
 
   // 全屏模式下的最大宽度
-  const { fullWidth } = useGlobal()
+  const { fullWidth, isDarkMode } = useGlobal()
   const router = useRouter()
 
   const headerSlot = (
     <header>
       {/* 顶部导航 */}
-      <NavBar {...props} />
+      <Header {...props} />
 
       {/* 通知横幅 */}
-      {router.route === '/'
-        ? <>
-            <NoticeBar />
-            <Hero {...props} />
+      {router.route === '/' ? (
+        <>
+          <NoticeBar />
+          <Hero {...props} />
         </>
-        : null}
-      {fullWidth ? null : <PostHeader {...props} />}
+      ) : null}
+      {fullWidth ? null : <PostHeader {...props} isDarkMode={isDarkMode} />}
     </header>
   )
 
   // 右侧栏 用户信息+标签列表
-  const slotRight = (router.route === '/404' || fullWidth) ? null : <SideRight {...props} />
+  const slotRight =
+    router.route === '/404' || fullWidth ? null : <SideRight {...props} />
 
   const maxWidth = fullWidth ? 'max-w-[96rem] mx-auto' : 'max-w-[86rem]' // 普通最大宽度是86rem和顶部菜单栏对齐，留空则与窗口对齐
 
-  const HEO_HERO_BODY_REVERSE = siteConfig('HEO_HERO_BODY_REVERSE', false, CONFIG)
+  const HEO_HERO_BODY_REVERSE = siteConfig(
+    'HEO_HERO_BODY_REVERSE',
+    false,
+    CONFIG
+  )
 
   // 加载wow动画
   useEffect(() => {
@@ -89,10 +90,8 @@ const LayoutBase = props => {
 
   return (
     <div
-      id="theme-heo"
-      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}
-    >
-
+      id='theme-heo'
+      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}>
       <Style />
 
       {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
@@ -100,15 +99,11 @@ const LayoutBase = props => {
 
       {/* 主区块 */}
       <main
-        id="wrapper-outer"
-        className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`}
-      >
+        id='wrapper-outer'
+        className={`flex-grow w-full ${maxWidth} mx-auto relative md:px-5`}>
         <div
-          id="container-inner"
-          className={
-            `${HEO_HERO_BODY_REVERSE ? 'flex-row-reverse' : ''} w-full mx-auto lg:flex justify-center relative z-10`
-          }
-        >
+          id='container-inner'
+          className={`${HEO_HERO_BODY_REVERSE ? 'flex-row-reverse' : ''} w-full mx-auto lg:flex justify-center relative z-10`}>
           <div className={`w-full h-auto ${className || ''}`}>
             {/* 主区上部嵌入 */}
             {slotTop}
@@ -117,12 +112,11 @@ const LayoutBase = props => {
 
           <div className='lg:px-2'></div>
 
-          <div className="hidden xl:block">
+          <div className='hidden xl:block'>
             {/* 主区快右侧 */}
             {slotRight}
           </div>
         </div>
-
       </main>
 
       {/* 页脚 */}
@@ -139,17 +133,15 @@ const LayoutBase = props => {
  */
 const LayoutIndex = props => {
   return (
-      <div id="post-outer-wrapper" className="px-5 md:px-0">
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page'
-          ? (
-            <BlogPostListPage {...props} />
-            )
-          : (
-            <BlogPostListScroll {...props} />
-            )}
-      </div>
+    <div id='post-outer-wrapper' className='px-5 md:px-0'>
+      {/* 文章分类条 */}
+      <CategoryBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </div>
   )
 }
 
@@ -160,17 +152,15 @@ const LayoutIndex = props => {
  */
 const LayoutPostList = props => {
   return (
-      <div id="post-outer-wrapper" className="px-5  md:px-0">
-        {/* 文章分类条 */}
-        <CategoryBar {...props} />
-        {siteConfig('POST_LIST_STYLE') === 'page'
-          ? (
-            <BlogPostListPage {...props} />
-            )
-          : (
-            <BlogPostListScroll {...props} />
-            )}
-      </div>
+    <div id='post-outer-wrapper' className='px-5  md:px-0'>
+      {/* 文章分类条 */}
+      <CategoryBar {...props} />
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogPostListPage {...props} />
+      ) : (
+        <BlogPostListScroll {...props} />
+      )}
+    </div>
   )
 }
 
@@ -200,26 +190,19 @@ const LayoutSearch = props => {
     }
   }, [])
   return (
-    <div
-      {...props}
-      currentSearch={currentSearch}
-    >
-      <div id="post-outer-wrapper" className="px-5  md:px-0">
-        {!currentSearch
-          ? (
-            <SearchNav {...props} />
-            )
-          : (
-            <div id="posts-wrapper">
-              {siteConfig('POST_LIST_STYLE') === 'page'
-                ? (
-                  <BlogPostListPage {...props} />
-                  )
-                : (
-                  <BlogPostListScroll {...props} />
-                  )}
-            </div>
+    <div {...props} currentSearch={currentSearch}>
+      <div id='post-outer-wrapper' className='px-5  md:px-0'>
+        {!currentSearch ? (
+          <SearchNav {...props} />
+        ) : (
+          <div id='posts-wrapper'>
+            {siteConfig('POST_LIST_STYLE') === 'page' ? (
+              <BlogPostListPage {...props} />
+            ) : (
+              <BlogPostListScroll {...props} />
             )}
+          </div>
+        )}
       </div>
     </div>
   )
@@ -236,20 +219,20 @@ const LayoutArchive = props => {
   // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
 
   return (
-      <div className="p-5 rounded-xl border dark:border-gray-600 max-w-6xl w-full bg-white dark:bg-[#1e1e1e]">
-        {/* 文章分类条 */}
-        <CategoryBar {...props} border={false} />
+    <div className='p-5 rounded-xl border dark:border-gray-600 max-w-6xl w-full bg-white dark:bg-[#1e1e1e]'>
+      {/* 文章分类条 */}
+      <CategoryBar {...props} border={false} />
 
-        <div className="px-3">
-          {Object.keys(archivePosts).map(archiveTitle => (
-            <BlogPostArchive
-              key={archiveTitle}
-              posts={archivePosts[archiveTitle]}
-              archiveTitle={archiveTitle}
-            />
-          ))}
-        </div>
+      <div className='px-3'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogPostArchive
+            key={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+            archiveTitle={archiveTitle}
+          />
+        ))}
       </div>
+    </div>
   )
 }
 
@@ -269,83 +252,92 @@ const LayoutSlug = props => {
     setHasCode(hasCode)
   }, [])
 
-  const commentEnable = siteConfig('COMMENT_TWIKOO_ENV_ID') || siteConfig('COMMENT_WALINE_SERVER_URL') || siteConfig('COMMENT_VALINE_APP_ID') ||
-    siteConfig('COMMENT_GISCUS_REPO') || siteConfig('COMMENT_CUSDIS_APP_ID') || siteConfig('COMMENT_UTTERRANCES_REPO') ||
-    siteConfig('COMMENT_GITALK_CLIENT_ID') || siteConfig('COMMENT_WEBMENTION_ENABLE')
+  const commentEnable =
+    siteConfig('COMMENT_TWIKOO_ENV_ID') ||
+    siteConfig('COMMENT_WALINE_SERVER_URL') ||
+    siteConfig('COMMENT_VALINE_APP_ID') ||
+    siteConfig('COMMENT_GISCUS_REPO') ||
+    siteConfig('COMMENT_CUSDIS_APP_ID') ||
+    siteConfig('COMMENT_UTTERRANCES_REPO') ||
+    siteConfig('COMMENT_GITALK_CLIENT_ID') ||
+    siteConfig('COMMENT_WEBMENTION_ENABLE')
 
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
     <>
-      <div className={`w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article`}>
-        {lock && <ArticleLock validPassword={validPassword} />}
+      <div
+        className={`article h-full w-full ${fullWidth ? '' : 'xl:max-w-5xl'} ${hasCode ? 'xl:w-[73.15vw]' : ''} lg:hover:shadow lg:border rounded-2xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600`}>
+        {/* 文章锁 */}
+        {lock && <PostLock validPassword={validPassword} />}
 
         {!lock && (
-          <div
-            id="article-wrapper"
-            className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 "
-          >
-            <article
-              itemScope
-              itemType="https://schema.org/Movie"
-              data-wow-delay=".2s"
-              className="wow fadeInUp subpixel-antialiased overflow-y-hidden"
-            >
+          <div id='article-wrapper' className='mx-auto md:w-full md:px-5'>
+            {/* 文章主体 */}
+            <article itemScope itemType='https://schema.org/Movie'>
               {/* Notion文章主体 */}
-              <section className="px-5 justify-center mx-auto">
-                <WWAds orientation="horizontal" className="w-full" />
+              <section
+                className='wow fadeInUp p-5 justify-center mx-auto'
+                data-wow-delay='.2s'>
+                <WWAds orientation='horizontal' className='w-full' />
                 {post && <NotionPage post={post} />}
-                <WWAds orientation="horizontal" className="w-full" />
+                <WWAds orientation='horizontal' className='w-full' />
               </section>
 
+              {/* 上一篇\下一篇文章 */}
+              <PostAdjacent {...props} />
+
               {/* 分享 */}
               <ShareBar post={post} />
               {post?.type === 'Post' && (
-                <div className="px-5">
+                <div className='px-5'>
                   {/* 版权 */}
-                  <ArticleCopyright {...props} />
+                  <PostCopyright {...props} />
                   {/* 文章推荐 */}
-                  <ArticleRecommend {...props} />
-                  {/* 上一篇\下一篇文章 */}
-                  <ArticleAdjacent {...props} />
+                  <PostRecommend {...props} />
                 </div>
               )}
             </article>
 
-            {fullWidth
-              ? null
-              : <div className={`${commentEnable && post ? '' : 'hidden'}`}>
-                <hr className="my-4 border-dashed" />
+            {/* 评论区 */}
+            {fullWidth ? null : (
+              <div className={`${commentEnable && post ? '' : 'hidden'}`}>
+                <hr className='my-4 border-dashed' />
                 {/* 评论区上方广告 */}
-                <div className="py-2">
-                    <AdSlot />
+                <div className='py-2'>
+                  <AdSlot />
                 </div>
                 {/* 评论互动 */}
-                <div className="duration-200 overflow-x-auto px-5">
-                  <div className="text-2xl dark:text-white">
-                    <i className="fas fa-comment mr-1" />
+                <div className='duration-200 overflow-x-auto px-5'>
+                  <div className='text-2xl dark:text-white'>
+                    <i className='fas fa-comment mr-1' />
                     {locale.COMMON.COMMENTS}
                   </div>
-                  <Comment frontMatter={post} className="" />
+                  <Comment frontMatter={post} className='' />
                 </div>
-              </div>}
+              </div>
+            )}
           </div>
         )}
       </div>
+
       <FloatTocButton {...props} />
     </>
   )
@@ -361,39 +353,38 @@ const Layout404 = props => {
   const { onLoading, fullWidth } = useGlobal()
   return (
     <>
-    {/* 主区块 */}
+      {/* 主区块 */}
       <main
-        id="wrapper-outer"
-        className={`flex-grow ${fullWidth ? '' : 'max-w-4xl'} w-screen mx-auto px-5`}
-      >
-        <div id="error-wrapper" className={'w-full mx-auto justify-center'}>
+        id='wrapper-outer'
+        className={`flex-grow ${fullWidth ? '' : 'max-w-4xl'} w-screen mx-auto px-5`}>
+        <div id='error-wrapper' className={'w-full mx-auto justify-center'}>
           <Transition
             show={!onLoading}
             appear={true}
-            enter="transition ease-in-out duration-700 transform order-first"
-            enterFrom="opacity-0 translate-y-16"
-            enterTo="opacity-100"
-            leave="transition ease-in-out duration-300 transform"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 -translate-y-16"
-            unmount={false}
-          >
+            enter='transition ease-in-out duration-700 transform order-first'
+            enterFrom='opacity-0 translate-y-16'
+            enterTo='opacity-100'
+            leave='transition ease-in-out duration-300 transform'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 -translate-y-16'
+            unmount={false}>
             {/* 404卡牌 */}
-            <div className="error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white dark:bg-[#1B1C20] border dark:border-gray-800 rounded-3xl">
+            <div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white dark:bg-[#1B1C20] border dark:border-gray-800 rounded-3xl'>
               {/* 左侧动图 */}
               <LazyImage
-                className="error-img h-60 md:h-full p-4"
-                src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}
-              ></LazyImage>
+                className='error-img h-60 md:h-full p-4'
+                src={
+                  'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'
+                }></LazyImage>
 
               {/* 右侧文字 */}
-              <div className="error-info flex-1 flex flex-col justify-center items-center space-y-4">
-                <h1 className="error-title font-extrabold md:text-9xl text-7xl dark:text-white">
+              <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
+                <h1 className='error-title font-extrabold md:text-9xl text-7xl dark:text-white'>
                   404
                 </h1>
                 <div className='dark:text-white'>请尝试站内搜索寻找文章</div>
-                <Link href="/">
-                  <button className="bg-blue-500 py-2 px-4 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all">
+                <Link href='/'>
+                  <button className='bg-blue-500 py-2 px-4 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>
                     回到主页
                   </button>
                 </Link>
@@ -401,7 +392,7 @@ const Layout404 = props => {
             </div>
 
             {/* 404页面底部显示最新文章 */}
-            <div className="mt-12">
+            <div className='mt-12'>
               <LatestPostsGroup {...props} />
             </div>
           </Transition>
@@ -421,38 +412,35 @@ const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
 
   return (
-      <div id="category-outer-wrapper" className="mt-8 px-5 md:px-0">
-        <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
-          {locale.COMMON.CATEGORY}
-        </div>
-        <div
-          id="category-list"
-          className="duration-200 flex flex-wrap m-10 justify-center"
-        >
-          {categoryOptions?.map(category => {
-            return (
-              <Link
-                key={category.name}
-                href={`/category/${category.name}`}
-                passHref
-                legacyBehavior
-              >
-                <div
-                  className={
-                    'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
-                  }
-                >
-                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                  {category.name}
-                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
-                    {category.count}
-                  </div>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
+    <div id='category-outer-wrapper' className='mt-8 px-5 md:px-0'>
+      <div className='text-4xl font-extrabold dark:text-gray-200 mb-5'>
+        {locale.COMMON.CATEGORY}
       </div>
+      <div
+        id='category-list'
+        className='duration-200 flex flex-wrap m-10 justify-center'>
+        {categoryOptions?.map(category => {
+          return (
+            <Link
+              key={category.name}
+              href={`/category/${category.name}`}
+              passHref
+              legacyBehavior>
+              <div
+                className={
+                  'group mr-5 mb-5 flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                }>
+                <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                {category.name}
+                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                  {category.count}
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
   )
 }
 
@@ -466,50 +454,47 @@ const LayoutTagIndex = props => {
   const { locale } = useGlobal()
 
   return (
-      <div id="tag-outer-wrapper" className="px-5 mt-8 md:px-0">
-        <div className="text-4xl font-extrabold dark:text-gray-200 mb-5">
-          {locale.COMMON.TAGS}
-        </div>
-        <div
-          id="tag-list"
-          className="duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center"
-        >
-          {tagOptions.map(tag => {
-            return (
-              <Link
-                key={tag.name}
-                href={`/tag/${tag.name}`}
-                passHref
-                legacyBehavior
-              >
-                <div
-                  className={
-                    'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
-                  }
-                >
-                  <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
-                  {tag.name}
-                  <div className="bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 ">
-                    {tag.count}
-                  </div>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
+    <div id='tag-outer-wrapper' className='px-5 mt-8 md:px-0'>
+      <div className='text-4xl font-extrabold dark:text-gray-200 mb-5'>
+        {locale.COMMON.TAGS}
       </div>
+      <div
+        id='tag-list'
+        className='duration-200 flex flex-wrap space-x-5 space-y-5 m-10 justify-center'>
+        {tagOptions.map(tag => {
+          return (
+            <Link
+              key={tag.name}
+              href={`/tag/${tag.name}`}
+              passHref
+              legacyBehavior>
+              <div
+                className={
+                  'group flex flex-nowrap items-center border bg-white text-2xl rounded-xl dark:hover:text-white px-4 cursor-pointer py-3 hover:text-white hover:bg-indigo-600 transition-all hover:scale-110 duration-150'
+                }>
+                <HashTag className={'w-5 h-5 stroke-gray-500 stroke-2'} />
+                {tag.name}
+                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                  {tag.count}
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
   )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
-  LayoutBase,
-  LayoutIndex,
-  LayoutSearch,
-  LayoutArchive,
-  LayoutSlug,
   Layout404,
-  LayoutPostList,
+  LayoutArchive,
+  LayoutBase,
   LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }

themes/hexo/components/BlogPostCard.js

@@ -5,42 +5,60 @@ import CONFIG from '../config'
 import { BlogPostCardInfo } from './BlogPostCardInfo'
 
 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
-  const showPreview = siteConfig('HEXO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
-  if (post && !post.pageCoverThumbnail && siteConfig('HEXO_POST_LIST_COVER_DEFAULT', null, CONFIG)) {
+  const showPreview =
+    siteConfig('HEXO_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
+  if (
+    post &&
+    !post.pageCoverThumbnail &&
+    siteConfig('HEXO_POST_LIST_COVER_DEFAULT', null, CONFIG)
+  ) {
     post.pageCoverThumbnail = siteInfo?.pageCover
   }
-  const showPageCover = siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) && post?.pageCoverThumbnail && !showPreview
+  const showPageCover =
+    siteConfig('HEXO_POST_LIST_COVER', null, CONFIG) &&
+    post?.pageCoverThumbnail &&
+    !showPreview
   //   const delay = (index % 2) * 200
 
   return (
-
-        <div className={`${siteConfig('HEXO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div key={post.id}
-                data-aos="fade-up"
-                data-aos-easing="ease-in-out"
-                data-aos-duration="800"
-                data-aos-once="false"
-                data-aos-anchor-placement="top-bottom"
-                id='blog-post-card'
-                className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${siteConfig('HEXO_POST_LIST_IMG_CROSSOVER', null, CONFIG) && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
+    <div
+      className={`${siteConfig('HEXO_POST_LIST_COVER_HOVER_ENLARGE', null, CONFIG) ? ' hover:scale-110 transition-all duration-150' : ''}`}>
+      <div
+        key={post.id}
+        data-aos='fade-up'
+        data-aos-easing='ease-in-out'
+        data-aos-duration='800'
+        data-aos-once='false'
+        data-aos-anchor-placement='top-bottom'
+        id='blog-post-card'
+        className={`group md:h-56 w-full flex justify-between md:flex-row flex-col-reverse ${siteConfig('HEXO_POST_LIST_IMG_CROSSOVER', null, CONFIG) && index % 2 === 1 ? 'md:flex-row-reverse' : ''}
                     overflow-hidden border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray`}>
+        {/* 文字内容 */}
+        <BlogPostCardInfo
+          index={index}
+          post={post}
+          showPageCover={showPageCover}
+          showPreview={showPreview}
+          showSummary={showSummary}
+        />
 
-                {/* 文字内容 */}
-                <BlogPostCardInfo index={index} post={post} showPageCover={showPageCover} showPreview={showPreview} showSummary={showSummary} />
-
-                {/* 图片封面 */}
-                {showPageCover && (
-                    <div className="md:w-5/12 overflow-hidden">
-                        <Link href={post?.href} passHref legacyBehavior>
-                        <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500' />
-                        </Link>
-                    </div>
-                )}
-
-            </div>
-
-        </div>
-
+        {/* 图片封面 */}
+        {showPageCover && (
+          <div className='md:w-5/12 overflow-hidden'>
+            <Link href={post?.href}>
+              <>
+                <LazyImage
+                  priority={index === 1}
+                  alt={post?.title}
+                  src={post?.pageCoverThumbnail}
+                  className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500'
+                />
+              </>
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
   )
 }
 

themes/hexo/components/BlogPostListPage.js

@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {

themes/hexo/components/BlogPostListScroll.js

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
   const { NOTION_CONFIG } = useGlobal()
   const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
 
   let hasMore = false

themes/hexo/components/ButtonFloatDarkMode.js

@@ -1,9 +1,12 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { saveDarkModeToLocalStorage } from '@/themes/theme'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
-export default function FloatDarkModeButton () {
+/**
+ * 深色模式按钮
+ */
+export default function ButtonDarkModeFloat() {
   const { isDarkMode, updateDarkMode } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_DARK_MODE', null, CONFIG)) {
@@ -23,10 +26,13 @@ export default function FloatDarkModeButton () {
   return (
     <div
       onClick={handleChangeDarkMode}
-      className={'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
-      }
-    >
-      <i id="darkModeButton" className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}/>
+      className={
+        'justify-center items-center w-7 h-7 text-center transform hover:scale-105 duration-200'
+      }>
+      <i
+        id='darkModeButton'
+        className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas text-xs`}
+      />
     </div>
   )
 }

themes/hexo/components/ButtonJumpToComment.js

@@ -1,19 +1,22 @@
-import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
 
 /**
  * 跳转到评论区
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToCommentButton = () => {
+const ButtonJumpToComment = () => {
   if (!siteConfig('HEXO_WIDGET_TO_COMMENT', null, CONFIG)) {
     return <></>
   }
 
   function navToComment() {
     if (document.getElementById('comment')) {
-      window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+      window.scrollTo({
+        top: document.getElementById('comment').offsetTop,
+        behavior: 'smooth'
+      })
     }
     // 兼容性不好
     // const commentElement = document.getElementById('comment')
@@ -21,9 +24,13 @@ const JumpToCommentButton = () => {
     // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
   }
 
-  return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
-    <i className='fas fa-comment text-xs' />
-  </div>)
+  return (
+    <div
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={navToComment}>
+      <i className='fas fa-comment text-xs' />
+    </div>
+  )
 }
 
-export default JumpToCommentButton
+export default ButtonJumpToComment

themes/hexo/components/ButtonJumpToTop.js

@@ -1,6 +1,6 @@
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
 
 /**
  * 跳转到网页顶部
@@ -10,7 +10,7 @@ import { siteConfig } from '@/lib/config'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ showPercent = true, percent }) => {
+const ButtonJumpToTop = ({ showPercent = true, percent }) => {
   const { locale } = useGlobal()
 
   if (!siteConfig('HEXO_WIDGET_TO_TOP', null, CONFIG)) {
@@ -22,4 +22,4 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
     </div>)
 }
 
-export default JumpToTopButton
+export default ButtonJumpToTop

themes/hexo/components/ButtonRandomPost.js

@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPost(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}

themes/hexo/components/ButtonRandomPostMini.js

@@ -0,0 +1,29 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function ButtonRandomPostMini(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  const { locale } = useGlobal()
+  /**
+   * 随机跳转文章
+   */
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
+  }
+
+  return (
+    <div
+      title={locale.MENU.WALK_AROUND}
+      className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center'
+      onClick={handleClick}>
+      <i className='fa-solid fa-podcast'></i>
+    </div>
+  )
+}

themes/hexo/components/Header.js

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import CONFIG from '../config'
+import ButtonRandomPost from './ButtonRandomPost'
 import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import { MenuListTop } from './MenuListTop'
@@ -28,6 +29,7 @@ const Header = props => {
   const router = useRouter()
   const [isOpen, changeShow] = useState(false)
   const showSearchButton = siteConfig('HEXO_MENU_SEARCH', false, CONFIG)
+  const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
 
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
@@ -172,6 +174,7 @@ const Header = props => {
               )}
             </div>
             {showSearchButton && <SearchButton />}
+            {showRandomButton && <ButtonRandomPost {...props} />}
           </div>
         </div>
       </div>

themes/hexo/components/Hero.js

@@ -26,10 +26,7 @@ const Hero = props => {
     updateHeaderHeight()
 
     if (!typed && window && document.getElementById('typed')) {
-      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
-        'js'
-      ).then(() => {
+      loadExternalResource('/js/typed.min.js', 'js').then(() => {
         if (window.Typed) {
           changeType(
             new window.Typed('#typed', {
@@ -92,6 +89,7 @@ const Hero = props => {
 
       <LazyImage
         id='header-cover'
+        alt={siteInfo?.title}
         src={siteInfo?.pageCover}
         className={`header-cover w-full h-screen object-cover object-center ${siteConfig('HEXO_HOME_NAV_BACKGROUND_IMG_FIXED', null, CONFIG) ? 'fixed' : ''}`}
       />

themes/hexo/components/LatestPostsGroup.js

@@ -42,6 +42,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
             className={'my-3 flex'}>
             <div className='w-20 h-14 overflow-hidden relative'>
               <LazyImage
+                alt={post?.title}
                 src={`${headerImage}`}
                 className='object-cover w-full h-full'
               />

themes/hexo/components/PaginationNumber.js

@@ -12,60 +12,69 @@ const PaginationNumber = ({ page, totalPage }) => {
   const router = useRouter()
   const currentPage = +page
   const showNext = page < totalPage
-  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+    .replace('.html', '')
   const pages = generatePages(pagePrefix, page, currentPage, totalPage)
 
   return (
-    <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
-        {/* 上一页 */}
-        <Link
-          href={{
-            pathname: currentPage === 2
+    <div className='mt-10 mb-5 flex justify-center items-end font-medium text-indigo-400 duration-500 py-3 space-x-2'>
+      {/* 上一页 */}
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
               ? `${pagePrefix}/`
               : `${pagePrefix}/page/${currentPage - 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          rel="prev"
-          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}>
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        rel='prev'
+        className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 hover:bg-indigo-400 hover:text-white w-6 text-center cursor-pointer duration-200 hover:font-bold`}>
+        <i className='fas fa-angle-left' />
+      </Link>
 
-          <i className="fas fa-angle-left" />
+      {pages}
 
-        </Link>
-
-        {pages}
-
-        {/* 下一页 */}
-        <Link
-          href={{
-            pathname: `${pagePrefix}/page/${currentPage + 1}`,
-            query: router.query.s ? { s: router.query.s } : {}
-          }}
-          rel="next"
-          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}>
-
-          <i className="fas fa-angle-right" />
-
-        </Link>
+      {/* 下一页 */}
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        rel='next'
+        className={`${+showNext ? 'block' : 'invisible'} pb-0.5 hover:bg-indigo-400 hover:text-white w-6 text-center cursor-pointer duration-200 hover:font-bold`}>
+        <i className='fas fa-angle-right' />
+      </Link>
     </div>
   )
 }
 
+/**
+ * 获取页码
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} pagePrefix
+ * @returns
+ */
 function getPageElement(page, currentPage, pagePrefix) {
+  const selected = page + '' === currentPage + ''
   return (
-    (<Link
+    <Link
       href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
       key={page}
       passHref
-      className={
-          (page + '' === currentPage + ''
-            ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
-            : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
-          ' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
-      }>
-
+      className={`${
+        selected
+          ? 'font-bold bg-indigo-400 hover:bg-indigo-600 dark:bg-indigo-500 text-white'
+          : 'border-b border-indigo-400 text-indigo-400 hover:border-indigo-400 hover:bg-indigo-400'
+      }
+      duration-500  hover:font-bold hover:text-white
+      cursor-pointer pb-0.5 w-6 text-center
+      `}>
       {page}
-
-    </Link>)
+    </Link>
   )
 }
 

themes/hexo/components/RightFloatArea.js

@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
-import FloatDarkModeButton from './FloatDarkModeButton'
-import JumpToTopButton from './JumpToTopButton'
+import ButtonDarkModeFloat from './ButtonFloatDarkMode'
+import ButtonJumpToTop from './ButtonJumpToTop'
 
 /**
  * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
@@ -10,20 +10,22 @@ import JumpToTopButton from './JumpToTopButton'
  */
 export default function RightFloatArea({ floatSlot }) {
   const [showFloatButton, switchShow] = useState(false)
-  const scrollListener = useCallback(throttle(() => {
-    const targetRef = document.getElementById('wrapper')
-    const clientHeight = targetRef?.clientHeight
-    const scrollY = window.pageYOffset
-    const fullHeight = clientHeight - window.outerHeight
-    let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
-    if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0
+  const scrollListener = useCallback(
+    throttle(() => {
+      const targetRef = document.getElementById('wrapper')
+      const clientHeight = targetRef?.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      const shouldShow = scrollY > 100 && per > 0
 
-    // 右下角显示悬浮按钮
-    if (shouldShow !== showFloatButton) {
-      switchShow(shouldShow)
-    }
-  }, 200))
+      // 右下角显示悬浮按钮
+      if (shouldShow !== showFloatButton) {
+        switchShow(shouldShow)
+      }
+    }, 200)
+  )
 
   useEffect(() => {
     document.addEventListener('scroll', scrollListener)
@@ -31,12 +33,17 @@ export default function RightFloatArea({ floatSlot }) {
   }, [])
 
   return (
-        <div className={(showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') + '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'}>
-                <div className={'justify-center  flex flex-col items-center cursor-pointer'}>
-                    <FloatDarkModeButton />
-                    {floatSlot}
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <div
+      className={
+        (showFloatButton ? 'opacity-100 ' : 'invisible opacity-0') +
+        '  duration-300 transition-all bottom-12 right-1 fixed justify-end z-20  text-white bg-indigo-500 dark:bg-hexo-black-gray rounded-sm'
+      }>
+      <div
+        className={'justify-center  flex flex-col items-center cursor-pointer'}>
+        <ButtonDarkModeFloat />
+        {floatSlot}
+        <ButtonJumpToTop />
+      </div>
+    </div>
   )
 }

themes/hexo/components/SocialButton.js

@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'
 
 /**
  * 社交联系方式按钮组
@@ -6,39 +8,176 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
+  const CONTACT_GITHUB = siteConfig('CONTACT_GITHUB')
+  const CONTACT_TWITTER = siteConfig('CONTACT_TWITTER')
+  const CONTACT_TELEGRAM = siteConfig('CONTACT_TELEGRAM')
+
+  const CONTACT_LINKEDIN = siteConfig('CONTACT_LINKEDIN')
+  const CONTACT_WEIBO = siteConfig('CONTACT_WEIBO')
+  const CONTACT_INSTAGRAM = siteConfig('CONTACT_INSTAGRAM')
+  const CONTACT_EMAIL = siteConfig('CONTACT_EMAIL')
+  const ENABLE_RSS = siteConfig('ENABLE_RSS')
+  const CONTACT_BILIBILI = siteConfig('CONTACT_BILIBILI')
+  const CONTACT_YOUTUBE = siteConfig('CONTACT_YOUTUBE')
+
+  const CONTACT_XIAOHONGSHU = siteConfig('CONTACT_XIAOHONGSHU')
+  const CONTACT_ZHISHIXINGQIU = siteConfig('CONTACT_ZHISHIXINGQIU')
+  const CONTACT_WEHCHAT_PUBLIC = siteConfig('CONTACT_WEHCHAT_PUBLIC')
+
+  const [qrCodeShow, setQrCodeShow] = useState(false)
+
+  const openPopover = () => {
+    setQrCodeShow(true)
+  }
+  const closePopover = () => {
+    setQrCodeShow(false)
+  }
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl flex items-center text-gray-600 dark:text-gray-300 '>
+        {CONTACT_GITHUB && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={CONTACT_GITHUB}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_TWITTER && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={CONTACT_TWITTER}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_TELEGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_TELEGRAM}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_LINKEDIN && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={CONTACT_LINKEDIN}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_WEIBO && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={CONTACT_WEIBO}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_INSTAGRAM && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={CONTACT_INSTAGRAM}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_EMAIL && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${CONTACT_EMAIL}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {ENABLE_RSS && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_BILIBILI && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={CONTACT_BILIBILI}>
+            <i className='transform hover:scale-125 duration-150 dark:hover:text-indigo-400 hover:text-indigo-600 fab fa-bilibili' />
+          </a>
+        )}
+        {CONTACT_YOUTUBE && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={CONTACT_YOUTUBE}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {CONTACT_XIAOHONGSHU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'小红书'}
+            href={CONTACT_XIAOHONGSHU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/xiaohongshu.svg'
+              alt='小红书'
+            />
+          </a>
+        )}
+        {CONTACT_ZHISHIXINGQIU && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'知识星球'}
+            href={CONTACT_ZHISHIXINGQIU}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className='transform hover:scale-125 duration-150 w-6'
+              src='/svg/zhishixingqiu.svg'
+              alt='知识星球'
+            />{' '}
+          </a>
+        )}
+        {CONTACT_WEHCHAT_PUBLIC && (
+          <button
+            onMouseEnter={openPopover}
+            onMouseLeave={closePopover}
+            aria-label={'微信公众号'}>
+            <div id='wechat-button'>
+              <i className='transform scale-105 hover:scale-125 duration-150 fab fa-weixin  dark:hover:text-indigo-400 hover:text-indigo-600' />
+            </div>
+            {/* 二维码弹框 */}
+            <div className='absolute'>
+              <div
+                id='pop'
+                className={
+                  (qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
+                  ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
+                }>
+                <div className='p-2 mt-1 w-28 h-28'>
+                  {qrCodeShow && <QrCode value={CONTACT_WEHCHAT_PUBLIC} />}
+                </div>
+              </div>
+            </div>
+          </button>
+        )}
+      </div>
     </div>
-  </div>
+  )
 }
 export default SocialButton

themes/hexo/config.js

@@ -1,7 +1,12 @@
 const CONFIG = {
   HEXO_HOME_BANNER_ENABLE: true,
   // 3.14.1以后的版本中，欢迎语在blog.config.js中配置，用英文逗号','隔开多个。
-  HEXO_HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字
+  HEXO_HOME_BANNER_GREETINGS: [
+    'Hi，我是一个程序员',
+    'Hi，我是一个打工人',
+    'Hi，我是一个干饭人',
+    '欢迎来到我的博客🎉'
+  ], // 首页大图标语文字
 
   HEXO_HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
   // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
@@ -15,6 +20,7 @@ const CONFIG = {
   HEXO_MENU_TAG: true, // 显示标签
   HEXO_MENU_ARCHIVE: true, // 显示归档
   HEXO_MENU_SEARCH: true, // 显示搜索
+  HEXO_MENU_RANDOM: true, // 显示随机跳转按钮
 
   HEXO_POST_LIST_COVER: true, // 列表显示文章封面
   HEXO_POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大

themes/hexo/index.js

@@ -17,11 +17,12 @@ import ArticleRecommend from './components/ArticleRecommend'
 import BlogPostArchive from './components/BlogPostArchive'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
+import ButtonJumpToComment from './components/ButtonJumpToComment'
+import ButtonRandomPostMini from './components/ButtonRandomPostMini'
 import Card from './components/Card'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import Hero from './components/Hero'
-import JumpToCommentButton from './components/JumpToCommentButton'
 import PostHero from './components/PostHero'
 import RightFloatArea from './components/RightFloatArea'
 import SearchNav from './components/SearchNav'
@@ -51,8 +52,9 @@ export const useHexoGlobal = () => useContext(ThemeGlobalHexo)
 const LayoutBase = props => {
   const { post, children, slotTop, className } = props
   const { onLoading, fullWidth } = useGlobal()
-
   const router = useRouter()
+  const showRandomButton = siteConfig('HEXO_MENU_RANDOM', false, CONFIG)
+
   const headerSlot = post ? (
     <PostHero {...props} />
   ) : router.route === '/' &&
@@ -63,6 +65,7 @@ const LayoutBase = props => {
   const drawerRight = useRef(null)
   const tocRef = isBrowser ? document.getElementById('article-wrapper') : null
 
+  // 悬浮按钮内容
   const floatSlot = (
     <>
       {post?.toc?.length > 1 && (
@@ -74,7 +77,8 @@ const LayoutBase = props => {
           />
         </div>
       )}
-      {post && <JumpToCommentButton />}
+      {post && <ButtonJumpToComment />}
+      {showRandomButton && <ButtonRandomPostMini {...props} />}
     </>
   )
 

themes/matery/components/BlogPostListPage.js

@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
   const showPagination = postCount >= POSTS_PER_PAGE
   if (!posts || posts.length === 0 || page > totalPage) {

themes/matery/components/BlogPostListScroll.js

@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
   siteInfo
 }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const [page, updatePage] = useState(1)
   const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
   // 监听滚动

themes/matery/components/Hero.js

@@ -21,10 +21,7 @@ const Hero = props => {
   useEffect(() => {
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
-      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
-        'js'
-      ).then(() => {
+      loadExternalResource('/js/typed.min.js', 'js').then(() => {
         if (window.Typed) {
           changeType(
             new window.Typed('#typed', {

themes/matery/components/SocialButton.js

@@ -12,42 +12,113 @@ const SocialButton = () => {
     setShow(!show)
   }
 
-  return <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
-        {!show && <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-user py-0.5' />}
-        {show && <>
-            {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-github ' />
-            </a>}
-            {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
-            </a>}
-            {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-                <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
-            </a>}
-            {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-                <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
-            </a>}
-            {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
-            </a>}
-            {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
-            </a>}
-            {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-                <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
-            </a>}
-            {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-                <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
-            </a>}
-            {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-                <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-            </a>}
-            {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-                <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-            </a>}
-            <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-close ' />
-
-        </>}
+  return (
+    <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
+      {!show && (
+        <i
+          onClick={toggleShow}
+          className='transform hover:scale-125 duration-150 fas fa-user py-0.5'
+        />
+      )}
+      {show && (
+        <>
+          {siteConfig('CONTACT_GITHUB') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'github'}
+              href={siteConfig('CONTACT_GITHUB')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-github ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_TWITTER') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'twitter'}
+              href={siteConfig('CONTACT_TWITTER')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_TELEGRAM') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              href={siteConfig('CONTACT_TELEGRAM')}
+              title={'telegram'}>
+              <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_LINKEDIN') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              href={siteConfig('CONTACT_LINKEDIN')}
+              title={'linkIn'}>
+              <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_WEIBO') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'weibo'}
+              href={siteConfig('CONTACT_WEIBO')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_INSTAGRAM') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'instagram'}
+              href={siteConfig('CONTACT_INSTAGRAM')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_EMAIL') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'email'}
+              href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+              <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
+            </a>
+          )}
+          {JSON.parse(siteConfig('ENABLE_RSS')) && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'RSS'}
+              href={'/rss/feed.xml'}>
+              <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_BILIBILI') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'bilibili'}
+              href={siteConfig('CONTACT_BILIBILI')}>
+              <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+            </a>
+          )}
+          {siteConfig('CONTACT_YOUTUBE') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'youtube'}
+              href={siteConfig('CONTACT_YOUTUBE')}>
+              <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+            </a>
+          )}
+          <i
+            onClick={toggleShow}
+            className='transform hover:scale-125 duration-150 fas fa-close '
+          />
+        </>
+      )}
     </div>
+  )
 }
 export default SocialButton

themes/medium/components/BlogPostListPage.js

@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
 
   if (!posts || posts.length === 0) {

themes/medium/components/BlogPostListScroll.js

@@ -15,7 +15,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  */
 const BlogPostListScroll = ({ posts = [], currentSearch }) => {
   const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
   const [page, updatePage] = useState(1)
   const router = useRouter()
   let filteredPosts = Object.assign(posts)

themes/medium/components/CategoryGroup.js

@@ -1,18 +1,37 @@
+import { useGlobal } from '@/lib/global'
 import CategoryItem from './CategoryItem'
 
+/**
+ * 分类
+ * @param {*} param0
+ * @returns
+ */
 const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  const { locale } = useGlobal()
   if (!categoryOptions) {
     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'>
-      {categoryOptions?.map(category => {
-        const selected = currentCategory === category.name
-        return <CategoryItem key={category.name} selected={selected} category={category.name} categoryCount={category.count} />
-      })}
+  return (
+    <div id='category-list' className='pt-4'>
+      <div className='mb-2'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}
+      </div>
+      <div className='flex flex-wrap'>
+        {categoryOptions?.map(category => {
+          const selected = currentCategory === category.name
+          return (
+            <CategoryItem
+              key={category.name}
+              selected={selected}
+              category={category.name}
+              categoryCount={category.count}
+            />
+          )
+        })}
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default CategoryGroup

themes/medium/components/SocialButton.js

@@ -6,37 +6,99 @@ import { siteConfig } from '@/lib/config'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <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>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
+  return (
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {siteConfig('CONTACT_GITHUB') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'github'}
+          href={siteConfig('CONTACT_GITHUB')}>
+          <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TWITTER') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'twitter'}
+          href={siteConfig('CONTACT_TWITTER')}>
+          <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TELEGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_TELEGRAM')}
+          title={'telegram'}>
+          <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_LINKEDIN') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_LINKEDIN')}
+          title={'linkedIn'}>
+          <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_WEIBO') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'weibo'}
+          href={siteConfig('CONTACT_WEIBO')}>
+          <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_INSTAGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'instagram'}
+          href={siteConfig('CONTACT_INSTAGRAM')}>
+          <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_EMAIL') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'email'}
+          href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+          <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'RSS'}
+          href={'/rss/feed.xml'}>
+          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_BILIBILI') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'bilibili'}
+          href={siteConfig('CONTACT_BILIBILI')}>
+          <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_YOUTUBE') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'youtube'}
+          href={siteConfig('CONTACT_YOUTUBE')}>
+          <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
     </div>
+  )
 }
 export default SocialButton

themes/medium/components/TagGroups.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -8,17 +9,19 @@ import TagItemMini from './TagItemMini'
  * @constructor
  */
 const TagGroups = ({ tagOptions, currentTag }) => {
+  const { locale } = useGlobal()
   if (!tagOptions) 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='mb-2'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}
+      </div>
       <div className='space-y-2'>
-        {
-          tagOptions?.map(tag => {
-            const selected = tag.name === currentTag
-            return <TagItemMini key={tag.name} tag={tag} selected={selected} />
-          })
-        }
+        {tagOptions?.map(tag => {
+          const selected = tag.name === currentTag
+          return <TagItemMini key={tag.name} tag={tag} selected={selected} />
+        })}
       </div>
     </div>
   )