Merge pull request #1268 from tangly1024/feat/new-theme-heo

Feat/new theme heo
2026-05-14 07:26:52 +00:00 · 2023-07-17 19:04:08 +08:00
parent cd68988ee7 4ac7c552de
commit 0baa392e5d
106 changed files with 4266 additions and 254 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,6 +26,7 @@ module.exports = {
    }
  },
  rules: {
+    'react/no-unknown-property': 'off', // <style jsx>
    'react/prop-types': 'off',
    'space-before-function-paren': 0,
    'react-hooks/rules-of-hooks': 'error' // Checks rules of Hooks
--- a/blog.config.js
+++ b/blog.config.js
@@ -48,12 +48,12 @@ const BLOG = {
    '-apple-system',
    'BlinkMacSystemFont',
    '"Hiragino Sans GB"',
+    '"Microsoft YaHei"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
    '"Segoe UI"',
    '"Noto Sans SC"',
    'HarmonyOS_Regular',
-    '"Microsoft YaHei"',
    '"Helvetica Neue"',
    'Helvetica',
    '"Source Han Sans SC"',
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -54,7 +54,7 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
  ssr: false
 })

-const Comment = ({ frontMatter }) => {
+const Comment = ({ frontMatter, className }) => {
  const router = useRouter()

  if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) {
@@ -70,7 +70,7 @@ const Comment = ({ frontMatter }) => {
  }

  return (
-    <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
+    <div id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
        <Tabs>

            {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
--- a/components/FlipCard.js
+++ b/components/FlipCard.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+
+/**
+ * 翻转组件
+ * @param {*} props
+ * @returns
+ */
+export default function FlipCard(props) {
+  const [isFlipped, setIsFlipped] = useState(false)
+
+  function handleCardFlip() {
+    setIsFlipped(!isFlipped)
+  }
+
+  return (
+        <div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
+            <div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
+                {props.frontContent}
+            </div>
+            <div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
+                {props.backContent}
+            </div>
+            <style jsx>{`
+          .flip-card {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.2s;
+          }
+          
+          .flip-card-front,
+          .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+          }
+          
+          .flip-card-front {
+            z-index: 2;
+            transform: rotateY(0);
+          }
+          
+          .flip-card-back {
+            transform: rotateY(180deg);
+          }
+          
+          .flip-card.flipped {
+            transform: rotateY(180deg);
+          }
+        `}</style>
+        </div>
+  )
+}
--- a/components/HeroIcons.js
+++ b/components/HeroIcons.js
@@ -3,52 +3,92 @@
 * @returns
 */

-const Moon = () => {
+export const Moon = () => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+    </svg>
 }

-const Sun = () => {
+export const Sun = () => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </svg>
 }

-const Home = ({ className }) => {
+export const Home = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>
 }

-const User = ({ className }) => {
+export const User = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
 }

-const ArrowPath = ({ className }) => {
+export const ArrowPath = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
 }

-const ChevronLeft = ({ className }) => {
+export const ChevronLeft = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+    </svg>
 }

-const ChevronRight = ({ className }) => {
+export const ChevronRight = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-  </svg>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+    </svg>
 }

-const InformationCircle = ({ className }) => {
+export const ChevronDoubleRight = ({ className }) => {
  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
  </svg>
 }

-export { Moon, Sun, Home, User, ArrowPath, ChevronLeft, ChevronRight, InformationCircle }
+export const InformationCircle = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    </svg>
+}
+
+export const HashTag = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
+    </svg>
+}
+
+export const GlobeAlt = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
+    </svg>
+}
+
+export const ArrowRightCircle = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+}
+
+export const PlusSmall = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+  </svg>
+}
+
+export const ArrowSmallRight = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
+  </svg>
+}
+
+export const ArrowSmallUp = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+  </svg>
+}
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { Draggable } from './Draggable'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import DarkModeButton from './DarkModeButton'
 /**
 *
 * @returns 主题切换
@@ -22,14 +23,15 @@ const ThemeSwitch = () => {

  return (<>
        <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
-                <div className="py-2 flex items-center text-sm px-2">
-                    <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
+            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-2xl shadow-card">
+                <div className="p-3 flex items-center text-sm">
+                    <DarkModeButton className='mr-2'/>
+                    <select value={theme} onChange={onSelectChange} name="cars" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
                        {THEMES?.map(t => {
                          return <option key={t} value={t}>{t}</option>
                        })}
                    </select>
-                    <i className='fas fa-palette pl-1' />
+                    <i class="fa-solid fa-paintbrush pl-2"></i>
                </div>
            </div>
        </Draggable>
--- a/components/WordCount.js
+++ b/components/WordCount.js
@@ -0,0 +1,67 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect } from 'react'
+
+/**
+ * 字数统计
+ * @returns
+ */
+export default function WordCount() {
+  const { locale } = useGlobal()
+  useEffect(() => {
+    countWords()
+  })
+
+  return <span id='wordCountWrapper' className='flex gap-3 font-light'>
+        <span className='flex whitespace-nowrap items-center'>
+            <i className='pl-1 pr-2 fas fa-file-word' />
+            <span id='wordCount'>0</span>
+        </span>
+        <span className='flex whitespace-nowrap items-center'>
+            <i className='mr-1 fas fa-clock' />
+            <span></span>
+            <span id='readTime'>0</span>&nbsp;{locale.COMMON.MINUTE}
+        </span>
+    </span>
+}
+
+/**
+ * 更新字数统计和阅读时间
+ */
+function countWords() {
+  const articleText = deleteHtmlTag(document.getElementById('notion-article')?.innerHTML)
+  const wordCount = fnGetCpmisWords(articleText)
+  // 阅读速度 300-500每分钟
+  document.getElementById('wordCount').innerHTML = wordCount
+  document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
+  const wordCountWrapper = document.getElementById('wordCountWrapper')
+  wordCountWrapper.classList.remove('hidden')
+}
+
+// 去除html标签
+function deleteHtmlTag(str) {
+  if (!str) {
+    return ''
+  }
+  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
+  return str
+}
+
+// 用word方式计算正文字数
+function fnGetCpmisWords(str) {
+  if (!str) {
+    return 0
+  }
+  let sLen = 0
+  try {
+    // eslint-disable-next-line no-irregular-whitespace
+    str = str.replace(/(\r\n+|\s+|　+)/g, '龘')
+    // eslint-disable-next-line no-control-regex
+    str = str.replace(/[\x00-\xff]/g, 'm')
+    str = str.replace(/m+/g, '*')
+    str = str.replace(/龘+/g, '')
+    sLen = str.length
+  } catch (e) {
+
+  }
+  return sLen
+}
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -1,7 +1,7 @@
 export default {
  LOCALE: 'en-US',
  NAV: {
-    INDEX: 'Blog',
+    INDEX: 'Home',
    RSS: 'RSS',
    SEARCH: 'Search',
    ABOUT: 'About',
@@ -35,6 +35,7 @@ export default {
    SUBMIT: 'Submit',
    POST_TIME: 'Post on',
    LAST_EDITED_TIME: 'Last edited',
+    COMMENTS: 'Comments',
    RECENT_COMMENTS: 'Recent Comments',
    DEBUG_OPEN: 'Debug',
    DEBUG_CLOSE: 'Close',
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -12,7 +12,7 @@ export default {
  COMMON: {
    MORE: '更多',
    NO_MORE: '没有更多了',
-    LATEST_POSTS: '最新文章',
+    LATEST_POSTS: '最新发布',
    TAGS: '标签',
    NO_TAG: 'NoTag',
    CATEGORY: '分类',
@@ -37,6 +37,7 @@ export default {
    SUBMIT: '提交',
    POST_TIME: '发布于',
    LAST_EDITED_TIME: '最后更新',
+    COMMENTS: '评论',
    RECENT_COMMENTS: '最新评论',
    DEBUG_OPEN: '开启调试',
    DEBUG_CLOSE: '关闭调试',
@@ -47,8 +48,8 @@ export default {
    WORD_COUNT: '字数'
  },
  PAGINATION: {
-    PREV: '上一页',
-    NEXT: '下一页'
+    PREV: '上页',
+    NEXT: '下页'
  },
  SEARCH: {
    ARTICLES: '搜索文章',
--- a/lib/notion/getNotionData.js
+++ b/lib/notion/getNotionData.js
@@ -309,7 +309,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
  const customNav = getCustomNav({ allPages: collectionData.filter(post => post?.type === 'Page' && post.status === 'Published') })
  // 新的菜单
  const customMenu = await getCustomMenu({ collectionData })
-  const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })
+  const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 6 })
  const allNavPages = getNavPages({ allPages })

  return {
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -99,7 +99,6 @@ export default async function getPageProperties(id, block, schema, authToken, ta
    properties.to = properties.slug ?? null
    properties.name = properties.title ?? ''
  }
-  properties.password = properties.password ? md5(properties.slug + properties.password) : ''

  // 开启伪静态路径
  if (JSON.parse(BLOG.PSEUDO_STATIC)) {
@@ -107,6 +106,7 @@ export default async function getPageProperties(id, block, schema, authToken, ta
      properties.slug += '.html'
    }
  }
+  properties.password = properties.password ? md5(properties.slug + properties.password) : ''
  return properties
 }

--- a/pages/_document.js
+++ b/pages/_document.js
@@ -17,7 +17,7 @@ class MyDocument extends Document {
                    <CommonScript />
                </Head>

-                <body className={`${BLOG.FONT_STYLE} font-light bg-day dark:bg-night`}>
+                <body className={`${BLOG.FONT_STYLE} font-light`}>
                    <Main />
                    <NextScript />
                </body>
--- a/public/css/theme-fukasawa.css
+++ b/public/css/theme-fukasawa.css
@@ -1 +0,0 @@
-/* fukasawa的主题相关 */
--- a/public/css/theme-hexo.css
+++ b/public/css/theme-hexo.css
@@ -1,30 +0,0 @@
-/*  菜单下划线动画 */
-#theme-hexo .menu-link {
-    text-decoration: none;
-    background-image: linear-gradient(#928CEE, #928CEE);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: 0 2px;
-    transition: background-size 100ms ease-in-out;
-}
- 
-#theme-hexo .menu-link:hover {
-    background-size: 100% 2px;
-    color: #928CEE;
-}
-
-/* 设置了从上到下的渐变黑色 */
-#theme-hexo .header-cover::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-}
-
-/* Custem */
-.tk-footer{
-    opacity: 0;
-}
--- a/public/css/theme-matery.css
+++ b/public/css/theme-matery.css
@@ -1,11 +0,0 @@
-
-/* 设置了从上到下的渐变黑色 */
-#theme-matery .header-cover::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-}
--- a/public/css/theme-simple.css
+++ b/public/css/theme-simple.css
@@ -1,34 +0,0 @@
-#theme-simple #announcement-content {
-  /* background-color: #f6f6f6; */
-}
-
-#theme-simple .blog-item-title {
-  color: #276077;
-}
-
-.dark #theme-simple .blog-item-title {
-  color: #d1d5db;
-}
-
-.notion {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-
-/*  菜单下划线动画 */
-#theme-simple .menu-link {
-    text-decoration: none;
-    background-image: linear-gradient(#dd3333, #dd3333);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: 0 2px;
-    transition: background-size 100ms ease-in-out;
-}
- 
-#theme-simple .menu-link:hover {
-    background-size: 100% 2px;
-    color: #dd3333;
-    cursor: pointer;
-}
-
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,28 +2,6 @@
@tailwind components;
@tailwind utilities;

-html {
-  --scrollbarBG: #ffffff00;
-  --thumbBG: #b8b8b8;
-}
-body::-webkit-scrollbar {
-  width: 5px;
-}
-body {
-  scrollbar-width: thin;
-  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
-body::-webkit-scrollbar-track {
-  background: var(--scrollbarBG);
-}
-body::-webkit-scrollbar-thumb {
-  background-color: var(--thumbBG);
-}
-
-::selection {
-  background: rgba(45, 170, 219, 0.3);
-}
-
 .wrapper {
  min-height: 100vh;
  display: flex;
@@ -285,57 +263,3 @@ a.avatar-wrapper {
 .reply-author-name {
  font-weight: 500;
 }
-
-.line-clamp-4 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
-}
-
-.line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-
-/* fukasawa的首页响应式分栏 */
-#theme-fukasawa .grid-item {
-    height: auto;
-    break-inside: avoid-column;
-    margin-bottom: .5rem;
-  }
-  
-  /* 大屏幕（宽度≥1024px）下显示3列 */
-  @media (min-width: 1024px) {
-    #theme-fukasawa .grid-container {
-      column-count: 3;
-      column-gap: .5rem;
-    }
-  }
-  
-  /* 小屏幕（宽度≥640px）下显示2列 */
-  @media (min-width: 640px) and (max-width: 1023px) {
-    #theme-fukasawa .grid-container {
-      column-count: 2;
-      column-gap: .5rem;
-    }
-  }
-  
-  /* 移动端（宽度<640px）下显示1列 */
-  @media (max-width: 639px) {
-    #theme-fukasawa .grid-container {
-      column-count: 1;
-      column-gap: .5rem;
-    }
-  }
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -443,6 +443,7 @@ summary > .notion-h {

 .notion-h:hover .notion-hash-link {
  opacity: 1;
+  @apply dark:fill-gray-200
 }

 .notion-hash-link {
@@ -1943,10 +1944,6 @@ svg + .notion-page-title-text {
    display: block !important;
 }

-::selection {
-    @apply bg-blue-500 text-gray-50 !important;
-}
-
 /* https://github.com/kchen0x */
 .notion-quote {
  display: block;
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -26,6 +26,7 @@ import CategoryItem from './components/CategoryItem'
 import TagItem from './components/TagItem'
 import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 /**
 * 基础布局框架
@@ -50,6 +51,7 @@ const LayoutBase = props => {
        <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
            {/* 网页SEO信息 */}
            <CommonHead meta={meta} />
+            <Style/>

            {/* 页头 */}
            <Header {...props} />
--- a/themes/example/style.js
+++ b/themes/example/style.js
@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -5,7 +5,7 @@ import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
@@ -19,6 +19,7 @@ import Link from 'next/link'
 import { Transition } from '@headlessui/react'
 import dynamic from 'next/dynamic'
 import { AdSlot } from '@/components/GoogleAdsense'
+import { Style } from './style'

 const Live2D = dynamic(() => import('@/components/Live2D'))
 const Mark = dynamic(() => import('mark.js'))
@@ -61,15 +62,12 @@ const LayoutBase = (props) => {
    }
  }, [isCollapsed])

-  if (isBrowser()) {
-    loadExternalResource('/css/theme-fukasawa.css', 'css')
-  }
-
  return (
        <ThemeGlobalFukasawa.Provider value={{ isCollapsed, setIsCollapse }}>

            <div id='theme-fukasawa'>
                <CommonHead meta={meta} />
+                <Style/>

                <TopNav {...props} />

--- a/themes/fukasawa/style.js
+++ b/themes/fukasawa/style.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    // 底色
+    body{
+        background-color: #eeedee;
+    }
+    .dark body{
+        background-color: black;
+    }
+    
+    /* fukasawa的首页响应式分栏 */
+    #theme-fukasawa .grid-item {
+        height: auto;
+        break-inside: avoid-column;
+        margin-bottom: .5rem;
+    }
+    
+    /* 大屏幕（宽度≥1024px）下显示3列 */
+    @media (min-width: 1024px) {
+        #theme-fukasawa .grid-container {
+        column-count: 3;
+        column-gap: .5rem;
+        }
+    }
+    
+    /* 小屏幕（宽度≥640px）下显示2列 */
+    @media (min-width: 640px) and (max-width: 1023px) {
+        #theme-fukasawa .grid-container {
+        column-count: 2;
+        column-gap: .5rem;
+        }
+    }
+    
+    /* 移动端（宽度<640px）下显示1列 */
+    @media (max-width: 639px) {
+        #theme-fukasawa .grid-container {
+        column-count: 1;
+        column-gap: .5rem;
+        }
+    }
+  `}</style>
+}
+
+export { Style }
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -30,6 +30,7 @@ import TocDrawer from './components/TocDrawer'
 import NotionPage from '@/components/NotionPage'
 import { ArticleLock } from './components/ArticleLock'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 // 主题全局变量
 const ThemeGlobalGitbook = createContext()
@@ -58,6 +59,7 @@ const LayoutBase = (props) => {
  return (
        <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredPostGroups, setFilteredPostGroups, allNavPages, pageNavVisible, changePageNavVisible }}>
            <CommonHead meta={meta} />
+            <Style/>

            <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
                {/* 顶部导航栏 */}
--- a/themes/gitbook/style.js
+++ b/themes/gitbook/style.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/heo/components/AnalyticsCard.js
+++ b/themes/heo/components/AnalyticsCard.js
@@ -0,0 +1,43 @@
+import CONFIG from '../config'
+
+/**
+ * 博客统计卡牌
+ * @param {*} props
+ * @returns
+ */
+export function AnalyticsCard(props) {
+  const targetDate = new Date(CONFIG.SITE_CREATE_TIME)
+  const today = new Date()
+  const diffTime = today.getTime() - targetDate.getTime() // 获取两个日期之间的毫秒数差值
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 将毫秒数差值转换为天数差值
+
+  const { postCount } = props
+  return <>
+        <div className='text-md flex flex-col space-y-1 justify-center px-3'>
+            <div className='inline'>
+                <div className='flex justify-between'>
+                    <div>文章数:</div>
+                    <div>{postCount}</div>
+                </div>
+            </div>
+            <div className='inline'>
+                <div className='flex justify-between'>
+                    <div>建站天数:</div>
+                    <div>{diffDays} 天</div>
+                </div>
+            </div>
+            <div className='hidden busuanzi_container_page_pv'>
+                <div className='flex justify-between'>
+                    <div>访问量:</div>
+                    <div className='busuanzi_value_page_pv' />
+                </div>
+            </div>
+            <div className='hidden busuanzi_container_site_uv'>
+                <div className='flex justify-between'>
+                    <div>访客数:</div>
+                    <div className='busuanzi_value_site_uv' />
+                </div>
+            </div>
+        </div>
+        </>
+}
--- a/themes/heo/components/Announcement.js
+++ b/themes/heo/components/Announcement.js
@@ -0,0 +1,18 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  if (post?.blockMap) {
+    return <div >
+            {post && (
+                <div id="announcement-content">
+                    <NotionPage post={post} />
+                </div>
+            )}
+        </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement
--- a/themes/heo/components/ArticleAdjacent.js
+++ b/themes/heo/components/ArticleAdjacent.js
@@ -0,0 +1,83 @@
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import CONFIG from '../config'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAdjacent({ prev, next }) {
+  const [isScrollEnd, setIsScrollEnd] = useState(false)
+
+  useEffect(() => {
+    // 文章是否已经到了底部
+    const targetElement = document.getElementById('article-end')
+
+    const handleIntersect = (entries) => {
+      entries.forEach((entry) => {
+        console.log(entry.isIntersecting)
+        if (entry.isIntersecting) {
+          setIsScrollEnd(true)
+        } else {
+        //   setIsScrollEnd(false)
+        }
+      })
+    }
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+
+    const observer = new IntersectionObserver(handleIntersect, options)
+    observer.observe(targetElement)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  if (!prev || !next || !CONFIG.ARTICLE_ADJACENT) {
+    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 right-4 bottom-4 duration-200 transition-all ${isScrollEnd ? 'mb-0 opacity-100' : '-mb-24 opacity-0'}`}>
+                <Link
+                    href={`/${next.slug}`}
+                    className='cursor-pointer duration transition-all w-52 h-24 dark:bg-[#1e1e1e] border dark:border-gray-600 p-3 bg-white hover:text-white hover:bg-gray-400 rounded-lg flex flex-col justify-between'
+                >
+                    <div className='text-xs'>下一篇</div>
+                    <hr />
+                    <div>{next?.title}</div>
+                </Link>
+            </div>
+
+        </div>
+  )
+}
--- a/themes/heo/components/ArticleCopyright.js
+++ b/themes/heo/components/ArticleCopyright.js
@@ -0,0 +1,41 @@
+import BLOG from '@/blog.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'
+
+export default function ArticleCopyright () {
+  if (!CONFIG.ARTICLE_COPYRIGHT) {
+    return <></>
+  }
+  const router = useRouter()
+  const [path, setPath] = useState(BLOG.LINK + router.asPath)
+  useEffect(() => {
+    setPath(window.location.href)
+  })
+
+  const { locale } = useGlobal()
+  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">
+        <li>
+          <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
+          <Link href={'/about'} className="hover:underline">
+            {BLOG.AUTHOR}
+          </Link>
+        </li>
+        <li>
+        <strong className='mr-2'>{locale.COMMON.URL}:</strong>
+          <a className="whitespace-normal break-words hover:underline" href={path}>
+            {path}
+          </a>
+        </li>
+        <li>
+          <strong className='mr-2'>{locale.COMMON.COPYRIGHT}:</strong>
+          {locale.COMMON.COPYRIGHT_NOTICE}
+        </li>
+      </ul>
+    </section>
+  );
+}
--- a/themes/heo/components/ArticleLock.js
+++ b/themes/heo/components/ArticleLock.js
@@ -0,0 +1,51 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    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) => {
+              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>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+  </div>
+}
--- a/themes/heo/components/ArticleRecommend.js
+++ b/themes/heo/components/ArticleRecommend.js
@@ -0,0 +1,70 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 关联推荐文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+  const { locale } = useGlobal()
+
+  if (
+    !CONFIG.ARTICLE_RECOMMEND ||
+        !recommendPosts ||
+        recommendPosts.length === 0
+  ) {
+    return <></>
+  }
+
+  return (
+        <div className="pt-8 hidden md:block">
+
+            {/* 推荐文章 */}
+            <div className=" mb-2 px-1 flex flex-nowrap justify-between">
+                <div className='dark:text-gray-300'>
+                    <i className="mr-2 fas fa-thumbs-up" />
+                    {locale.COMMON.RELATE_POSTS}
+                </div>
+            </div>
+
+            {/* 文章列表 */}
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                {recommendPosts.map(post => {
+                  const headerImage = post?.pageCoverThumbnail
+                    ? `url("${post.pageCoverThumbnail}")`
+                    : `url("${siteInfo?.pageCover}")`
+
+                  return (
+                    (<Link
+                            key={post.id}
+                            title={post.title}
+                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            passHref
+                            className="flex h-40 cursor-pointer overflow-hidden rounded-2xl">
+
+                            <div
+                                className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
+                                style={{ backgroundImage: headerImage }}
+                            >
+                                <div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
+                                    <div className=" text-sm  text-white text-center shadow-text">
+                                        <div>
+                                            <i className="fas fa-calendar-alt mr-1" />
+                                            {post.date?.start_date}
+                                        </div>
+                                        <div className="">{post.title}</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </Link>)
+                  )
+                })}
+            </div>
+        </div>
+  )
+}
--- a/themes/heo/components/BlogPostArchive.js
+++ b/themes/heo/components/BlogPostArchive.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import CONFIG from '../config'
+import TagItemMini from './TagItemMini'
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostArchive = ({ posts = [], archiveTitle, siteInfo }) => {
+  if (!posts || posts.length === 0) {
+    return <></>
+  } else {
+    return (
+            <div className=''>
+                <div
+                    className="pb-4 dark:text-gray-300"
+                    id={archiveTitle}
+                >
+                    {archiveTitle}
+                </div>
+                <ul>
+                    {posts?.map(post => {
+                      const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+                      if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+                        post.pageCoverThumbnail = siteInfo?.pageCover
+                      }
+                      const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+                      return <div key={post.id} className={'cursor-pointer flex flex-row mb-4 h-20 md:flex-row group w-full  dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden'}>
+
+                            {/* 图片封面 */}
+                            {showPageCover && (
+                                <div>
+                                    <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                                        <div className={'rounded-xl bg-center bg-cover w-40 h-20'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
+                                    </Link>
+                                </div>
+                            )}
+
+                            {/* 文字区块 */}
+                            <div className={'flex px-2 flex-col justify-between w-full'}>
+                                <div>
+                                    {/* 分类 */}
+                                    {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 `}>
+                                        <Link passHref href={`/category/${post.category}`}
+                                            className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700  dark:text-gray-600 transform">
+                                            {post.category}
+                                        </Link>
+                                    </div>}
+
+                                    {/* 标题 */}
+                                    <Link
+                                        href={`${BLOG.SUB_PATH}/${post.slug}`}
+                                        passHref
+                                        className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 dark:group-hover:text-yellow-600 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
+                                        <span className='menu-link '>{post.title}</span>
+                                    </Link>
+                                </div>
+
+                                {/* 摘要 */}
+                                    <p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
+                                        {post.summary}
+                                    </p>
+
+                                <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                                    <div>
+                                        {' '}
+                                        {post.tagItems?.map(tag => (
+                                            <TagItemMini key={tag.name} tag={tag} />
+                                        ))}
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    })}
+                </ul>
+            </div>
+    )
+  }
+}
+
+export default BlogPostArchive
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -0,0 +1,79 @@
+import Link from 'next/link'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import TagItemMini from './TagItemMini'
+// import Image from 'next/image'
+
+const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
+  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
+  if (post && !post.pageCoverThumbnail && CONFIG.POST_LIST_COVER_DEFAULT) {
+    post.pageCoverThumbnail = siteInfo?.pageCover
+  }
+  const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
+  return (
+        <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
+            <div className={'bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full  dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl  '}>
+
+                {/* 图片封面 */}
+                {showPageCover && (
+                    <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
+                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
+                            <div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
+                        </Link>
+                    </div>
+                )}
+
+                {/* 文字区块 */}
+                <div className={'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl:w-full'}>
+                    <div>
+                        {/* 分类 */}
+                        {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 `}>
+                            <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">
+                                {post.category}
+                            </Link>
+                        </div>}
+
+                        {/* 标题 */}
+                        <Link
+                            href={`${BLOG.SUB_PATH}/${post.slug}`}
+                            passHref
+                            className={' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
+                            <span className='menu-link '>{post.title}</span>
+                        </Link>
+                    </div>
+
+                    {/* 摘要 */}
+                    {(!showPreview || showSummary) && !post.results && (
+                        <p className="line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight">
+                            {post.summary}
+                        </p>
+                    )}
+
+                    {/* 搜索结果 */}
+                    {post.results && (
+                        <p className="line-clamp-2 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            {post.results.map(r => (
+                                <span key={r}>{r}</span>
+                            ))}
+                        </p>
+                    )}
+
+                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                        <div>
+                            {' '}
+                            {post.tagItems?.map(tag => (
+                                <TagItemMini key={tag.name} tag={tag} />
+                            ))}
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
+  )
+}
+
+export default BlogPostCard
--- a/themes/heo/components/BlogPostListEmpty.js
+++ b/themes/heo/components/BlogPostListEmpty.js
@@ -0,0 +1,14 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
+  return <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+        <div className='text-gray-500 dark:text-gray-300'>{locale.COMMON.NO_MORE} {(currentSearch && <div>{currentSearch}</div>)}</div>
+  </div>
+}
+export default BlogPostListEmpty
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import PaginationNumber from './PaginationNumber'
+import BLOG from '@/blog.config'
+import BlogPostListEmpty from './BlogPostListEmpty'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
+  if (!posts || posts.length === 0 || page > totalPage) {
+    return <BlogPostListEmpty />
+  } else {
+    return (
+      <div id="container" className='w-full'>
+        {/* 文章列表 */}
+        <div className="2xl:grid 2xl:grid-cols-2 grid-cols-1 gap-5">
+          {posts?.map(post => (
+            <BlogPostCard index={posts.indexOf(post)} key={post.id} post={post} siteInfo={siteInfo}/>
+          ))}
+        </div>
+        {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
+      </div>
+    )
+  }
+}
+
+export default BlogPostListPage
--- a/themes/heo/components/BlogPostListScroll.js
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -0,0 +1,75 @@
+import BLOG from '@/blog.config'
+import BlogPostCard from './BlogPostCard'
+import BlogPostListEmpty from './BlogPostListEmpty'
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+import { getListByPage } from '@/lib/utils'
+
+/**
+ * 博客列表滚动分页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = CONFIG.POST_LIST_SUMMARY, siteInfo }) => {
+  const postsPerPage = BLOG.POSTS_PER_PAGE
+  const [page, updatePage] = React.useState(1)
+  const postsToShow = getListByPage(posts, page, postsPerPage)
+
+  let hasMore = false
+  if (posts) {
+    const totalCount = posts.length
+    hasMore = page * postsPerPage < totalCount
+  }
+
+  const handleGetMore = () => {
+    if (!hasMore) return
+    updatePage(page + 1)
+  }
+
+  // 监听滚动自动分页加载
+  const scrollTrigger = () => {
+    requestAnimationFrame(() => {
+      const scrollS = window.scrollY + window.outerHeight
+      const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0
+      if (scrollS > clientHeight + 100) {
+        handleGetMore()
+      }
+    })
+  }
+
+  // 监听滚动
+  React.useEffect(() => {
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  })
+
+  const targetRef = React.useRef(null)
+  const { locale } = useGlobal()
+
+  if (!postsToShow || postsToShow.length === 0) {
+    return <BlogPostListEmpty currentSearch={currentSearch} />
+  } else {
+    return <div id='container' ref={targetRef} className='w-full'>
+
+      {/* 文章列表 */}
+      <div className='flex flex-wrap space-y-1 lg:space-y-4 px-2'>
+        {postsToShow.map(post => (
+          <BlogPostCard key={post.id} post={post} showSummary={showSummary} siteInfo={siteInfo}/>
+        ))}
+      </div>
+
+      <div>
+        <div onClick={() => { handleGetMore() }}
+             className='w-full my-4 py-4 text-center cursor-pointer rounded-xl dark:text-gray-200'
+        > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE}`} </div>
+      </div>
+    </div>
+  }
+}
+
+export default BlogPostListScroll
--- a/themes/heo/components/Card.js
+++ b/themes/heo/components/Card.js
@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={`${className || ''} card border dark:border-gray-700 rounded-xl lg:p-6 p-4`}>
+    <>{headerSlot}</>
+    <section>
+        {children}
+    </section>
+  </div>
+}
+export default Card
--- a/themes/heo/components/Catalog.js
+++ b/themes/heo/components/Catalog.js
@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import Progress from './Progress'
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  const { locale } = useGlobal()
+  // 监听滚动事件
+  React.useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = React.useState(null)
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
+    const sections = document.getElementsByClassName('notion-h')
+    let prevBBox = null
+    let currentSectionId = activeSection
+    for (let i = 0; i < sections.length; ++i) {
+      const section = sections[i]
+      if (!section || !(section instanceof Element)) continue
+      if (!currentSectionId) {
+        currentSectionId = section.getAttribute('data-id')
+      }
+      const bbox = section.getBoundingClientRect()
+      const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+      const offset = Math.max(150, prevHeight / 4)
+      // GetBoundingClientRect returns values relative to viewport
+      if (bbox.top - offset < 0) {
+        currentSectionId = section.getAttribute('data-id')
+        prevBBox = bbox
+        continue
+      }
+      // No need to continue loop, if last element has been detected
+      break
+    }
+    setActiveSection(currentSectionId)
+    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 py-1 dark:text-white text-black'>
+    <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+    <div className='w-full py-3'>
+      <Progress />
+    </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) => {
+          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
+            notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
+            >
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
+                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
+              >
+                {tocItem.text}
+              </span>
+            </a>
+          )
+        })}
+      </nav>
+
+    </div>
+  </div>
+}
+
+export default Catalog
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -0,0 +1,41 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 博客列表上方嵌入条
+ * @param {*} props
+ * @returns
+ */
+export default function CategoryBar(props) {
+  const { categoryOptions, border = true } = props
+  const { locale } = useGlobal()
+
+  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' className='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'>
+            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
+                {locale.COMMON.MORE}
+            </Link>
+        </div>
+    </div>
+}
+
+/**
+ * 按钮
+ * @param {*} param0
+ * @returns
+ */
+const MenuItem = ({ href, name }) => {
+  const router = useRouter()
+  const selected = router.pathname === href
+  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>
+}
--- a/themes/heo/components/CategoryGroup.js
+++ b/themes/heo/components/CategoryGroup.js
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React from 'react'
+
+const CategoryGroup = ({ currentCategory, categories }) => {
+  if (!categories) {
+    return <></>
+  }
+  return <>
+    <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
+      {categories.map(category => {
+        const selected = currentCategory === category.name
+        return (
+          <Link
+            key={category.name}
+            href={`/category/${category.name}`}
+            passHref
+            className={(selected
+              ? 'hover:text-white dark:hover:text-white bg-indigo-600 text-white '
+              : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-indigo-600') +
+              '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
+
+            <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
+
+          </Link>
+        )
+      })}
+    </div>
+  </>
+}
+
+export default CategoryGroup
--- a/themes/heo/components/FloatDarkModeButton.js
+++ b/themes/heo/components/FloatDarkModeButton.js
@@ -0,0 +1,31 @@
+import { useGlobal } from '@/lib/global'
+import { saveDarkModeToCookies } from '@/themes/theme'
+import CONFIG from '../config'
+
+export default function FloatDarkModeButton () {
+  const { isDarkMode, updateDarkMode } = useGlobal()
+
+  if (!CONFIG.WIDGET_DARK_MODE) {
+    return <></>
+  }
+
+  // 用户手动设置主题
+  const handleChangeDarkMode = () => {
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+  }
+
+  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`}/>
+    </div>
+  )
+}
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import SocialButton from './SocialButton'
+// import DarkModeButton from '@/components/DarkModeButton'
+
+const Footer = ({ title }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const copyrightDate = (function () {
+    if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
+      return BLOG.SINCE + '-' + currentYear
+    }
+    return currentYear
+  })()
+
+  return (
+        <footer
+            className='relative z-10 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>
+
+            {/* 社交按钮 */}
+            <div className='w-full h-24'>
+                <SocialButton />
+            </div>
+
+            <br />
+
+{/* 底部页面信息 */}
+            <div id='footer-bottom' className='w-full h-20 flex justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
+                <div id='footer-bottom-left'>
+                    <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+                </div>
+
+                <div id='footer-bottom-right'>
+                    {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.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 text-light-400 dark:text-gray-400'>{title} | {BLOG.BIO}</h1>
+
+                </div>
+            </div>
+        </footer>
+  )
+}
+
+export default Footer
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -0,0 +1,251 @@
+// import Image from 'next/image'
+
+import BLOG from '@/blog.config'
+import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import CONFIG from '../config'
+import { useGlobal } from '@/lib/global'
+import { Transition } from '@headlessui/react'
+
+/**
+ * 顶部英雄区
+ * 左右布局，
+ * 左侧：banner组
+ * 右侧：今日卡牌遮罩
+ * @returns
+ */
+const Hero = props => {
+  const { onLoading } = useGlobal()
+  return (
+        <div id="hero-wrapper" className='recent-top-post-group w-full overflow-hidden select-none px-5 mb-4'>
+            <Transition
+                show={!onLoading}
+                appear={true}
+                enter="transition ease-in-out duration-700 transform order-first"
+                enterFrom="opacity-0 -translate-y-16"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in-out duration-300 transform"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-16"
+                unmount={false}
+            >
+                <hero id="hero" style={{ zIndex: 1 }} className="recent-post-top rounded-[12px] 2xl:px-5 recent-top-post-group max-w-[86rem] overflow-x-scroll w-full mx-auto flex-row flex-nowrap flex relative space-x-3" >
+                    {/* 左侧banner组 */}
+                    <BannerGroup {...props} />
+
+                    {/* 右侧置顶文章组 */}
+                    <TopGroup {...props} />
+                </hero>
+            </Transition>
+        </div>
+  )
+}
+
+/**
+ * 英雄区左侧banner组
+ * @returns
+ */
+function BannerGroup(props) {
+  return (
+        // 左侧英雄区
+        <div id='bannerGroup' className='flex flex-col justify-between flex-1 mr-2 max-w-[42rem]'>
+            {/* 动图 */}
+            <Banner {...props} />
+            {/* 导航分类 */}
+            <GroupMenu />
+        </div>
+  )
+}
+
+/**
+ * 英雄区左上角banner动图
+ * @returns
+ */
+function Banner(props) {
+  const router = useRouter()
+  const { latestPosts } = props
+  // 跳转到任意文章
+  function handleClickBanner() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(randomPost.slug)
+  }
+
+  return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
+
+        <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
+            <div className='text-4xl font-bold mb-3  dark:text-white'>分享编程<br />与思维认知</div>
+            <div className='text-xs text-gray-600  dark:text-gray-200'>TANGLY1024.COM</div>
+        </div>
+
+        {/* 斜向滚动的图标 */}
+        <TagsGroupBar />
+
+        {/* 遮罩 */}
+        <div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
+            <div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
+                <div className='text-7xl text-white font-extrabold'>随便逛逛</div>
+                <div className='-ml-3 text-gray-300'><ArrowSmallRight className={'w-24 h-24 stroke-2'} /></div>
+            </div>
+        </div>
+
+    </div>
+}
+
+/**
+ * 图标滚动标签组
+ * 英雄区左上角banner条中斜向滚动的图标
+ */
+function TagsGroupBar() {
+  const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
+  return (
+        <div className="tags-group-all flex -rotate-[30deg]">
+            <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
+                {groupIcons?.map(g => {
+                  return (<>
+                        <div className="tags-group-icon-pair ml-6 select-none">
+                            <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img src={g.img_1} title={g.title_1} className='w-2/3' />
+                            </div>
+                            <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img src={g.img_2} title={g.title_2} className='w-2/3' />
+                            </div>
+                        </div>
+                    </>)
+                })}
+            </div>
+        </div>
+  )
+}
+
+/**
+ * 英雄区左下角3个分类按钮
+ * @returns
+ */
+function GroupMenu() {
+  return (
+        <div className="h-[165px] select-none  xl:h-20 flex flex-col w-48 justify-between xl:space-y-0 xl:flex-row xl:w-full xl:flex-nowrap xl:space-x-3">
+            <Link href="/tag/必看精选" 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 text-lg pl-5 relative -mt-2">
+                    必看精选
+                    <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'>
+                    <i class="fa-solid fa-star text-4xl"></i>
+                </div>
+            </Link>
+            <Link href="/tag/热门文章" 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 text-lg pl-5 relative -mt-2">
+                    热门文章
+                    <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'>
+                    <i class="fa-solid fa-fire-flame-curved text-4xl"></i>
+                </div>
+            </Link>
+            {/* 第三个标签在小屏上不显示 */}
+            <Link href="/tag/实用教程" 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">
+                    实用教程
+                    <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'>
+                    <i class="fa-solid fa-book-bookmark text-4xl "></i>
+                </div>
+
+            </Link>
+        </div>
+  )
+}
+
+/**
+ * 置顶文章区域
+ */
+function TopGroup(props) {
+  const { latestPosts, siteInfo } = props
+  const todayCardRef = useRef()
+  function handleMouseLeave() {
+    todayCardRef.current.coverUp()
+  }
+  return (
+        <div id='hero-right-wrapper' onMouseLeave={handleMouseLeave} className='flex-1 relative w-full'>
+            {/* 制定最新文章 */}
+            <div id='top-group' className='w-full flex space-x-3 xl:space-x-0 xl:grid xl:grid-cols-3 xl:gap-3'>
+                {latestPosts?.map(p => {
+                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={p.id}>
+                        <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
+                            {/* eslint-disable-next-line */}
+                            <img className='h-24 object-cover' src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
+                            <div className='group-hover:text-indigo-600 group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</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'>
+                                荐
+                            </div>
+                        </div>
+                    </Link>
+                })}
+            </div>
+            <TodayCard cRef={todayCardRef} />
+        </div>
+  )
+}
+
+/**
+ * 英雄区右侧，今日卡牌
+ * @returns
+ */
+function TodayCard({ cRef }) {
+  const router = useRouter()
+  // 卡牌是否盖住下层
+  const [isCoverUp, setIsCoverUp] = useState(true)
+
+  /**
+                     * 外部可以调用此方法
+                     */
+  useImperativeHandle(cRef, () => {
+    return {
+      coverUp: () => {
+        setIsCoverUp(true)
+      }
+    }
+  })
+
+  /**
+     * 点击更多
+     * @param {*} e
+     */
+  function handleClickMore(e) {
+    e.stopPropagation()
+    setIsCoverUp(false)
+  }
+
+  /**
+                   * 点击卡片跳转的链接
+                   * @param {*} e
+                   */
+  function handleCardClick(e) {
+    router.push('https://tangly1024.com')
+  }
+
+  return <div id='today-card' className={`${isCoverUp ? ' ' : 'pointer-events-none'} overflow-hidden absolute hidden xl:flex flex-1 flex-col h-full top-0 w-full`}>
+        <div id='card-body' onClick={handleCardClick} className={`${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`}>
+            <div id='today-card-info' className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
+                <div className='flex flex-col'>
+                    <div className='text-xs font-light'>新版上线</div>
+                    <div className='text-3xl font-bold'>NotionNext4.0 轻松定制主题</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`}>
+                    <PlusSmall className={'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400'} />
+                    <div id='more' className='select-none'>更多推荐</div>
+                </div>
+            </div>
+            <div id='today-card-cover' className={`${isCoverUp ? '' : ' pointer-events-none'} cursor-pointer today-card-cover absolute w-full h-full top-0`} style={{ background: "url('https://bu.dusays.com/2023/03/12/640dcd3a1b146.png') no-repeat center /cover" }}></div>
+        </div>
+    </div>
+}
+
+export default Hero
--- a/themes/heo/components/HexoRecentComments.js
+++ b/themes/heo/components/HexoRecentComments.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+import Card from '@/themes/hexo/components/Card'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { RecentComments } from '@waline/client'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const HexoRecentComments = (props) => {
+  const [comments, updateComments] = React.useState([])
+  const { locale } = useGlobal()
+  const [onLoading, changeLoading] = React.useState(true)
+  React.useEffect(() => {
+    RecentComments({
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+      count: 5
+    }).then(({ comments }) => {
+      changeLoading(false)
+      updateComments(comments)
+    })
+  }, [])
+
+  return (
+        <Card >
+            <div className=" mb-2 px-1 justify-between">
+                <i className="mr-2 fas fas fa-comment" />
+                {locale.COMMON.RECENT_COMMENTS}
+            </div>
+
+            {onLoading && <div>Loading...<i className='ml-2 fas fa-spinner animate-spin' /></div>}
+            {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
+            {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
+                <div className='dark:text-gray-200 text-sm waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
+                <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1 pr-2'>
+                    <Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
+                </div>
+            </div>)}
+
+        </Card>
+  )
+}
+
+export default HexoRecentComments
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -0,0 +1,87 @@
+import BLOG from '@/blog.config'
+import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import CONFIG from '../config'
+import Announcement from './Announcement'
+import Card from './Card'
+
+/**
+ * 社交信息卡
+ * @param {*} props
+ * @returns
+ */
+export function InfoCard(props) {
+  const { siteInfo, notice } = props
+  const router = useRouter()
+  // 在文章详情页特殊处理
+  const isSlugPage = router.pathname === '/[...slug]'
+
+  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-5 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
+                </div>
+            </div>
+
+            <h2 className='text-3xl font-extrabold mt-3'>
+                {BLOG.AUTHOR}
+            </h2>
+
+            {/* 公告栏 */}
+            <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'>
+                        <Link href='https://github.com/tangly1024/NotionNext'><i className='fab fa-github text-xl' />
+                        </Link>
+                    </div>
+                </div>
+                <MoreButton />
+            </div>
+        </Card>
+  )
+}
+
+/**
+ * 欢迎语
+ */
+function GreetingsWords() {
+  const greetings = CONFIG.INFOCARD_GREETINGS
+  const [greeting, setGreeting] = useState(greetings[0])
+  // 每次点击，随机获取greetings中的一个
+  const handleChangeGreeting = () => {
+    const randomIndex = Math.floor(Math.random() * greetings.length)
+    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}
+    </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>
+}
--- a/themes/heo/components/JumpToCommentButton.js
+++ b/themes/heo/components/JumpToCommentButton.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到评论区
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToCommentButton = () => {
+  if (!CONFIG.WIDGET_TO_COMMENT) {
+    return <></>
+  }
+
+  function navToComment() {
+    if (document.getElementById('comment')) {
+      window.scrollTo({ top: document.getElementById('comment').offsetTop, behavior: 'smooth' })
+    }
+    // 兼容性不好
+    // const commentElement = document.getElementById('comment')
+    // if (commentElement) {
+    // 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>)
+}
+
+export default JumpToCommentButton
--- a/themes/heo/components/JumpToTopButton.js
+++ b/themes/heo/components/JumpToTopButton.js
@@ -0,0 +1,25 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = true, percent }) => {
+  const { locale } = useGlobal()
+
+  if (!CONFIG.WIDGET_TO_TOP) {
+    return <></>
+  }
+  return (<div className='space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-auto pb-1 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
+        <div title={locale.POST.TOP} ><i className='fas fa-arrow-up text-xs' /></div>
+        {showPercent && (<div className='text-xs hidden lg:block'>{percent}</div>)}
+    </div>)
+}
+
+export default JumpToTopButton
--- a/themes/heo/components/LatestPostsGroup.js
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -0,0 +1,50 @@
+import BLOG from '@/blog.config'
+// import Image from 'next/image'
+import Link from 'next/link'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
+  // 获取当前路径
+
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return <div className='grid grid-cols-2 gap-4'>
+        {latestPosts.map(post => {
+          const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+          return (
+            (<Link key={post.id} passHref
+                    title={post.title}
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+
+                    className={'my-3 flex flex-col w-full'}>
+
+                    <div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={`${headerImage}`} className='object-cover w-full h-full' />
+                    </div>
+
+                    <div
+                        className={
+                            ' font-bold  overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
+                            ' hover:text-indigo-400 cursor-pointer'
+                        }
+                    >
+
+                        <div className='line-clamp-2 menu-link'>{post.title}</div>
+
+                    </div>
+
+                </Link>)
+          )
+        })}
+    </div>
+}
+export default LatestPostsGroup
--- a/themes/heo/components/LatestPostsGroupMini.js
+++ b/themes/heo/components/LatestPostsGroupMini.js
@@ -0,0 +1,63 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale } = useGlobal()
+
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return <>
+        <div className=" mb-2 px-1 flex flex-nowrap justify-between">
+            <div>
+                <i className="mr-2 fas fas fa-history" />
+                {locale.COMMON.LATEST_POSTS}
+            </div>
+        </div>
+        {latestPosts.map(post => {
+          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
+
+          return (
+            (<Link
+                    key={post.id}
+                    title={post.title}
+                    href={`${BLOG.SUB_PATH}/${post.slug}`}
+                    passHref
+                    className={'my-3 flex'}>
+
+                    <div className="w-20 h-14 overflow-hidden relative">
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={`${headerImage}`} className='object-cover w-full h-full rounded-lg'/>
+                    </div>
+                    <div
+                        className={
+                            (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
+                            ' 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'
+                        }
+                    >
+                        <div>
+                            <div className='line-clamp-2 menu-link'>{post.title}</div>
+                            <div className="text-gray-500">{post.lastEditedTime}</div>
+                        </div>
+                    </div>
+
+                </Link>)
+          )
+        })}
+    </>
+}
--- a/themes/heo/components/LoadingCover.js
+++ b/themes/heo/components/LoadingCover.js
@@ -0,0 +1,8 @@
+export default function LoadingCover () {
+  return (<div id="loading-cover" className={'md:-mt-20 flex-grow dark:text-white text-black animate__animated animate__fadeIn flex flex-col justify-center z-50 w-full h-screen container mx-auto'}>
+  <div className="mx-auto">
+    <i className="fas fa-spinner animate-spin"/>
+  </div>
+</div>
+  )
+}
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -0,0 +1,25 @@
+import BLOG from '@/blog.config'
+import { Home } from '@/components/HeroIcons'
+import Link from 'next/link'
+import React from 'react'
+
+const Logo = props => {
+  const { siteInfo } = props
+  return (
+        <Link href='/' passHref legacyBehavior>
+            <div className='flex justify-center items-center cursor-pointer font-extrabold'>
+                {/*  eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
+                <div id='logo-text' className='group rounded-2xl flex relative'>
+                    <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
+                        {siteInfo?.title || BLOG.TITLE}
+                    </div>
+                    <div className='flex rounded-2xl group-hover:absolute group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute justify-center px-8 py-1 duration-200'>
+                        <Home className={'w-6 h-6 stroke-white stroke-2 '}/>
+                    </div>
+                </div>
+            </div>
+        </Link>
+  )
+}
+export default Logo
--- a/themes/heo/components/MenuGroupCard.js
+++ b/themes/heo/components/MenuGroupCard.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+const MenuGroupCard = (props) => {
+  const { postCount, categoryOptions, tagOptions } = props
+  const { locale } = useGlobal()
+  const archiveSlot = <div className='text-center'>{postCount}</div>
+  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
+
+  const links = [
+    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
+    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+  ]
+
+  return (
+        <nav id='nav' className='dark:text-gray-200 w-full px-5'>
+            {links.map((link, index) => {
+              if (link.show) {
+                return (
+                        <div key={index} className=''>
+                            <Link title={link.to}
+                                href={link.to}
+                                target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
+                                className={'w-full flex items-center justify-between py-1 hover:scale-105 duration-200 transform dark:hover:text-indigo-400 hover:text-indigo-600 px-2 cursor-pointer'}>
+                                <>
+                                    <div>{link.name} :</div>
+                                    <div className='font-semibold'>{link.slot}</div>
+                                </>
+                            </Link>
+                        </div>
+
+                )
+              } else {
+                return null
+              }
+            })}
+        </nav>
+  )
+}
+export default MenuGroupCard
--- a/themes/heo/components/MenuItemCollapse.js
+++ b/themes/heo/components/MenuItemCollapse.js
@@ -0,0 +1,54 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <>
+        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
+            {!hasSubMenu && <Link
+                href={link?.to}
+                className="font-extralight  flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+            </Link>}
+            {hasSubMenu && <div
+                onClick={hasSubMenu ? toggleOpenSubMenu : null}
+                className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
+                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
+                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+            </div>}
+        </div>
+
+        {/* 折叠子菜单 */}
+        {hasSubMenu && <Collapse isOpen={isOpen}>
+            {link.subMenus.map(sLink => {
+              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 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.to}>
+                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
+                    </Link>
+                </div>
+            })}
+        </Collapse>}
+    </>
+}
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {/* 不含子菜单 */}
+        {!hasSubMenu &&
+            <Link
+                href={link?.to}
+                className="font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest">
+                {link?.icon && <i className={link?.icon} />} {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>}
+
+        {/* 含子菜单的按钮 */}
+        {hasSubMenu && <>
+            <div className='cursor-pointer font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
+                {link?.icon && <i className={link?.icon} />} {link?.name}
+            </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`}>
+            {link.subMenus.map((sLink, index) => {
+              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
+                    <Link href={sLink.to}>
+                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
+                    </Link>
+                </li>
+            })}
+        </ul>}
+
+    </div>
+}
--- a/themes/heo/components/MenuListSide.js
+++ b/themes/heo/components/MenuListSide.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import CONFIG from '../config'
+
+export const MenuListSide = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = customNav.concat(links)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+        <nav>
+            {/* {links.map(link => <MenuItemNormal key={link?.id} link={link} />)} */}
+            {links?.map(link => <MenuItemCollapse key={link?.id} link={link} />)}
+        </nav>
+  )
+}
--- a/themes/heo/components/MenuListTop.js
+++ b/themes/heo/components/MenuListTop.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+import BLOG from '@/blog.config'
+import { MenuItemDrop } from './MenuItemDrop'
+
+export const MenuListTop = (props) => {
+  const { customNav, customMenu } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    { id: 1, icon: 'fa-solid fa-house', name: locale.NAV.INDEX, to: '/', show: CONFIG.MENU_INDEX },
+    { id: 2, icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE }
+    // { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
+    // { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <nav id='nav-mobile' className='leading-8 justify-center font-light w-full flex'>
+            {links?.map(link => link && link.show && <MenuItemDrop key={link?.id} link={link} />)}
+        </nav>
+    </>)
+}
--- a/themes/heo/components/NavBar.js
+++ b/themes/heo/components/NavBar.js
@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Logo from './Logo'
+
+import { MenuListTop } from './MenuListTop'
+import throttle from 'lodash.throttle'
+import RandomPostButton from './RandomPostButton'
+import SearchButton from './SearchButton'
+import SlideOver from './SlideOver'
+import ReadingProgress from './ReadingProgress'
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const NavBar = props => {
+  const [fixedNav, setFixedNav] = useState(false)
+  const [textWhite, setTextWhite] = useState(false)
+  const [navBgWhite, setBgWhite] = useState(false)
+  const slideOverRef = useRef()
+
+  const toggleMenuOpen = () => {
+    slideOverRef?.current?.toggleSlideOvers()
+  }
+
+  // 监听滚动
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const throttleMs = 200
+
+  /**
+   * 根据滚动条，切换导航栏样式
+   */
+  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)
+    }
+  }, throttleMs))
+
+  return (<>
+        {/* 顶部导航菜单栏 */}
+        <nav id='nav' className={`${fixedNav ? 'fixed' : 'relative bg-none'} ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  ${navBgWhite ? 'bg-white dark:bg-[#18171d]' : 'bg-none'} z-20 h-16 top-0 w-full`}>
+            <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
+                {/* 左侧logo */}
+                <div className='flex'>
+                    <Logo {...props} />
+                </div>
+
+                {/* 中间菜单 */}
+                <div className='mr-1 justify-end items-center hidden lg:block'>
+                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
+                </div>
+
+                {/* 右侧固定 */}
+                <div className='flex justify-center items-center space-x-1'>
+                    <RandomPostButton {...props} />
+                    <SearchButton />
+                    <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
--- a/themes/heo/components/NavButtonGroup.js
+++ b/themes/heo/components/NavButtonGroup.js
@@ -0,0 +1,33 @@
+
+import React from 'react'
+import Link from 'next/link'
+
+/**
+ * 首页导航大按钮组件
+ * @param {*} props
+ * @returns
+ */
+const NavButtonGroup = (props) => {
+  const { categoryOptions } = props
+  if (!categoryOptions || categoryOptions.length === 0) {
+    return <></>
+  }
+
+  return (
+    <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-5xl space-y-2 md:space-y-1 md:flex justify-center max-h-80 overflow-auto'}>
+      {categoryOptions.map(category => {
+        return (
+          <Link
+            key={`${category.name}`}
+            title={`${category.name}`}
+            href={`/category/${category.name}`}
+            passHref
+            className='text-center w-full sm:w-4/5 md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 font-bold hover:scale-105 transform'>
+                {category.name}
+            </Link>
+        )
+      })}
+    </nav>
+  )
+}
+export default NavButtonGroup
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -0,0 +1,37 @@
+
+import { ArrowRightCircle } from '@/components/HeroIcons'
+import CONFIG from '../config'
+import Swipe from './Swipe'
+
+/**
+ * 通知横幅
+ */
+export function NoticeBar() {
+  const notices = CONFIG.NOTICE_BAR
+
+  if (!notices || notices?.length === 0) {
+    return <></>
+  }
+
+  return (
+        <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
+            <div className="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>
+        </notice>
+  )
+}
+
+/**
+ *  {notices?.map((n, index) => {
+              return <Link key={index} href={n.url} className="bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
+                    <span className='whitespace-nowrap'>{n.category}</span>
+                    <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">{n.title}</div>
+                    <div><ArrowRightCircle className={'w-5 h-5'} /></div>
+                </Link>
+            })}
+ */
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -0,0 +1,160 @@
+import { ChevronDoubleRight } from '@/components/HeroIcons'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 数字翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationNumber = ({ page, totalPage }) => {
+  const router = useRouter()
+  const { locale } = useGlobal()
+  const currentPage = +page
+  const showNext = page < totalPage
+  const pagePrefix = router.asPath.split('?')[0].replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
+  const pages = generatePages(pagePrefix, page, currentPage, totalPage)
+
+  const [value, setValue] = useState('')
+
+  const handleInputChange = (event) => {
+    const newValue = event.target.value.replace(/[^0-9]/g, '')
+    setValue(newValue)
+  }
+
+  /**
+     * 调到指定页
+     */
+  const jumpToPage = () => {
+    if (value) {
+      router.push(value === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${value}`)
+    }
+  }
+
+  return (
+        <div className="mt-10 mb-5 flex justify-between items-end font-medium text-black duration-500 dark:text-gray-300 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'}`}>
+                <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">
+                        {locale.PAGINATION.PREV}
+                    </div>
+                </div>
+
+            </Link>
+
+            {/* 分页 */}
+            <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'>
+                    <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>
+                    <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'>
+                        <ChevronDoubleRight className={'w-4 h-4'} />
+                    </div>
+                </div>
+            </div>
+
+            {/* 下一页 */}
+            <Link
+                href={{
+                  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">
+                        {locale.PAGINATION.NEXT}
+                    </div>
+                </div>
+            </Link>
+        </div>
+  )
+}
+
+/**
+ * 页码按钮
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} pagePrefix
+ * @returns
+ */
+function getPageElement(page, currentPage, pagePrefix) {
+  const selected = page + '' === currentPage + ''
+  return (
+    (<Link
+            href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
+            key={page}
+            passHref
+            className={
+                (selected
+                  ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
+                  : 'dark:bg-[#1e1e1e]') +
+                ' 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>)
+  )
+}
+
+/**
+ * 获取所有页码
+ * @param {*} pagePrefix
+ * @param {*} page
+ * @param {*} currentPage
+ * @param {*} totalPage
+ * @returns
+ */
+function generatePages(pagePrefix, page, currentPage, totalPage) {
+  const pages = []
+  const groupCount = 7 // 最多显示页签数
+  if (totalPage <= groupCount) {
+    for (let i = 1; i <= totalPage; i++) {
+      pages.push(getPageElement(i, page, pagePrefix))
+    }
+  } else {
+    pages.push(getPageElement(1, page, pagePrefix))
+    const dynamicGroupCount = groupCount - 2
+    let startPage = currentPage - 2
+    if (startPage <= 1) {
+      startPage = 2
+    }
+    if (startPage + dynamicGroupCount > totalPage) {
+      startPage = totalPage - dynamicGroupCount
+    }
+    if (startPage > 2) {
+      pages.push(<div key={-1} className='-mt-2 mx-1'>... </div>)
+    }
+
+    for (let i = 0; i < dynamicGroupCount; i++) {
+      if (startPage + i < totalPage) {
+        pages.push(getPageElement(startPage + i, page, pagePrefix))
+      }
+    }
+
+    if (startPage + dynamicGroupCount < totalPage) {
+      pages.push(<div key={-2}>... </div>)
+    }
+
+    pages.push(getPageElement(totalPage, page, pagePrefix))
+  }
+  return pages
+}
+export default PaginationNumber
--- a/themes/heo/components/PostHeader.js
+++ b/themes/heo/components/PostHeader.js
@@ -0,0 +1,100 @@
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import NotionIcon from '@/components/NotionIcon'
+import WavesArea from './WavesArea'
+import { HashTag } from '@/components/HeroIcons'
+import WordCount from '@/components/WordCount'
+
+export default function PostHeader({ post, siteInfo }) {
+  if (!post) {
+    return <></>
+  }
+  // 文章头图
+  const headerImage = post?.pageCover ? post.pageCover : siteInfo?.pageCover
+
+  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 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 translate-x-96 loaded opacity-50 rotate-12'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img 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 -mt-12 w-full max-w-[86rem] px-5'>
+                    {/* 分类+标签 */}
+                    <div className='mb-4 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 => (
+                                    <Link
+                                        key={tag}
+                                        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 my-4 font-bold text-3xl lg:text-5xl md:leading-snug shadow-text-md flex  justify-center md:justify-start text-white">
+                        <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#${post?.publishTime?.substr(0, 7)}`}
+                                        passHref
+                                        className="pl-1 mr-2 cursor-pointer hover:underline">
+                                        <i className="fa-solid fa-calendar-days"></i> {post?.publishTime}
+                                    </Link>
+                                </>
+                            )}
+
+                        </div>
+
+                        {BLOG.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>
+  )
+}
--- a/themes/heo/components/Progress.js
+++ b/themes/heo/components/Progress.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 顶部页面阅读进度条
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Progress = ({ targetRef, showPercent = true }) => {
+  const currentRef = targetRef?.current || targetRef
+  const [percent, changePercent] = useState(0)
+  const scrollListener = () => {
+    const target = currentRef || (isBrowser() && document.getElementById('article-wrapper'))
+    if (target) {
+      const clientHeight = target.clientHeight
+      const scrollY = window.pageYOffset
+      const fullHeight = clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
+      if (per > 100) per = 100
+      if (per < 0) per = 0
+      changePercent(per)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  return (
+    <div className="h-4 w-full shadow-2xl bg-gray-700 rounded-sm">
+      <div
+        className="h-4 bg-indigo-600 duration-200 rounded-sm"
+        style={{ width: `${percent}%` }}
+      >
+        {showPercent && (
+          <div className="text-right text-white text-xs">{percent}%</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Progress
--- a/themes/heo/components/RandomPostButton.js
+++ b/themes/heo/components/RandomPostButton.js
@@ -0,0 +1,19 @@
+import { useRouter } from 'next/router'
+
+/**
+ * 随机跳转到一个文章
+ */
+export default function RandomPostButton(props) {
+  const { latestPosts } = props
+  const router = useRouter()
+  function handleClick() {
+    const randomIndex = Math.floor(Math.random() * latestPosts.length)
+    const randomPost = latestPosts[randomIndex]
+    router.push(randomPost.slug)
+  }
+  return (
+        <div title={'随机前往一篇文章'} 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>
+  )
+}
--- a/themes/heo/components/ReadingProgress.js
+++ b/themes/heo/components/ReadingProgress.js
@@ -0,0 +1,42 @@
+import { ArrowSmallUp } from '@/components/HeroIcons'
+import { useEffect, useState } from 'react'
+
+/**
+ * 回顶按钮
+ * @returns
+ */
+export default function ReadingProgress() {
+  const [scrollPercentage, setScrollPercentage] = useState(0)
+  useEffect(() => {
+    let requestId
+
+    function handleScroll() {
+      const scrollHeight = document.documentElement.scrollHeight
+      const clientHeight = document.documentElement.clientHeight
+      const scrollY = window.scrollY || window.pageYOffset
+
+      const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
+      setScrollPercentage(percent)
+
+      requestId = requestAnimationFrame(handleScroll)
+    }
+
+    handleScroll() // 初始化滚动位置
+
+    return () => {
+      cancelAnimationFrame(requestId)
+    }
+  }, [])
+
+  return (<>
+        <div title={'阅读进度'}
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            className={`${scrollPercentage > 0 ? 'w-10 h-10 ' : 'w-0 h-0 opacity-0'} group cursor-pointer  hover:bg-black hover:bg-opacity-10 rounded-full flex justify-center items-center duration-200 transition-all`} >
+            <ArrowSmallUp className={'w-5 h-5 hidden group-hover:block'} />
+            <div className='group-hover:hidden text-xs flex justify-center items-center rounded-full w-6 h-6 bg-black text-white'>
+                {scrollPercentage < 100 ? scrollPercentage : <ArrowSmallUp className={'w-5 h-5 fill-white'} />}
+            </div>
+        </div>
+
+    </>)
+}
--- a/themes/heo/components/RightFloatArea.js
+++ b/themes/heo/components/RightFloatArea.js
@@ -0,0 +1,42 @@
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useState } from 'react'
+import FloatDarkModeButton from './FloatDarkModeButton'
+import JumpToTopButton from './JumpToTopButton'
+
+/**
+ * 悬浮在右下角的按钮，当页面向下滚动100px时会出现
+ * @param {*} param0
+ * @returns
+ */
+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
+
+    // 右下角显示悬浮按钮
+    if (shouldShow !== showFloatButton) {
+      switchShow(shouldShow)
+    }
+  }, 200))
+
+  useEffect(() => {
+    document.addEventListener('scroll', scrollListener)
+    return () => document.removeEventListener('scroll', scrollListener)
+  }, [])
+
+  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>
+  )
+}
--- a/themes/heo/components/SearchButton.js
+++ b/themes/heo/components/SearchButton.js
@@ -0,0 +1,7 @@
+import Link from 'next/link'
+
+export default function SearchButton() {
+  return <Link href="/search" 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'>
+    <i className="fa-solid fa-magnifying-glass"></i>
+</Link>
+}
--- a/themes/heo/components/SearchDrawer.js
+++ b/themes/heo/components/SearchDrawer.js
@@ -0,0 +1,36 @@
+import { Router } from 'next/router'
+import { useImperativeHandle, useRef } from 'react'
+import SearchInput from './SearchInput'
+const SearchDrawer = ({ cRef, slot }) => {
+  const searchDrawer = useRef()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      show: () => {
+        searchDrawer?.current?.classList?.remove('hidden')
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+  const hidden = () => {
+    searchDrawer?.current?.classList?.add('hidden')
+  }
+  Router.events.on('routeChangeComplete', (...args) => {
+    hidden()
+  })
+  return (
+    <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
+      <div className='flex-col fixed px-5 w-full left-0 top-14 z-40 justify-center'>
+          <div className='md:max-w-3xl w-full mx-auto animate__animated animate__faster animate__fadeIn'>
+            <SearchInput cRef={searchInputRef} />
+            {slot}
+          </div>
+      </div>
+
+      {/* 背景蒙版 */}
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-40 w-full h-full' />
+    </div>
+  )
+}
+
+export default SearchDrawer
--- a/themes/heo/components/SearchInput.js
+++ b/themes/heo/components/SearchInput.js
@@ -0,0 +1,106 @@
+import { useRouter } from 'next/router'
+import { useImperativeHandle, useRef, useState } from 'react'
+import { useGlobal } from '@/lib/global'
+let lock = false
+
+const SearchInput = props => {
+  const { currentSearch, cRef, className } = props
+  const [onLoading, setLoadingState] = useState(false)
+  const router = useRouter()
+  const searchInputRef = useRef()
+  const { locale } = useGlobal()
+  useImperativeHandle(cRef, () => {
+    return {
+      focus: () => {
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
+    if (key && key !== '') {
+      setLoadingState(true)
+      router.push({ pathname: '/search/' + key }).then(r => {
+        setLoadingState(false)
+      })
+      // location.href = '/search/' + key
+    } else {
+      router.push({ pathname: '/' }).then(r => {})
+    }
+  }
+  const handleKeyUp = e => {
+    if (e.keyCode === 13) {
+      // 回车
+      handleSearch(searchInputRef.current.value)
+    } else if (e.keyCode === 27) {
+      // ESC
+      cleanSearch()
+    }
+  }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+  }
+
+  const [showClean, setShowClean] = useState(false)
+  const updateSearchKey = val => {
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
+  }
+  function lockSearchInput () {
+    lock = true
+  }
+
+  function unLockSearchInput () {
+    lock = false
+  }
+
+  return (
+    <div className={'flex w-full rounded-lg ' + className}>
+      <input
+        ref={searchInputRef}
+        type="text"
+        className={
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-white dark:bg-gray-500'
+        }
+        onKeyUp={handleKeyUp}
+        onCompositionStart={lockSearchInput}
+        onCompositionUpdate={lockSearchInput}
+        onCompositionEnd={unLockSearchInput}
+        placeholder={locale.SEARCH.ARTICLES}
+        onChange={e => updateSearchKey(e.target.value)}
+        defaultValue={currentSearch || ''}
+      />
+
+      <div
+        className="-ml-8 cursor-pointer  float-right items-center justify-center py-2"
+        onClick={handleSearch}
+      >
+        <i
+          className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${
+            onLoading ? 'fa-spinner animate-spin' : 'fa-search'
+          }`}
+        />
+      </div>
+
+      {showClean && (
+        <div className="-ml-12 cursor-pointer float-right items-center justify-center py-2">
+          <i
+            className="hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times"
+            onClick={cleanSearch}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SearchInput
--- a/themes/heo/components/SearchNav.js
+++ b/themes/heo/components/SearchNav.js
@@ -0,0 +1,68 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import Card from './Card'
+import SearchInput from './SearchInput'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 搜索页面的导航
+ * @param {*} props
+ * @returns
+ */
+export default function SearchNav(props) {
+  const { tagOptions, categoryOptions } = props
+  const cRef = useRef(null)
+  const { locale } = useGlobal()
+  useEffect(() => {
+    // 自动聚焦到搜索框
+    cRef?.current?.focus()
+  }, [])
+
+  return <>
+    <div className="my-6 px-2">
+        <SearchInput cRef={cRef} {...props} />
+        {/* 分类 */}
+        <Card className="w-full mt-4 bg-white dark:bg-[#1a191d]">
+            <div className="dark:text-gray-200 mb-5 mx-3 text-3xl">
+                {locale.COMMON.CATEGORY}:
+            </div>
+            <div id="category-list" className="duration-200 flex flex-wrap mx-8">
+                {categoryOptions?.map(category => {
+                  return (
+                      <Link
+                          key={category.name}
+                          href={`/category/${category.name}`}
+                          passHref
+                          legacyBehavior>
+                          <div
+                              className={
+                                  ' duration-300 dark:hover:text-white dark:text-gray-200 rounded-2xl px-3 cursor-pointer py-1 hover:bg-indigo-600 dark:hover:bg-yellow-600 hover:text-white'
+                              }
+                          >
+                              <i className="mr-4 fas fa-folder" />
+                              {category.name}({category.count})
+                          </div>
+                      </Link>
+                  )
+                })}
+            </div>
+        </Card>
+        {/* 标签 */}
+        <Card className="w-full mt-4 bg-white dark:bg-[#1a191d]">
+            <div className="dark:text-gray-200 mb-5 ml-4 text-3xl">
+                {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>
+        </Card>
+    </div>
+</>
+}
--- a/themes/heo/components/SideBar.js
+++ b/themes/heo/components/SideBar.js
@@ -0,0 +1,33 @@
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import MenuGroupCard from './MenuGroupCard'
+import { MenuListSide } from './MenuListSide'
+
+/**
+ * 侧边抽屉
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBar = (props) => {
+  const { siteInfo } = props
+  const router = useRouter()
+  return (
+        <div id='side-bar'>
+            <div className="h-52 w-full flex justify-center">
+                <div>
+                    <div onClick={() => { router.push('/') }}
+                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                    </div>
+                    <MenuGroupCard {...props} />
+                </div>
+            </div>
+            <MenuListSide {...props} />
+        </div>
+  )
+}
+
+export default SideBar
--- a/themes/heo/components/SideBarDrawer.js
+++ b/themes/heo/components/SideBarDrawer.js
@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer?.classList.replace('-mr-72', 'mr-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer?.classList.replace('mr-0', '-mr-72')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-hexo-black-gray shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer
--- a/themes/heo/components/SideRight.js
+++ b/themes/heo/components/SideRight.js
@@ -0,0 +1,70 @@
+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'
+
+const FaceBookPage = dynamic(
+  () => {
+    let facebook = <></>
+    try {
+      facebook = import('@/components/FacebookPage')
+    } catch (err) {
+      console.error(err)
+    }
+    return facebook
+  },
+  { ssr: false }
+)
+
+/**
+ * Hexo主题右侧栏
+ * @param {*} props
+ * @returns
+ */
+export default function SideRight(props) {
+  const {
+    post, tagOptions,
+    currentTag, rightAreaSlot
+  } = props
+
+  return (
+        <div id='sideRight' className='hidden xl:block w-72 space-y-4 h-full'>
+
+            <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>
+                )}
+
+                {/* 联系交流群 */}
+                <TouchMeCard />
+
+                {/* 最新文章列表 */}
+                <div className={'border dark:border-gray-700 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>
+
+        </div>
+  )
+}
--- a/themes/heo/components/SlideOver.js
+++ b/themes/heo/components/SlideOver.js
@@ -0,0 +1,111 @@
+
+import { Fragment, useImperativeHandle, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import DarkModeButton from '@/components/DarkModeButton'
+import Link from 'next/link'
+import TagGroups from './TagGroups'
+
+/**
+ * 侧边抽屉
+ */
+export default function SlideOver(props) {
+  const { cRef, tagOptions } = props
+  const [open, setOpen] = useState(false)
+
+  /**
+              * 函数组件暴露方法useImperativeHandle
+              */
+  useImperativeHandle(cRef, () => ({
+    toggleSlideOvers: toggleSlideOvers
+  }))
+
+  const toggleSlideOvers = () => {
+    setOpen(!open)
+  }
+
+  return (
+        <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="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-300 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>
+                                                <div className={'flex justify-between items-center px-2 py-2 border dark:border-gray-600 bg-white dark:bg-[#ff953e]  rounded-lg'}> <DarkModeButton /> 显示模式</div>
+                                            </section>
+
+                                            <section className='space-y-2 flex flex-col'>
+                                                <div>博客</div>
+
+                                                <div className='gap-2 grid grid-cols-2'>
+                                                    <Link href='/' className={'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'}>
+                                                        主页
+                                                    </Link>
+                                                    <Link href='/about' className={'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'}>
+                                                        关于
+                                                    </Link>
+                                                </div>
+                                            </section>
+
+                                            <section className='space-y-2 flex flex-col'>
+                                                <div>标签</div>
+                                                <TagGroups tags={tagOptions}/>
+                                            </section>
+
+                                        </div>
+                                    </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+  )
+}
--- a/themes/heo/components/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -0,0 +1,45 @@
+import BLOG from '@/blog.config'
+import React from 'react'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @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 '>
+      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
+        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.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>}
+      {BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.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>}
+      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
+        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.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>}
+      {BLOG.CONTACT_BILIBILI && <a target='_blank' rel='noreferrer' title={'bilibili'} href={BLOG.CONTACT_BILIBILI} >
+        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
+      </a>}
+      {BLOG.CONTACT_YOUTUBE && <a target='_blank' rel='noreferrer' title={'youtube'} href={BLOG.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>
+}
+export default SocialButton
--- a/themes/heo/components/Swipe.js
+++ b/themes/heo/components/Swipe.js
@@ -0,0 +1,73 @@
+import { isBrowser } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+
+/**
+ * 一个swipe组件
+ * 垂直方向，定时滚动
+ * @param {*} param0
+ * @returns
+ */
+export function Swipe({ items }) {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const handleClick = (item) => {
+    if (isBrowser()) {
+      window.open(item?.url)
+    }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveIndex((activeIndex + 1) % items.length)
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [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>
+  )
+};
+
+export default Swipe
--- a/themes/heo/components/TagGroups.js
+++ b/themes/heo/components/TagGroups.js
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 标签组
+ * @param tags
+ * @param currentTag
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TagGroups = ({ tags, className }) => {
+  if (!tags) return <></>
+  return (
+        <div id='tags-group' className='dark:border-gray-700 space-y-2'>
+            {
+                tags.map(tag => {
+                  return <>
+                        <Link passHref
+                            key={tag}
+                            href={`/tag/${encodeURIComponent(tag.name)}`}
+                            className={'cursor-pointer inline-block  whitespace-nowrap'}>
+                            <div className={`${className || ''}  flex items-center hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all`}>
+                                <div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
+                            </div>
+
+                        </Link></>
+                })
+            }
+        </div>
+  )
+}
+
+export default TagGroups
--- a/themes/heo/components/TagItemMini.js
+++ b/themes/heo/components/TagItemMini.js
@@ -0,0 +1,16 @@
+import { HashTag } from '@/components/HeroIcons'
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return (
+    <Link
+      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>
+    </Link>
+  )
+}
+
+export default TagItemMini
--- a/themes/heo/components/TocDrawer.js
+++ b/themes/heo/components/TocDrawer.js
@@ -0,0 +1,42 @@
+import Catalog from './Catalog'
+import React, { useImperativeHandle, useState } from 'react'
+
+/**
+ * 目录抽屉栏
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawer = ({ post, cRef }) => {
+  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
+  useImperativeHandle(cRef, () => {
+    return {
+      handleSwitchVisible: () => switchVisible()
+    }
+  })
+  const [showDrawer, switchShowDrawer] = useState(false)
+  const switchVisible = () => {
+    switchShowDrawer(!showDrawer)
+  }
+  return <>
+    <div className='fixed top-0 right-0 z-40 '>
+      {/* 侧边菜单 */}
+      <div
+        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
+        ' shadow-card animate__animated animate__faster' +
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-900'}>
+          {post && <>
+           <div className='dark:text-gray-400 text-gray-600'>
+             <Catalog toc={post.toc}/>
+           </div>
+          </>
+          }
+      </div>
+    </div>
+    {/* 背景蒙版 */}
+    <div id='right-drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+         onClick={switchVisible} />
+  </>
+}
+export default TocDrawer
--- a/themes/heo/components/TocDrawerButton.js
+++ b/themes/heo/components/TocDrawerButton.js
@@ -0,0 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import CONFIG from '../config'
+
+/**
+ * 点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const TocDrawerButton = (props) => {
+  const { locale } = useGlobal()
+  if (!CONFIG.WIDGET_TOC) {
+    return <></>
+  }
+  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center' title={locale.POST.TOP} >
+    <i className='fas fa-list-ol text-xs'/>
+  </div>)
+}
+
+export default TocDrawerButton
--- a/themes/heo/components/TouchMeCard.js
+++ b/themes/heo/components/TouchMeCard.js
@@ -0,0 +1,30 @@
+
+import FlipCard from '@/components/FlipCard'
+import Link from 'next/link'
+
+/**
+ * 交流频道
+ * @returns
+ */
+export default function TouchMeCard() {
+  return (
+        <div className={'relative h-28 text-white flex flex-col'}>
+
+            <FlipCard
+                className='cursor-pointer lg:p-6 p-4 border rounded-xl bg-[#4f65f0] dark:bg-yellow-600 dark:border-gray-600'
+                frontContent={
+                    <div className='h-full'>
+                        <h2 className='font-[1000] text-3xl'>交流频道</h2>
+                        <h3 className='pt-2'>加入我们的社群讨论分享</h3>
+                        <div className='absolute left-0 top-0 w-full h-full' style={{ background: 'url(https://bu.dusays.com/2023/05/16/64633c4cd36a9.png) center center no-repeat' }}></div>
+                    </div>}
+                backContent={<div className='font-[1000] text-xl h-full'>
+                    <Link href='https://docs.tangly1024.com/article/how-to-question'>
+                        点击加入社群
+                    </Link>
+                </div>}
+            />
+
+        </div>
+  )
+}
--- a/themes/heo/components/WavesArea.js
+++ b/themes/heo/components/WavesArea.js
@@ -0,0 +1,65 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章波浪动画
+ */
+export default function WavesArea() {
+  const { isDarkMode } = useGlobal()
+  const color = isDarkMode ? '#18171d' : '#f7f9fe'
+
+  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" shape-rendering="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>
+  )
+}
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -0,0 +1,113 @@
+const CONFIG = {
+  HOME_BANNER_ENABLE: true,
+
+  SITE_CREATE_TIME: '2021-09-21', // 建站日期，用于计算网站运行的第几天
+
+  // 首页顶部通知条滚动内容，如不需要可以留空 []
+  NOTICE_BAR: [
+    { url: 'https://blog.tangly1024.com', title: '欢迎来到我的博客' },
+    { url: 'https://docs.tangly1024.com', title: '访问文档中心获取更多帮助' }
+  ],
+
+  // 个人资料卡牌欢迎语
+  INFOCARD_GREETINGS: [
+    '你好！我是',
+    '🔍 分享与热心帮助',
+    '🤝 专修交互与设计',
+    '🏃 脚踏实地行动派',
+    '🏠 智能家居小能手',
+    '🤖️ 数码科技爱好者',
+    '🧱 团队小组发动机'
+  ],
+
+  // 用户技能图标
+  GROUP_ICONS: [
+    {
+      title_1: 'AfterEffect',
+      img_1: 'https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover',
+      color_1: '#989bf8',
+      title_2: 'Sketch',
+      img_2: 'https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover',
+      color_2: '#ffffff'
+    },
+    {
+      title_1: 'Docker',
+      img_1: 'https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover',
+      color_1: '#57b6e6',
+      title_2: 'Photoshop',
+      img_2: 'https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover',
+      color_2: '#4082c3'
+    },
+    {
+      title_1: 'FinalCutPro',
+      img_1: 'https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover',
+      color_1: '#ffffff',
+      title_2: 'Python',
+      img_2: 'https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover',
+      color_2: '#ffffff'
+    },
+    {
+      title_1: 'Swift',
+      img_1: 'https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover',
+      color_1: '#eb6840',
+      title_2: 'Principle',
+      img_2: 'https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover',
+      color_2: '#8f55ba'
+    },
+    {
+      title_1: 'illustrator',
+      img_1: 'https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover',
+      color_1: '#f29e39',
+      title_2: 'CSS3',
+      img_2: 'https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover',
+      color_2: '#2c51db'
+    },
+    {
+      title_1: 'JS',
+      img_1: 'https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover',
+      color_1: '#f7cb4f',
+      title_2: 'HTML',
+      img_2: 'https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover',
+      color_2: '#e9572b'
+    },
+    {
+      title_1: 'Git',
+      img_1: 'https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover',
+      color_1: '#df5b40',
+      title_2: 'Rhino',
+      img_2: 'https://p.zhheo.com/20231ca53fa0b09a3ff1df89acd7515e9516173302.png!cover',
+      color_2: '#1f1f1f'
+    }
+  ],
+
+  HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮
+  // 已知未修复bug, 在移动端开启true后会加载不出图片； 暂时建议设置为false。
+  HOME_NAV_BACKGROUND_IMG_FIXED: false, // 首页背景图滚动时是否固定，true 则滚动时图片不懂动； false则随鼠标滚动 ;
+
+  // 菜单配置
+  MENU_INDEX: true, // 显示首页
+  MENU_CATEGORY: true, // 显示分类
+  MENU_TAG: true, // 显示标签
+  MENU_ARCHIVE: true, // 显示归档
+  MENU_SEARCH: true, // 显示搜索
+
+  POST_LIST_COVER: true, // 列表显示文章封面
+  POST_LIST_COVER_HOVER_ENLARGE: false, // 列表鼠标悬停放大
+
+  POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
+  POST_LIST_SUMMARY: true, // 文章摘要
+  POST_LIST_PREVIEW: false, // 读取文章预览
+  POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错
+
+  ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
+  ARTICLE_COPYRIGHT: true, // 显示文章版权声明
+  ARTICLE_RECOMMEND: true, // 文章关联推荐
+
+  WIDGET_LATEST_POSTS: true, // 显示最新文章卡
+  WIDGET_ANALYTICS: false, // 显示统计卡
+  WIDGET_TO_TOP: true,
+  WIDGET_TO_COMMENT: true, // 跳到评论区
+  WIDGET_DARK_MODE: true, // 夜间模式
+  WIDGET_TOC: true // 移动端悬浮目录
+}
+export default CONFIG
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -0,0 +1,430 @@
+import CONFIG from './config'
+
+import CommonHead from '@/components/CommonHead'
+import { useEffect } from 'react'
+import Footer from './components/Footer'
+import SideRight from './components/SideRight'
+import NavBar from './components/NavBar'
+import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
+import BlogPostListPage from './components/BlogPostListPage'
+import BlogPostListScroll from './components/BlogPostListScroll'
+import Hero from './components/Hero'
+import { useRouter } from 'next/router'
+import Mark from 'mark.js'
+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'
+
+/**
+ * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, headerSlot, slotTop, slotRight, meta, siteInfo } = props
+  const { onLoading } = useGlobal()
+
+  // 加载主题样式
+  if (isBrowser()) {
+    loadExternalResource('/css/theme-hexo.css', 'css')
+  }
+
+  return (
+        <div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col'>
+            {/* 网页SEO */}
+            <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style />
+
+            {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+            {headerSlot}
+
+            {/* 主区块 */}
+            <main id="wrapper-outer" className={'flex-grow w-full max-w-[86rem] mx-auto relative px-5'}>
+
+                <div id="container-inner" className={'w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
+
+                    <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"
+                        leaveTo="opacity-0 -translate-y-16"
+                        className='w-full h-auto'
+                        unmount={false}
+                    >
+                        {/* 主区上部嵌入 */}
+                        {slotTop}
+
+                        {children}
+                    </Transition>
+
+                    <Transition
+                        show={!onLoading}
+                        appear={true}
+                        enter="transition ease-in-out duration-700 transform order-first"
+                        enterFrom="opacity-0 translate-y-16"
+                        enterTo="opacity-100 translate-y-0"
+                        leave="transition ease-in-out duration-300 transform"
+                        leaveFrom="opacity-100 translate-y-0"
+                        leaveTo="opacity-0 -translate-y-16"
+                        unmount={false}
+                    >
+                        {/* 主区快右侧 */}
+                        {slotRight}
+
+                    </Transition>
+                </div>
+            </main>
+
+            {/* 页脚 */}
+            <Footer title={siteInfo?.title || BLOG.TITLE} />
+        </div>
+  )
+}
+
+/**
+ * 首页
+ * 是一个博客列表，嵌入一个Hero大图
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = (props) => {
+  const headerSlot = <header>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+        {/* 通知横幅 */}
+        <NoticeBar />
+        <Hero {...props} />
+    </header>
+
+  // 右侧栏 用户信息+标签列表
+  const slotRight = <SideRight {...props} />
+
+  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+        {/* 文章分类条 */}
+        <CategoryBar {...props} />
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
+}
+
+/**
+ * 博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutPostList = (props) => {
+  // 右侧栏
+  const slotRight = <SideRight {...props} />
+  const headerSlot = <header>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+    </header>
+
+  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+        {/* 文章分类条 */}
+        <CategoryBar {...props} />
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+  const headerSlot = <header className='post-bg'>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper'><NavBar {...props} /></div>
+        <PostHeader {...props} />
+    </header>
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (currentSearch) {
+        const targets = document.getElementsByClassName('replace')
+        for (const container of targets) {
+          if (container && container.innerHTML) {
+            const re = new RegExp(currentSearch, 'gim')
+            const instance = new Mark(container)
+            instance.markRegExp(re, {
+              element: 'span',
+              className: 'text-red-500 border-b border-dashed'
+            })
+          }
+        }
+      }
+    }, 100)
+  })
+
+  return (
+        <LayoutBase {...props} currentSearch={currentSearch} headerSlot={headerSlot}>
+            {!currentSearch
+              ? <SearchNav {...props} />
+              : <div id="posts-wrapper"> {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}  </div>}
+        </LayoutBase>
+  )
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = (props) => {
+  const { archivePosts } = props
+
+  // 右侧栏
+  const slotRight = <SideRight {...props} />
+  const headerSlot = <header>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+    </header>
+
+  // 归档页顶部显示条，如果是默认归档则不显示。分类详情页显示分类列表，标签详情页显示当前标签
+
+  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+        <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>
+    </LayoutBase>
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, lock, validPassword } = props
+  const { locale } = useGlobal()
+
+  // 右侧栏
+  const slotRight = <SideRight {...props} />
+  const headerSlot = <header className='post-bg'>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper'><NavBar {...props} /></div>
+        <PostHeader {...props} />
+    </header>
+
+  return (
+        <LayoutBase {...props} headerSlot={headerSlot} showCategory={false} showTag={false} slotRight={slotRight}>
+            <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-[#18171d] dark:border-gray-600 article">
+                {lock && <ArticleLock 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" className="subpixel-antialiased overflow-y-hidden" >
+                        {/* Notion文章主体 */}
+                        <section className='px-5 justify-center mx-auto max-w-2xl lg:max-w-full'>
+                            {post && <NotionPage post={post} />}
+                        </section>
+
+                        {/* 分享 */}
+                        <ShareBar post={post} />
+                        {post?.type === 'Post' && <>
+
+                            {/* 版权 */}
+                            <ArticleCopyright {...props} />
+                            {/* 文章推荐 */}
+                            <ArticleRecommend {...props} />
+                            {/* 上一篇\下一篇文章 */}
+                            <ArticleAdjacent {...props} />
+                        </>}
+
+                    </article>
+
+                    <div className='pt-4 border-dashed'></div>
+
+                    {/* 评论互动 */}
+                    <div className="duration-200 overflow-x-auto px-3">
+                        <div className='text-2xl dark:text-white'><i className='fas fa-comment mr-1' />{locale.COMMON.COMMENTS}</div>
+                        <Comment frontMatter={post} className='' />
+                    </div>
+                </div>}
+            </div>
+
+        </LayoutBase>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+  const { meta, siteInfo } = props
+  const { onLoading } = useGlobal()
+  return (
+        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col'>
+            {/* 网页SEO */}
+            <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style />
+
+            {/* 顶部嵌入 导航栏，首页放hero，文章页放文章详情 */}
+            <header>
+                {/* 顶部导航 */}
+                <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+            </header>
+
+            {/* 主区块 */}
+            <main id="wrapper-outer" className={'flex-grow 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 translate-y-0"
+                        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 border rounded-2xl'>
+                            {/* 左侧动图 */}
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
+
+                            {/* 右侧文字 */}
+                            <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'>404</h1>
+                                <div>请尝试站内搜索寻找文章</div>
+                                <Link href='/'>
+                                    <button className='bg-blue-500 p-2 text-white shadow rounded-lg hover:bg-blue-600 hover:shadow-md duration-200 transition-all'>回到主页</button>
+                                </Link>
+                            </div>
+                        </div>
+
+                        {/* 404页面底部显示最新文章 */}
+                        <div className='mt-12'>
+                            <LatestPostsGroup {...props} />
+                        </div>
+
+                    </Transition>
+                </div>
+            </main>
+
+        </div>
+  )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  const headerSlot = <header>
+        {/* 顶部导航 */}
+        <div id='nav-bar-wrapper' className='h-16'><NavBar {...props} /></div>
+    </header>
+
+  return (
+        <LayoutBase {...props} className='mt-8' headerSlot={headerSlot}>
+            <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 space-x-5 m-10 justify-center">
+                {categoryOptions.map(category => {
+                  return (
+                        <Link key={category.name} href={`/category/${category.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'} />
+                                {category.name}
+                                <div className='bg-[#f1f3f8] ml-1 px-2 rounded-lg group-hover:text-indigo-600 '>
+                                    {category.count}
+                                </div>
+                            </div>
+                        </Link>
+                  )
+                })}
+            </div>
+        </LayoutBase>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+        <LayoutBase {...props} className='mt-8'>
+            <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 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>
+        </LayoutBase>
+  )
+}
+
+export {
+  CONFIG as THEME_CONFIG,
+  LayoutIndex,
+  LayoutSearch,
+  LayoutArchive,
+  LayoutSlug,
+  Layout404,
+  LayoutCategoryIndex,
+  LayoutPostList,
+  LayoutTagIndex
+}
--- a/themes/heo/style.js
+++ b/themes/heo/style.js
@@ -0,0 +1,64 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    body {
+        background-color:  #f7f9fe;
+        overflow-x: hidden;
+    }
+
+    // 公告栏中的字体固定白色
+    #announcement-content .notion{
+        color: white;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: rgba(60, 60, 67, 0.4);
+        border-radius: 8px;
+        cursor: pointer;
+    }
+
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .today-card-cover {
+        -webkit-mask-image: linear-gradient(to top, transparent 5%, black 70%);
+        mask-image: linear-gradient(to top, transparent 5%, black 70%);      
+    }
+
+    .recent-top-post-group::-webkit-scrollbar {
+        display: none;
+    }
+    
+    .scroll-hidden::-webkit-scrollbar {
+        display: none;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+
+    // 标签滚动动画
+    .tags-group-wrapper {
+        animation: rowup 60s linear infinite;
+    }
+    
+    @keyframes rowup {
+        0% {
+            transform: translateX(0%);
+        }
+        100% {
+            transform: translateX(-50%);
+        }
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/hexo/components/Header.js
+++ b/themes/hexo/components/Header.js
--- a/themes/hexo/components/MenuItemCollapse.js
+++ b/themes/hexo/components/MenuItemCollapse.js
@@ -42,8 +42,8 @@ export const MenuItemCollapse = ({ link }) => {

        {/* 折叠子菜单 */}
        {hasSubMenu && <Collapse isOpen={isOpen}>
-            {link.subMenus.map(sLink => {
-              return <div key={sLink.id} className='dark:bg-black dark:text-gray-200 text-left px-10 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.subMenus.map((sLink, index) => {
+              return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-10 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.to}>
                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
                    </Link>
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -4,7 +4,7 @@ import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
 import NotionIcon from '@/components/NotionIcon'

-export default function HeaderArticle({ post, siteInfo }) {
+export default function PostHeader({ post, siteInfo }) {
  const { locale } = useGlobal()

  if (!post) {
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -7,10 +7,10 @@ import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import Hero from './components/Header'
+import Hero from './components/Hero'
 import { useRouter } from 'next/router'
 import Mark from 'mark.js'
 import Card from './components/Card'
@@ -18,7 +18,7 @@ import RightFloatArea from './components/RightFloatArea'
 import SearchNav from './components/SearchNav'
 import BlogPostArchive from './components/BlogPostArchive'
 import { ArticleLock } from './components/ArticleLock'
-import HeaderArticle from './components/HeaderArticle'
+import PostHeader from './components/PostHeader'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import TocDrawer from './components/TocDrawer'
 import TocDrawerButton from './components/TocDrawerButton'
@@ -32,6 +32,7 @@ import TagItemMini from './components/TagItemMini'
 import Link from 'next/link'
 import SlotBar from './components/SlotBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -43,15 +44,11 @@ const LayoutBase = props => {
  const { children, headerSlot, floatSlot, slotTop, meta, siteInfo, className } = props
  const { onLoading } = useGlobal()

-  // 加载主题样式
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-hexo.css', 'css')
-  }
-
  return (
        <div id='theme-hexo'>
            {/* 网页SEO */}
            <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style/>

            {/* 顶部导航 */}
            <TopNav {...props} />
@@ -213,7 +210,7 @@ const LayoutSlug = props => {
    </>

  return (
-        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
+        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatSlot={floatSlot} >
            <div className="w-full lg:hover:shadow lg:border rounded-t-xl lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black article">
                {lock && <ArticleLock validPassword={validPassword} />}

--- a/themes/hexo/style.js
+++ b/themes/hexo/style.js
@@ -0,0 +1,76 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 这里的css样式只对当前主题生效
+ * 主题客制化css
+ * @returns
+ */
+const Style = () => {
+  return (<style jsx global>{`
+    // 底色
+    body{
+        background-color: #f5f5f5
+    }
+    .dark body{
+        background-color: black;
+    }
+  
+    /*  菜单下划线动画 */
+    #theme-hexo .menu-link {
+        text-decoration: none;
+        background-image: linear-gradient(#928CEE, #928CEE);
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        background-size: 0 2px;
+        transition: background-size 100ms ease-in-out;
+    }
+    
+    #theme-hexo .menu-link:hover {
+        background-size: 100% 2px;
+        color: #928CEE;
+    }
+
+    /* 设置了从上到下的渐变黑色 */
+    #theme-hexo .header-cover::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+    }
+
+    /* Custem */
+    .tk-footer{
+        opacity: 0;
+    }
+
+    // 选中字体颜色
+    ::selection {
+        background: rgba(45, 170, 219, 0.3);
+    }
+
+    // 自定义滚动条
+    ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #49b1f5;
+    }
+
+    * {
+        scrollbar-width:thin;
+        scrollbar-color: #49b1f5 transparent
+    }
+    
+
+  `}</style>)
+}
+
+export { Style }
--- a/themes/landing/style.js
+++ b/themes/landing/style.js
@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -1,6 +1,9 @@
 import Image from 'next/image'

-export default function HeaderArticle({ post, siteInfo }) {
+/**
+ * 文章背景图
+ */
+export default function PostHeader({ post, siteInfo }) {
  const headerImage = post?.pageCoverThumbnail ? post?.pageCoverThumbnail : siteInfo?.pageCover
  const title = post?.title
  return (
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -4,7 +4,6 @@ import TopNav from './components/TopNav'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
 import Footer from './components/Footer'
 import { useEffect } from 'react'
 import RightFloatButtons from './components/RightFloatButtons'
@@ -17,7 +16,7 @@ import Hero from './components/Hero'
 import Announcement from './components/Announcement'
 import CatalogWrapper from './components/CatalogWrapper'
 import TagItemMiddle from './components/TagItemMiddle'
-import HeaderArticle from './components/HeaderArticle'
+import PostHeader from './components/PostHeader'
 import Link from 'next/link'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import Comment from '@/components/Comment'
@@ -31,6 +30,7 @@ import Card from './components/Card'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 /**
 * 基础布局
@@ -43,14 +43,11 @@ const LayoutBase = props => {
  const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
  const { onLoading } = useGlobal()

-  if (isBrowser()) {
-    loadExternalResource('/css/theme-matery.css', 'css')
-  }
-
  return (
        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
            {/* SEO相关 */}
            <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style/>

            {/* 顶部导航栏 */}
            <TopNav {...props} />
@@ -177,7 +174,7 @@ const LayoutSearch = props => {
 */
 const LayoutArchive = (props) => {
  const { archivePosts } = props
-  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+  return <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >
        <Card className='w-full -mt-32'>
            <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
                {Object.keys(archivePosts).map(archiveTitle => (
@@ -200,7 +197,7 @@ const LayoutArchive = (props) => {
 const LayoutSlug = props => {
  const { post, lock, validPassword } = props

-  return (<LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>
+  return (<LayoutBase {...props} headerSlot={<PostHeader {...props} />} showCategory={false} showTag={false} floatRightBottom={<JumpToCommentButton />}>

        <div id='inner-wrapper' className={'w-full lg:max-w-3xl 2xl:max-w-4xl'} >

@@ -310,7 +307,7 @@ const LayoutCategoryIndex = props => {
  const { categoryOptions } = props

  return (
-        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >

            <div id='inner-wrapper' className='w-full'>
                <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black dark:text-gray-300">
@@ -340,7 +337,7 @@ const LayoutTagIndex = props => {
  const { tagOptions } = props
  const { locale } = useGlobal()
  return (
-        <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+        <LayoutBase {...props} headerSlot={<PostHeader {...props} />} >
            <div id='inner-wrapper' className='w-full drop-shadow-xl'>

                <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
--- a/themes/matery/style.js
+++ b/themes/matery/style.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    // 底色
+    body{
+        background-color: #f5f5f5
+    }
+    .dark body{
+        background-color: black;
+    }
+
+    /* 设置了从上到下的渐变黑色 */
+    #theme-matery .header-cover::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+    }
+    
+  `}</style>
+}
+
+export { Style }
--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -34,6 +34,7 @@ import TagItemMini from './components/TagItemMini'
 import ShareBar from '@/components/ShareBar'
 import Link from 'next/link'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 // 主题全局状态
 const ThemeGlobalMedium = createContext()
@@ -54,7 +55,10 @@ const LayoutBase = props => {

  return (
        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
+            {/* SEO相关 */}
            <CommonHead meta={meta} />
+            {/* CSS样式 */}
+            <Style/>

            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>

--- a/themes/medium/style.js
+++ b/themes/medium/style.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -27,6 +27,7 @@ import ArticleDetail from './components/ArticleDetail'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 /**
 * 基础布局 采用左中右三栏布局，移动端使用顶部导航栏
@@ -73,6 +74,8 @@ const LayoutBase = (props) => {
        <div id='theme-next'>
            {/* SEO相关 */}
            <CommonHead meta={meta} />
+            <Style/>
+
            {/* 移动端顶部导航栏 */}
            <TopNav {...props} />

--- a/themes/next/style.js
+++ b/themes/next/style.js
@@ -0,0 +1,21 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+
+    // 底色
+    body{
+        background-color: #eeedee
+    }
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/nobelium/components/BlogPost.js
+++ b/themes/nobelium/components/BlogPost.js
@@ -23,7 +23,7 @@ const BlogPost = ({ post }) => {
      </article>

    </Link>)
-  );
+  )
 }

 export default BlogPost
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -27,6 +27,7 @@ import ShareBar from '@/components/ShareBar'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'

 /**
 * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -44,6 +45,7 @@ const LayoutBase = props => {
        <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
            {/* SEO相关 */}
            <CommonHead meta={meta} />
+            <Style/>

            {/* 顶部导航栏 */}
            <Nav {...props} />
--- a/themes/nobelium/style.js
+++ b/themes/nobelium/style.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }
--- a/themes/plog/components/BottomNav.js
+++ b/themes/plog/components/BottomNav.js
@@ -1,11 +1,10 @@
-import Link from 'next/link'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
-import { SvgIcon } from './SvgIcon'
 import { MenuItemDrop } from './MenuItemDrop'
 import FullScreenButton from '@/components/FullScreenButton'
 import InformationButton from './InformationButton'
+import LogoBar from './LogoBar'

 /**
 * 桌面端底部导航
@@ -13,35 +12,10 @@ import InformationButton from './InformationButton'
 * @returns
 */
 const BottomNav = props => {
-  const { navBarTitle, siteInfo } = props
-
  return <>
        <div id="bottom-nav" style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} className={'z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
-            <div className="flex items-center">
-                <Link href="/" aria-label={BLOG.title}>
-                    <div className="h-6 w-6">
-                        {/* <SvgIcon/> */}
-                        {CONFIG.NAV_NOTION_ICON
-                        /* eslint-disable-next-line @next/next/no-img-element */
-                          ? <img src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
-                          : <SvgIcon />}
-                    </div>
-                </Link>
-                {navBarTitle
-                  ? (
-                        <Link href="/" aria-label={BLOG.title}>
-                            <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                                {navBarTitle}
-                            </p>
-                        </Link>
-                    )
-                  : (
-                        <p className="ml-2 font-medium text-gray-800 dark:text-gray-300 header-name">
-                            <Link href="/" aria-label={BLOG.title}> {siteInfo?.title}</Link>
-                            {' '}<span className="font-normal text-sm text-gray-00 dark:text-gray-400">{siteInfo?.description}</span>
-                        </p>
-                    )}
-            </div>
+            {/* 左侧logo文字栏 */}
+            <LogoBar {...props}/>
            {/* 右下角菜单栏 */}
            <MenuList {...props} />
        </div>
--- a/Show More
+++ b/Show More