Merge branch 'main' into feature/user-auth-clerk

2026-05-14 07:26:52 +00:00 · 2024-07-09 15:08:03 +08:00
parent 2b33f98c05 50c687ffcb
commit da90c17b3a
83 changed files with 1719 additions and 659 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.6.0
+NEXT_PUBLIC_VERSION=4.6.1


 # 可在此添加环境变量，去掉最左边的（# ）注释即可
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -1,17 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { useState } from 'react'
-import { Draggable } from './Draggable'
+import LANGS from '@/lib/lang'
+import { getQueryParam } from '@/lib/utils'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
 import DarkModeButton from './DarkModeButton'
-import { getQueryParam } from '@/lib/utils'
-import LANGS from '@/lib/lang'
+import { Draggable } from './Draggable'
 /**
 *
 * @returns 主题切换
 */
 const ThemeSwitch = () => {
-  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } = useGlobal()
+  const { theme, lang, changeLang, locale, isDarkMode, toggleDarkMode } =
+    useGlobal()
  const router = useRouter()
  const currentTheme = getQueryParam(router.asPath, 'theme') || theme
  //   const currentLang = getQueryParam(router.asPath, 'lang') || lang
@@ -19,8 +20,12 @@ const ThemeSwitch = () => {

  // 修改当前路径url中的 theme 参数
  // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
-  const onThemeSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onThemeSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
    setIsLoading(true)
    const newTheme = e.target.value
    const query = router.query
@@ -28,59 +33,96 @@ const ThemeSwitch = () => {
    router.push({ pathname: router.pathname, query }).then(() => {
      setTimeout(() => {
        setIsLoading(false)
-      }, 500);
+      }, 500)
    })
  }

-  const onLangSelectChange = (e) => {
-    document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
+  const onLangSelectChange = e => {
+    document.ontouchmove =
+      document.ontouchend =
+      document.onmousemove =
+      document.onmouseup =
+        null
    const newLang = e.target.value
    changeLang(newLang)
  }

-  return (<>
-        <Draggable>
-            <div id="draggableBox" style={{ left: '0px', top: '80vh' }} className="fixed group space-y-2 overflow-hidden z-50 p-3 flex flex-col items-start dark:text-white bg-white dark:bg-black rounded-xl shadow-lg ">
-                {/* 深色按钮 */}
-                <div className="text-sm flex items-center w-0 group-hover:w-32 transition-all duration-200">
-                    <DarkModeButton />
-                    <div onClick={toggleDarkMode} className='cursor-pointer w-0 group-hover:w-24 transition-all duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>{isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}</div>
-                </div>
-
-                {/* 翻译按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-language w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="langSelect" className="sr-only">选择语言：</label>
-                        <select id="langSelect" value={lang} onChange={onLangSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
-                            {Object.keys(LANGS)?.map(t => {
-                              return <option key={t} value={t}>{LANGS[t].LOCALE}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
-
-                {/* 主题切换按钮 */}
-                <div className="text-sm flex items-center group-hover:w-32 transition-all duration-200">
-                    <i className="fa-solid fa-palette w-5" />
-                    <div className='w-0 group-hover:w-24 transition-all duration-200 overflow-hidden'>
-                        <label htmlFor="themeSelect" className="sr-only">选择主题：</label>
-                        <select id="themeSelect" value={currentTheme} onChange={onThemeSelectChange} name="themes" className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
-                            {THEMES?.map(t => {
-                              return <option key={t} value={t}>{t}</option>
-                            })}
-                        </select>
-                    </div>
-                </div>
+  return (
+    <>
+      <Draggable>
+        <div
+          id='draggableBox'
+          style={{ left: '0px', top: '80vh' }}
+          className='fixed group flex flex-col items-start space-y-2 overflow-hidden z-50 p-3
+                    dark:text-white bg-white dark:bg-black 
+                      rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl   '>
+          {/* 主题切换按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32  duration-200'>
+            <i className='fa-solid fa-palette w-5' />
+            <div className='w-0 group-hover:w-24  duration-200 overflow-hidden'>
+              <label htmlFor='themeSelect' className='sr-only'>
+                {locale.COMMON.THEME}
+              </label>
+              <select
+                id='themeSelect'
+                value={currentTheme}
+                onChange={onThemeSelectChange}
+                name='themes'
+                className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                {THEMES?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  )
+                })}
+              </select>
            </div>
-        </Draggable>
+          </div>

-        {/* 切换主题加载时的全屏遮罩 */}
-        <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
-            w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
-            transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
-            <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+          {/* 深色按钮 */}
+          <div className='text-sm flex items-center w-0 group-hover:w-32  duration-200'>
+            <DarkModeButton />
+            <div
+              onClick={toggleDarkMode}
+              className='cursor-pointer w-0 group-hover:w-24  duration-200 overflow-hidden whitespace-nowrap pl-1 h-auto'>
+              {isDarkMode ? locale.MENU.DARK_MODE : locale.MENU.LIGHT_MODE}
+            </div>
+          </div>
+
+          {/* 翻译按钮 */}
+          <div className='text-sm flex items-center group-hover:w-32  duration-200'>
+            <i className='fa-solid fa-language w-5' />
+            <div className='w-0 group-hover:w-24  duration-200 overflow-hidden'>
+              <label htmlFor='langSelect' className='sr-only'>
+                Language Select
+              </label>
+              <select
+                id='langSelect'
+                value={lang}
+                onChange={onLangSelectChange}
+                name='themes'
+                className='pl-1 bg-gray-50 dark:bg-black appearance-none outline-none dark:text-white uppercase cursor-pointer'>
+                {Object.keys(LANGS)?.map(t => {
+                  return (
+                    <option key={t} value={t}>
+                      {LANGS[t].LOCALE}
+                    </option>
+                  )
+                })}
+              </select>
+            </div>
+          </div>
        </div>
+      </Draggable>
+
+      {/* 切换主题加载时的全屏遮罩 */}
+      <div
+        className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
+            w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
+             fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
+        <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+      </div>
    </>
  )
 }
--- a/lib/config.js
+++ b/lib/config.js
@@ -55,8 +55,8 @@ export const siteConfig = (key, defaultVal = null, extendConfig = {}) => {
  let siteInfo = null

  if (global) {
-    val = global.NOTION_CONFIG?.[key]
    siteInfo = global.siteInfo
+    val = global.NOTION_CONFIG?.[key] || global.THEME_CONFIG?.[key]
  }

  if (!val) {
--- a/lib/db/getSiteData.js
+++ b/lib/db/getSiteData.js
@@ -347,7 +347,6 @@ export function getNavPages({ allPages }) {
    return (
      post &&
      post?.slug &&
-      !post?.slug?.startsWith('http') &&
      post?.type === 'Post' &&
      post?.status === 'Published'
    )
@@ -512,6 +511,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
    adjustPageProperties(element, NOTION_CONFIG)
  })

+  // 站点基础信息
  const siteInfo = getSiteInfo({ collection, block, pageId })

  // 文章计数
@@ -525,7 +525,7 @@ async function getDataBaseInfoByNotionAPI({ pageId, from }) {
    return (
      post &&
      post?.slug &&
-      !post?.slug?.startsWith('http') &&
+      //   !post?.slug?.startsWith('http') &&
      (post?.status === 'Invisible' || post?.status === 'Published')
    )
  })
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,6 +1,7 @@
 import { APPEARANCE, LANG, NOTION_PAGE_ID, THEME } from '@/blog.config'
 import {
  THEMES,
+  getThemeConfig,
  initDarkMode,
  saveDarkModeToLocalStorage
 } from '@/themes/theme'
@@ -29,11 +30,14 @@ export function GlobalContextProvider(props) {
    tagOptions,
    NOTION_CONFIG
  } = props
+
  const [lang, updateLang] = useState(NOTION_CONFIG?.LANG || LANG) // 默认语言
  const [locale, updateLocale] = useState(
    generateLocaleDict(NOTION_CONFIG?.LANG || LANG)
  ) // 默认语言
  const [theme, setTheme] = useState(NOTION_CONFIG?.THEME || THEME) // 默认博客主题
+  const [THEME_CONFIG, SET_THEME_CONFIG] = useState(null) // 主题配置
+
  const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
  const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
@@ -54,6 +58,12 @@ export function GlobalContextProvider(props) {
    return newTheme
  }

+  // 抓取主题配置
+  const updateThemeConfig = async theme => {
+    const config = await getThemeConfig(theme)
+    SET_THEME_CONFIG(config)
+  }
+
  // 切换深色模式
  const toggleDarkMode = () => {
    const newStatus = !isDarkMode
@@ -99,6 +109,9 @@ export function GlobalContextProvider(props) {
      setOnLoading(false)
    }

+    const currentTheme = router?.query?.theme || theme
+    updateThemeConfig(currentTheme)
+
    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeError', handleStop)
    router.events.on('routeChangeComplete', handleStop)
@@ -114,6 +127,7 @@ export function GlobalContextProvider(props) {
      value={{
        fullWidth,
        NOTION_CONFIG,
+        THEME_CONFIG,
        toggleDarkMode,
        onLoading,
        setOnLoading,
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -14,11 +14,14 @@ export default {
    INDEX: 'Home',
    RSS: 'RSS',
    SEARCH: 'Search',
+    NAVIGATOR: 'NAV',
    ABOUT: 'About',
    MAIL: 'E-Mail',
    ARCHIVE: 'Archive'
  },
  COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: 'Article List',
    MORE: 'More',
    NO_MORE: 'No More',
    LATEST_POSTS: 'Latest posts',
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -20,6 +20,8 @@ export default {
    ARCHIVE: '归档'
  },
  COMMON: {
+    THEME: 'Theme',
+    ARTICLE_LIST: '文章列表',
    MORE: '更多',
    NO_MORE: '没有更多了',
    LATEST_POSTS: '最新发布',
@@ -63,7 +65,7 @@ export default {
    MINUTE: '分钟',
    WORD_COUNT: '字数',
    READ_TIME: '阅读时长',
-    NEXT_POST:'下一篇'
+    NEXT_POST: '下一篇'
  },
  PAGINATION: {
    PREV: '上页',
--- a/lib/lang/zh-HK.js
+++ b/lib/lang/zh-HK.js
@@ -5,7 +5,39 @@ export default {
    RSS: '訂閱',
    SEARCH: '搜尋',
    ABOUT: '關於',
-    MAIL: '電郵'
+    MAIL: '電郵',
+    NAVIGATOR: '導航',
+    ARCHIVE: '封存'
+  },
+  COMMON: {
+    ARTICLE_LIST: '文章列表',
+    MORE: '更多',
+    NO_MORE: '沒有更多了',
+    LATEST_POSTS: '最新文章',
+    TAGS: '標籤',
+    NO_TAG: '無標籤',
+    CATEGORY: '分類',
+    SHARE: '分享',
+    SCAN_QR_CODE: 'QRCode',
+    URL_COPIED: '連結已複製！',
+    TABLE_OF_CONTENTS: '目錄',
+    RELATE_POSTS: '相關文章',
+    COPYRIGHT: '著作權',
+    AUTHOR: '作者',
+    URL: '連結',
+    ANALYTICS: '分析',
+    POSTS: '篇文章',
+    ARTICLE: '文章',
+    VISITORS: '位訪客',
+    VIEWS: '次查看',
+    COPYRIGHT_NOTICE: '本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。',
+    RESULT_OF_SEARCH: '篇搜尋到的结果',
+    ARTICLE_DETAIL: '完整文章',
+    PASSWORD_ERROR: '密碼錯誤！',
+    ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
+    SUBMIT: '提交',
+    POST_TIME: '发布于',
+    LAST_EDITED_TIME: '最后更新'
  },
  PAGINATION: {
    PREV: '上一頁',
@@ -13,7 +45,7 @@ export default {
  },
  SEARCH: {
    ARTICLES: '搜尋文章',
-    TAGS: '搜尋標簽'
+    TAGS: '搜尋標籤'
  },
  POST: {
    BACK: '返回',
--- a/lib/lang/zh-TW.js
+++ b/lib/lang/zh-TW.js
@@ -10,6 +10,7 @@ export default {
    ARCHIVE: '封存'
  },
  COMMON: {
+    ARTICLE_LIST: '文章列表',
    MORE: '更多',
    NO_MORE: '沒有更多了',
    LATEST_POSTS: '最新文章',
--- a/lib/notion/getPageProperties.js
+++ b/lib/notion/getPageProperties.js
@@ -6,10 +6,9 @@ import formatDate from '../utils/formatDate'
 import md5 from 'js-md5'
 import { siteConfig } from '../config'
 import {
-  checkStartWithHttp,
-  convertUrlStartWithOneSlash,
-  getLastSegmentFromUrl,
-  sliceUrlFromHttp
+    checkStartWithHttp,
+    convertUrlStartWithOneSlash,
+    getLastSegmentFromUrl
 } from '../utils'
 import { extractLangPrefix } from '../utils/pageId'
 import { mapImgUrl } from './mapImage'
@@ -188,29 +187,26 @@ export function adjustPageProperties(properties, NOTION_CONFIG) {
    properties.name = properties.title ?? ''
  }

-  // 开启伪静态路径
-  if (siteConfig('PSEUDO_STATIC', false, NOTION_CONFIG)) {
-    if (
-      !properties?.href?.endsWith('.html') &&
-      !properties?.href?.startsWith('http') &&
-      properties?.href !== '' &&
-      properties?.href !== '#' &&
-      properties?.href !== '/'
-    ) {
-      properties.href += '.html'
-    }
-  }
-
-  // 检查处理外链
-  properties.href = checkStartWithHttp(properties?.href)
-    ? sliceUrlFromHttp(properties?.href)
-    : convertUrlStartWithOneSlash(properties?.href)
-
-  // 设置链接在页内或新页面打开
-  if (properties.href?.indexOf('http') === 0) {
+  // http or https 开头的视为外链
+  if (checkStartWithHttp(properties?.href)) {
+    properties.href = properties?.slug
    properties.target = '_blank'
  } else {
    properties.target = '_self'
+    // 伪静态路径右侧拼接.html
+    if (siteConfig('PSEUDO_STATIC', false, NOTION_CONFIG)) {
+      if (
+        !properties?.href?.endsWith('.html') &&
+        properties?.href !== '' &&
+        properties?.href !== '#' &&
+        properties?.href !== '/'
+      ) {
+        properties.href += '.html'
+      }
+    }
+
+    // 相对路径转绝对路径：url左侧拼接 /
+    properties.href = convertUrlStartWithOneSlash(properties?.href)
  }

  // 如果跳转链接是多语言，则在新窗口打开
@@ -239,6 +235,10 @@ export function adjustPageProperties(properties, NOTION_CONFIG) {
 * @returns
 */
 function generateCustomizeSlug(postProperties, NOTION_CONFIG) {
+  // 外链不处理
+  if (checkStartWithHttp(postProperties.slug)) {
+    return postProperties.slug
+  }
  let fullPrefix = ''
  const allSlugPatterns = siteConfig(
    'POST_URL_PREFIX',
@@ -290,5 +290,10 @@ function generateCustomizeSlug(postProperties, NOTION_CONFIG) {
  if (fullPrefix.endsWith('/')) {
    fullPrefix = fullPrefix.substring(0, fullPrefix.length - 1) // 去掉尾部部的"/"
  }
-  return `${fullPrefix}/${postProperties.slug ?? postProperties.id}`
+
+  if(fullPrefix){
+    return `${fullPrefix}/${postProperties.slug ?? postProperties.id}`
+  }else{
+    return `${postProperties.slug ?? postProperties.id}`
+  }
 }
--- a/lib/notion/mapImage.js
+++ b/lib/notion/mapImage.js
@@ -110,6 +110,8 @@ const compressImage = (image, width, quality = 50, fmt = 'webp') => {
    return image
  }

+  if (image.includes(".svg")) return image
+
  if (!width || width === 0) {
    width = siteConfig('IMAGE_COMPRESS_WIDTH')
  }
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -47,7 +47,12 @@ export const memorize = Component => {
  return memo(MemoizedComponent)
 }

-// 转换外链
+/**
+ * 诸如 article/https://test.com 等被错误拼接前缀的slug进行处理
+ * 转换为 https://test.com
+ * @param {*} str
+ * @returns
+ */
 export function sliceUrlFromHttp(str) {
  // 检查字符串是否包含http
  if (str?.includes('http:') || str?.includes('https:')) {
@@ -99,7 +104,7 @@ export function checkStartWithHttp(str) {
  // 检查字符串是否包含http
  if (str?.indexOf('http:') === 0 || str?.indexOf('https:') === 0) {
    // 如果包含，找到http的位置
-    return str?.indexOf('http') > -1
+    return true
  } else {
    // 不包含
    return false
--- a/next.config.js
+++ b/next.config.js
@@ -32,6 +32,16 @@ const locales = (function () {
  return langs
 })()

+// 编译前执行
+// const preBuild = (function () {
+//   // 删除 public/sitemap.xml 文件 ； 否则会和/pages/sitemap.xml.js 冲突。
+//   const sitemapPath = path.resolve(__dirname, 'public', 'sitemap.xml')
+//   if (fs.existsSync(sitemapPath)) {
+//     fs.unlinkSync(sitemapPath)
+//     console.log('Deleted existing sitemap.xml from public directory')
+//   }
+// })()
+
 /**
 * 扫描指定目录下的文件夹名，用于获取所有主题
 * @param {*} directory
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "4.6.0",
+  "version": "4.6.1",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/pages/[prefix]/[slug]/[...suffix].js
+++ b/pages/[prefix]/[slug]/[...suffix].js
@@ -30,17 +30,17 @@ export async function getStaticPaths() {

  const from = 'slug-paths'
  const { allPages } = await getGlobalData({ from })
-
+  const paths = allPages
+    ?.filter(row => checkSlugHasMorThanTwoSlash(row))
+    .map(row => ({
+      params: {
+        prefix: row.slug.split('/')[0],
+        slug: row.slug.split('/')[1],
+        suffix: row.slug.split('/').slice(2)
+      }
+    }))
  return {
-    paths: allPages
-      ?.filter(row => checkSlugHasMorThanTwoSlash(row))
-      .map(row => ({
-        params: {
-          prefix: row.slug.split('/')[0],
-          slug: row.slug.split('/')[1],
-          suffix: row.slug.split('/').slice(1)
-        }
-      })),
+    paths: paths,
    fallback: true
  }
 }
--- a/pages/[prefix]/index.js
+++ b/pages/[prefix]/index.js
@@ -129,7 +129,7 @@ export async function getStaticProps({ params: { prefix }, locale }) {
      fullSlug += '.html'
    }
  }
-
+  
  // 在列表内查找文章
  props.post = props?.allPages?.find(p => {
    return (
--- a/pages/category/[category]/page/[page].js
+++ b/pages/category/[category]/page/[page].js
@@ -71,7 +71,7 @@ export async function getStaticPaths() {
    // 处理文章页数
    const postCount = categoryPosts.length
    const totalPages = Math.ceil(
-      postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+      postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
    )
    if (totalPages > 1) {
      for (let i = 1; i <= totalPages; i++) {
--- a/pages/page/[page].js
+++ b/pages/page/[page].js
@@ -23,7 +23,7 @@ export async function getStaticPaths({ locale }) {
  const from = 'page-paths'
  const { postCount, NOTION_CONFIG } = await getGlobalData({ from, locale })
  const totalPages = Math.ceil(
-    postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+    postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  )
  return {
    // remove first page, we 're not gonna handle that.
--- a/pages/sitemap.xml.js
+++ b/pages/sitemap.xml.js
@@ -27,7 +27,6 @@ export const getServerSideProps = async ctx => {
    'Cache-Control',
    'public, max-age=3600, stale-while-revalidate=59'
  )
-  console.log('fff', fields)
  return getServerSideSitemap(ctx, fields)
 }

@@ -55,7 +54,7 @@ function generateLocalesSitemap(link, allPages, locale) {
      priority: '0.7'
    },
    {
-      loc: `${link}${locale}/feed`,
+      loc: `${link}${locale}/rss/feed.xml`,
      lastmod: new Date().toISOString().split('T')[0],
      changefreq: 'daily',
      priority: '0.7'
--- a/pages/tag/[tag]/page/[page].js
+++ b/pages/tag/[tag]/page/[page].js
@@ -56,7 +56,7 @@ export async function getStaticPaths() {
    // 处理文章页数
    const postCount = tagPosts.length
    const totalPages = Math.ceil(
-      postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+      postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
    )
    if (totalPages > 1) {
      for (let i = 1; i <= totalPages; i++) {
--- a/public/js/sakura.js
+++ b/public/js/sakura.js
@@ -123,7 +123,7 @@ function createSakura() {
      'style',
      'position: fixed;left: 0;top: 0;pointer-events: none;'
    )
-    canvas.setAttribute('id', id)
+    canvas.setAttribute('id', 'sakura')
    document.getElementsByTagName('body')[0].appendChild(canvas)
    cxt = canvas.getContext('2d')
    var sakuraList = new SakuraList()
@@ -183,4 +183,4 @@ function destroySakura() {
 }

 window.createSakura = createSakura
-window.destroySakura = destroySakura
+window.destroySakura = destroySakura
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -264,3 +264,11 @@ a.avatar-wrapper {
  writing-mode: vertical-rl; /* 竖向排列从右向左 */
  text-orientation: upright; /* 文字方向正常 */
 }
+
+/* Chatbase 在移动端禁止遮挡 */
+@media (max-width: 700px) {
+  button#chatbase-bubble-button {
+    margin-bottom: 42px;
+    margin-right: 20px;
+  }
+}
--- a/themes/commerce/components/BlogPostListPage.js
+++ b/themes/commerce/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import ProductCard from './ProductCard'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const showPagination = postCount >= POSTS_PER_PAGE
  if (!posts || posts.length === 0 || page > totalPage) {
--- a/themes/commerce/components/BlogPostListScroll.js
+++ b/themes/commerce/components/BlogPostListScroll.js
@@ -20,7 +20,7 @@ const BlogPostListScroll = ({
  siteInfo
 }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)

  const [page, updatePage] = useState(1)
  const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
--- a/themes/commerce/components/SocialButton.js
+++ b/themes/commerce/components/SocialButton.js
@@ -5,39 +5,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600'/>
-      </a>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-red-400 hover:text-red-600' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -14,7 +14,7 @@ export const BlogListPage = props => {
  const { locale, NOTION_CONFIG } = useGlobal()
  const router = useRouter()
  const totalPage = Math.ceil(
-    postCount / siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+    postCount / siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  )
  const currentPage = +page

@@ -45,7 +45,7 @@ export const BlogListPage = props => {
                : `${pagePrefix}/page/${currentPage - 1}`,
            query: router.query.s ? { s: router.query.s } : {}
          }}
-          className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showPrev ? 'bg-black dark:bg-hexo-black-gray' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
          {locale.PAGINATION.PREV}
        </Link>
        <Link
@@ -53,7 +53,7 @@ export const BlogListPage = props => {
            pathname: `${pagePrefix}/page/${currentPage + 1}`,
            query: router.query.s ? { s: router.query.s } : {}
          }}
-          className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
+          className={`${showNext ? 'bg-black dark:bg-hexo-black-gray ' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
          {locale.PAGINATION.NEXT}
        </Link>
      </div>
--- a/themes/example/components/BlogListScroll.js
+++ b/themes/example/components/BlogListScroll.js
@@ -13,7 +13,7 @@ export const BlogListScroll = props => {
  const { posts } = props
  const { locale, NOTION_CONFIG } = useGlobal()
  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)

  let hasMore = false
  const postsToShow = posts
--- a/themes/example/components/Catalog.js
+++ b/themes/example/components/Catalog.js
@@ -0,0 +1,94 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ toc }) => {
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', actionSectionScrollSpy)
+    actionSectionScrollSpy()
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  const tocIds = []
+
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+  const throttleMs = 200
+  const actionSectionScrollSpy = useCallback(
+    throttle(() => {
+      const sections = document.getElementsByClassName('notion-h')
+      let prevBBox = null
+      let currentSectionId = activeSection
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i]
+        if (!section || !(section instanceof Element)) continue
+        if (!currentSectionId) {
+          currentSectionId = section.getAttribute('data-id')
+        }
+        const bbox = section.getBoundingClientRect()
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0
+        const offset = Math.max(150, prevHeight / 4)
+        // GetBoundingClientRect returns values relative to viewport
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute('data-id')
+          prevBBox = bbox
+          continue
+        }
+        // No need to continue loop, if last element has been detected
+        break
+      }
+      setActiveSection(currentSectionId)
+      const index = tocIds.indexOf(currentSectionId) || 0
+      tRef?.current?.scrollTo({ top: 28 * index, behavior: 'smooth' })
+    }, throttleMs)
+  )
+
+  // 无目录就直接返回空
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
+
+  return (
+    <div className='px-3'>
+      <div
+        className='overflow-y-auto max-h-96 overscroll-none scroll-hidden'
+        ref={tRef}>
+        <nav className='h-full  text-black dark:text-gray-300'>
+          {toc.map(tocItem => {
+            const id = uuidToId(tocItem.id)
+            tocIds.push(id)
+            return (
+              <a
+                key={id}
+                href={`#${id}`}
+                className={`notion-table-of-contents-item duration-300 transform font-light
+              notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    marginLeft: tocItem.indentLevel * 16
+                  }}
+                  className={`truncate ${activeSection === id ? ' font-bold text-red-400 underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog
--- a/themes/example/components/SearchInput.js
+++ b/themes/example/components/SearchInput.js
@@ -24,7 +24,6 @@ const SearchInput = ({ currentTag, keyword, cRef }) => {
    const key = searchInputRef.current.value
    if (key && key !== '') {
      router.push({ pathname: '/search/' + key }).then(r => {
-        console.log('搜索', key)
      })
    } else {
      router.push({ pathname: '/' }).then(r => {
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import CONFIG from '../config'
 import Announcement from './Announcement'
+import Catalog from './Catalog'
 const ExampleRecentComments = dynamic(
  () => import('./RecentCommentListForExample')
 )
@@ -32,6 +33,16 @@ export const SideBar = props => {

  return (
    <>
+      {/* 目录 */}
+      {post?.toc && post?.toc.length > 2 && (
+        <aside className='w-full rounded shadow overflow-hidden mb-6 pb-4'>
+          <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
+            {locale.COMMON.TABLE_OF_CONTENTS}
+          </h3>
+          <Catalog toc={post?.toc} />
+        </aside>
+      )}
+
      {/* 分类 */}
      <aside className='w-full rounded shadow overflow-hidden mb-6'>
        <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -70,8 +70,8 @@ function AsideLeft(props) {
    }
  }, [isCollapsed])

+  const isReverse = siteConfig('LAYOUT_SIDEBAR_REVERSE')
  const position = useMemo(() => {
-    const isReverse = JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
    if (isCollapsed) {
      if (isReverse) {
        return 'right-2'
--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -1,6 +1,7 @@
 import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import CONFIG from '../config'
 import TagItemMini from './TagItemMini'
@@ -10,7 +11,8 @@ import TagItemMini from './TagItemMini'
 * @param {*} param0
 * @returns
 */
-const BlogCard = ({ index, post, showSummary, siteInfo }) => {
+const BlogCard = ({ showAnimate, post, showSummary }) => {
+const {siteInfo} =useGlobal()
  const showPreview =
    siteConfig('FUKASAWA_POST_LIST_PREVIEW', null, CONFIG) && post.blockMap
  // fukasawa 强制显示图片
@@ -24,11 +26,12 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
  const showPageCover =
    siteConfig('FUKASAWA_POST_LIST_COVER', null, CONFIG) &&
    post?.pageCoverThumbnail
+    
  const FUKASAWA_POST_LIST_ANIMATION = siteConfig(
    'FUKASAWA_POST_LIST_ANIMATION',
    null,
    CONFIG
-  )
+  ) || showAnimate 

  // 动画样式  首屏卡片不用，后面翻出来的加动画
  const aosProps = FUKASAWA_POST_LIST_ANIMATION
--- a/themes/fukasawa/components/BlogListPage.js
+++ b/themes/fukasawa/components/BlogListPage.js
@@ -17,8 +17,9 @@ import PaginationSimple from './PaginationSimple'
 */
 const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const { NOTION_CONFIG } = useGlobal()
+  const postsPerPage = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
+    postCount / postsPerPage
  )
  const showNext = page < totalPage

@@ -33,23 +34,27 @@ const BlogListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
    return () => window.removeEventListener('resize', handleResize)
  }, [])

-  /**
-   * 文章重新布局，使纵向排列看起来是横向排列
-   */
+   /**
+    * 文章重新布局，使纵向排列看起来是横向排列
+    */
  useEffect(() => {
-    const count = posts?.length || 0
-    const rows = Math.ceil(count / columns)
-    const newFilterPosts = []
-    for (let i = 0; i < columns; i++) {
-      for (let j = 0; j < rows; j++) {
-        const index = j * columns + i
-        if (index < count) {
-          newFilterPosts.push(deepClone(posts[index]))
+    const count = posts?.length || 0;
+    const rows = Math.ceil(count / columns);
+    const newFilterPosts = new Array(count);
+
+    let index = 0;
+    for (let col = 0; col < columns; col++) {
+        for (let row = 0; row < rows; row++) {
+        const sourceIndex = row * columns + col;
+        if (sourceIndex < count) {
+            newFilterPosts[index] = deepClone(posts[sourceIndex]);
+            index++;
+        }
        }
-      }
    }
-    setFilterPosts(newFilterPosts)
-  }, [columns, posts])
+  
+    setFilterPosts(newFilterPosts);
+  }, [columns, posts]);

  if (!filterPosts || filterPosts.length === 0) {
    return <BlogPostListEmpty />
--- a/themes/fukasawa/components/BlogListScroll.js
+++ b/themes/fukasawa/components/BlogListScroll.js
@@ -1,41 +1,36 @@
-import { siteConfig } from '@/lib/config'
-import { useGlobal } from '@/lib/global'
-import { useEffect, useRef, useState } from 'react'
-import BlogCard from './BlogCard'
-import BlogPostListEmpty from './BlogListEmpty'
+import { siteConfig } from '@/lib/config';
+import { useGlobal } from '@/lib/global';
+import throttle from 'lodash.throttle';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import BlogCard from './BlogCard';
+import BlogPostListEmpty from './BlogListEmpty';
+
+const BlogListScroll = ({ posts }) => {
+  const { locale, NOTION_CONFIG } = useGlobal();
+  const [page, setPage] = useState(1);
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG);
+  const [filterPostsGroups, setFilterPostsGroups] = useState([]);
+
+  // 每页显示的文章数量
+  const postsPerPage = POSTS_PER_PAGE;
+
+  // 计算总页数
+  const totalPages = Math.ceil(posts.length / postsPerPage);
+
+  // 加载更多文章
+  const loadMorePosts = () => {
+    if (page < totalPages) {
+      setPage(page + 1);
+    }
+  };
+

-/**
- * 文章列表分页表格
- * @param page 当前页
- * @param posts 所有文章
- * @param tags 所有标签
- * @returns {JSX.Element}
- * @constructor
- */
-const BlogListScroll = props => {
-  const { posts = [], siteInfo } = props
-  const { locale, NOTION_CONFIG } = useGlobal()
  const targetRef = useRef(null)
-  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)

-  let hasMore = false
-  const postsToShow = posts
-    ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
-    : []
-
-  if (posts) {
-    const totalCount = posts.length
-    hasMore = page * POSTS_PER_PAGE < totalCount
-  }
-  const handleGetMore = () => {
-    if (!hasMore) return
-    updatePage(page + 1)
-  }

  // 监听滚动自动分页加载
-  const scrollTrigger = () => {
-    requestAnimationFrame(() => {
+  const scrollTrigger = useCallback(
+    throttle(() => {
      const scrollS = window.scrollY + window.outerHeight
      const clientHeight = targetRef
        ? targetRef.current
@@ -43,47 +38,64 @@ const BlogListScroll = props => {
          : 0
        : 0
      if (scrollS > clientHeight + 100) {
-        handleGetMore()
+        loadMorePosts()
      }
-    })
-  }
+    }, 500)
+  )

  useEffect(() => {
    window.addEventListener('scroll', scrollTrigger)
    return () => {
      window.removeEventListener('scroll', scrollTrigger)
    }
-  }, [])
+  })
+
+  // 根据当前页和每页文章数截取应该显示的文章
+  useEffect(() => {
+    const startIndex = (page - 1) * postsPerPage;
+    const endIndex = startIndex + postsPerPage;
+    const postsToShow = posts.slice(startIndex, endIndex);
+    const columns = 3; // 假设有3列
+
+    // 重新排列文章，保证列优先顺序
+    const newFilterPosts = [];
+    for (let col = 0; col < columns; col++) {
+      for (let i = col; i < postsToShow.length; i += columns) {
+        newFilterPosts.push(postsToShow[i]);
+      }
+    }
+
+    setFilterPostsGroups((prev) => [...prev, newFilterPosts]);
+  }, [posts, page]);

  if (!posts || posts.length === 0) {
-    return <BlogPostListEmpty />
+    return <BlogPostListEmpty />;
  } else {
    return (
-      <div id='posts-wrapper' ref={targetRef} className='grid-container'>
-        {/* 文章列表 */}
-        {postsToShow?.map(post => (
-          <div
-            key={post.id}
-            className='grid-item justify-center flex'
-            style={{ breakInside: 'avoid' }}>
-            <BlogCard
-              index={posts.indexOf(post)}
-              key={post.id}
-              post={post}
-              siteInfo={siteInfo}
-            />
+      <div ref={targetRef}>
+        {filterPostsGroups.map((group, groupIndex) => (
+          <div key={groupIndex} id="posts-wrapper" className="grid-container mb-10">
+            {group.map((post) => (
+              <div
+                key={post.id}
+                className="grid-item justify-center flex"
+                style={{ breakInside: 'avoid' }}
+              >
+                <BlogCard key={post.id} post={post} showAnimate={groupIndex > 0}/>
+              </div>
+            ))}
          </div>
        ))}
-
        <div
-          className='w-full my-4 py-4 text-center cursor-pointer '
-          onClick={handleGetMore}>
-          {' '}
-          {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}{' '}
+          className="w-full my-4 py-4 text-center cursor-pointer"
+          onClick={loadMorePosts}
+        >
+          {page < totalPages ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
        </div>
      </div>
-    )
+    );
  }
-}
+};
+
+export default BlogListScroll;

-export default BlogListScroll
--- a/themes/fukasawa/components/MenuItemDrop.js
+++ b/themes/fukasawa/components/MenuItemDrop.js
@@ -7,9 +7,11 @@ export const MenuItemDrop = ({ link }) => {

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

--- a/themes/fukasawa/components/SocialButton.js
+++ b/themes/fukasawa/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-52 flex-wrap flex'>
-    <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='w-52 flex-wrap flex'>
+      <div className='space-x-3 text-lg text-gray-500 dark:text-gray-400'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/fukasawa/config.js
+++ b/themes/fukasawa/config.js
@@ -10,11 +10,9 @@ const CONFIG = {
  FUKASAWA_MENU_CATEGORY: true, // 显示分类
  FUKASAWA_MENU_TAG: true, // 显示标签
  FUKASAWA_MENU_ARCHIVE: true, // 显示归档
-  FUKASAWA_MENU_SEARCH: false, // 显示搜索

  FUKASAWA_SIDEBAR_COLLAPSE_BUTTON: true, // 侧边栏折叠按钮
  FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT: false, // 侧边栏默认折叠收起
  FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL: false // 侧边栏滚动时折叠 仅文章阅读页有效
-
 }
 export default CONFIG
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -114,12 +114,13 @@ const LayoutIndex = props => {
 * @param {*} props
 */
 const LayoutPostList = props => {
+  const POST_LIST_STYLE = siteConfig('POST_LIST_STYLE')
  return (
    <>
      <div className='w-full p-2'>
        <WWAds className='w-full' orientation='horizontal' />
      </div>
-      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+      { POST_LIST_STYLE=== 'page' ? (
        <BlogListPage {...props} />
      ) : (
        <BlogListScroll {...props} />
--- a/themes/fukasawa/style.js
+++ b/themes/fukasawa/style.js
@@ -44,7 +44,16 @@ const Style = () => {
        column-gap: .5rem;
        }
    }
+
+    .container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-gap: 10px;
+            padding: 10px;
+        }
+
  `}</style>
 }

 export { Style }
+
--- a/themes/game/components/BlogListScroll.js
+++ b/themes/game/components/BlogListScroll.js
@@ -9,7 +9,7 @@ export const BlogListScroll = props => {
  const { posts } = props
  const { locale, NOTION_CONFIG } = useGlobal()
  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)

  let hasMore = false
  const postsToShow =
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,23 +1,27 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import JumpToTopButton from './JumpToTopButton'
+import MobileButtonCatalog from './MobileButtonCatalog'
+import MobileButtonPageNav from './MobileButtonPageNav'

+/**
+ * 移动端底部导航
+ * @param {*} param0
+ * @returns
+ */
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
+  const showTocButton = post?.toc?.length > 1

  return (
-        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
-            <div className='flex justify-between h-full shadow-card'>
-                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
-                <i className="fa-solid fa-book"></i>
-                </div>
-                <div className='flex w-full items-center justify-center cursor-pointer'>
-                    <JumpToTopButton />
-                </div>
-            </div>
+    <>
+      {/* 移动端底部导航按钮 */}
+      <div className='bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
+        <div className='w-full'>
+          <MobileButtonPageNav />
        </div>
+        {showTocButton && (
+          <div className='w-full'>
+            <MobileButtonCatalog />
+          </div>
+        )}
+      </div>
+    </>
  )
 }
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -13,6 +14,7 @@ const Catalog = ({ post }) => {
  const toc = post?.toc
  // 同步选中目录事件
  const [activeSection, setActiveSection] = useState(null)
+  const {locale}= useGlobal()

  // 监听滚动事件
  useEffect(() => {
@@ -67,6 +69,7 @@ const Catalog = ({ post }) => {

  return (
    <>
+      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
      <div
        id='toc-wrapper'
        className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -1,5 +1,10 @@
 import { siteConfig } from '@/lib/config'
-
+import SocialButton from './SocialButton'
+/**
+ * 站点也叫
+ * @param {*} param0
+ * @returns
+ */
 const Footer = ({ siteInfo }) => {
  const d = new Date()
  const currentYear = d.getFullYear()
@@ -11,7 +16,9 @@ const Footer = ({ siteInfo }) => {
    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
      <hr className='pb-2' />

-      <div className='flex justify-center'>
+      <SocialButton />
+
+      <div className='flex justify-center pt-1'>
        <div>
          <i className='mx-1 animate-pulse fas fa-heart' />{' '}
          <a
--- a/themes/gitbook/components/MobileButtonCatalog.js
+++ b/themes/gitbook/components/MobileButtonCatalog.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'

 /**
@@ -5,6 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
 */
 export default function MobileButtonCatalog() {
  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()

  const toggleToc = () => {
    changeTocVisible(!tocVisible)
@@ -19,9 +21,11 @@ export default function MobileButtonCatalog() {
      <a
        id='toc-button'
        className={
-          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-list-ol fas' />
+        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+      </a>
    </div>
  )
 }
--- a/themes/gitbook/components/MobileButtonPageNav.js
+++ b/themes/gitbook/components/MobileButtonPageNav.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'

 /**
@@ -5,7 +6,7 @@ import { useGitBookGlobal } from '@/themes/gitbook'
 */
 export default function MobileButtonPageNav() {
  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
+  const { locale } = useGlobal()
  const togglePageNavVisible = () => {
    changePageNavVisible(!pageNavVisible)
  }
@@ -17,11 +18,13 @@ export default function MobileButtonPageNav() {
        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
      }>
      <a
-        id='toc-button'
+        id='nav-button'
        className={
-          'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
-        }
-      />
+          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
+        }>
+        <i className='fa-book fas' />
+        <span>{locale.COMMON.ARTICLE_LIST}</span>
+      </a>
    </div>
  )
 }
--- a/themes/gitbook/components/PageNavDrawer.js
+++ b/themes/gitbook/components/PageNavDrawer.js
@@ -34,7 +34,7 @@ const PageNavDrawer = props => {
          className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
-            <span>{locale.COMMON.ARTICLE}</span>
+            <span>{locale.COMMON.ARTICLE_LIST}</span>
            <i
              className='fas fa-times p-1 cursor-pointer'
              onClick={() => {
--- a/themes/gitbook/components/SocialButton.js
+++ b/themes/gitbook/components/SocialButton.js
@@ -1,4 +1,6 @@
+import QrCode from '@/components/QrCode'
 import { siteConfig } from '@/lib/config'
+import { useState } from 'react'

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

-  const showTocButton = post?.toc?.length > 1
  const searchModal = useRef(null)

  useEffect(() => {
@@ -131,7 +129,7 @@ const LayoutBase = props => {

      <div
        id='theme-gitbook'
-        className={`${siteConfig('FONT_STYLE')} scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
+        className={`${siteConfig('FONT_STYLE')} pb-16 md:pb-0 scroll-smooth bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300`}>
        <AlgoliaSearchModal cRef={searchModal} {...props} />

        {/* 顶部导航栏 */}
@@ -239,23 +237,11 @@ const LayoutBase = props => {
          )}
        </main>

-        {/* 移动端底部导航按钮 */}
-        <div className='bottom-button-group md:hidden w-screen h-12 px-4 fixed flex items-center justify-between right-0 bottom-0 z-30 bg-white border-l border-t dark:border-gray-800'>
-          <div className='w-full'>
-            <MobileButtonPageNav />
-          </div>
-          {showTocButton && (
-            <div className='w-full'>
-              <MobileButtonCatalog />
-            </div>
-          )}
-        </div>
-
        {/* 移动端导航抽屉 */}
        <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />

        {/* 移动端底部导航栏 */}
-        {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+        <BottomMenuBar {...props} />
      </div>
    </ThemeGlobalGitbook.Provider>
  )
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -76,7 +76,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {

          {/* 摘要 */}
          {(!showPreview || showSummary) && (
-            <main className='line-clamp-2 replace my-3 2xl:my-1 text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
+            <main className='line-clamp-2 replace text-gray-700  dark:text-gray-300 text-sm font-light leading-tight'>
              {post.summary}
            </main>
          )}
--- a/themes/heo/components/BlogPostListPage.js
+++ b/themes/heo/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const showPagination = postCount >= POSTS_PER_PAGE
  if (!posts || posts.length === 0 || page > totalPage) {
--- a/themes/heo/components/BlogPostListScroll.js
+++ b/themes/heo/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
  const { NOTION_CONFIG } = useGlobal()
  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)

  let hasMore = false
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,4 +1,4 @@
-import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import { ArrowRightCircle } from '@/components/HeroIcons'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
@@ -18,6 +18,10 @@ export function InfoCard(props) {
  const router = useRouter()
  // 在文章详情页特殊处理
  const isSlugPage = router.pathname.indexOf('/[prefix]') === 0
+  const url1 = siteConfig('HEO_INFO_CARD_URL1', null, CONFIG)
+  const icon1 = siteConfig('HEO_INFO_CARD_ICON1', null, CONFIG)
+  const url2 = siteConfig('HEO_INFO_CARD_URL2', null, CONFIG)
+  const icon2 = siteConfig('HEO_INFO_CARD_ICON2', null, CONFIG)
  return (
    <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72 overflow-hidden relative'>
      {/* 信息卡牌第一行 */}
@@ -45,25 +49,55 @@ export function InfoCard(props) {
      <div className='flex justify-between'>
        <div className='flex space-x-3  hover:text-black dark:hover:text-white'>
          {/* 两个社交按钮 */}
-          <div className='bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-            <Link href='/about'>
-              <GlobeAlt className={'w-6 h-6'} />
-            </Link>
-          </div>
-          <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
-            {siteConfig('HEO_INFO_CARD_URL', null, CONFIG) && (
-              <Link href={siteConfig('HEO_INFO_CARD_URL', null, CONFIG)}>
-                <i className='fab fa-github text-xl' />
+          {url1 && (
+            <div className='w-10 text-center bg-indigo-400 p-2 rounded-full  transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url1}>
+                <i className={icon1} />
              </Link>
-            )}
-          </div>
+            </div>
+          )}
+          {url2 && (
+            <div className='bg-indigo-400 p-2 rounded-full w-10 items-center flex justify-center transition-colors duration-200 dark:bg-yellow-500 dark:hover:bg-black hover:bg-white'>
+              <Link href={url2}>
+                <i className={icon2} />
+              </Link>
+            </div>
+          )}
        </div>
+        {/* 第三个按钮 */}
        <MoreButton />
      </div>
    </Card>
  )
 }

+/**
+ * 了解更多按鈕
+ * @returns
+ */
+function MoreButton() {
+  const url3 = siteConfig('HEO_INFO_CARD_URL3', null, CONFIG)
+  const text3 = siteConfig('HEO_INFO_CARD_TEXT3', null, CONFIG)
+  if (!url3) {
+    return <></>
+  }
+  return (
+    <Link href={url3}>
+      <div
+        className={
+          'group bg-indigo-400 dark:bg-yellow-500 hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white flex items-center transition-colors duration-200 py-2 px-3 rounded-full space-x-1'
+        }>
+        <ArrowRightCircle
+          className={
+            'group-hover:stroke-black dark:group-hover:stroke-white w-6 h-6 transition-all duration-100'
+          }
+        />
+        <div className='font-bold'>{text3}</div>
+      </div>
+    </Link>
+  )
+}
+
 /**
 * 欢迎语
 */
@@ -84,25 +118,3 @@ function GreetingsWords() {
    </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/SocialButton.js
+++ b/themes/heo/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-full justify-center flex-wrap flex'>
-    <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
+  return (
+    <div className='w-full justify-center flex-wrap flex'>
+      <div className='space-x-12 text-3xl text-gray-600 dark:text-gray-300 '>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-bilibili dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='transform hover:scale-125 duration-150 fab fa-youtube dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/heo/config.js
+++ b/themes/heo/config.js
@@ -42,7 +42,14 @@ const CONFIG = {
    '🤖️ 数码科技爱好者',
    '🧱 团队小组发动机'
  ],
-  HEO_INFO_CARD_URL: 'https://github.com/tangly1024/NotionNext', // 个人资料底部按钮链接
+
+  // 个人资料底部按钮
+  HEO_INFO_CARD_URL1: '/about',
+  HEO_INFO_CARD_ICON1: 'fas fa-user',
+  HEO_INFO_CARD_URL2: 'https://github.com/tangly1024',
+  HEO_INFO_CARD_ICON2: 'fab fa-github',
+  HEO_INFO_CARD_URL3: 'https://www.tangly1024.com',
+  HEO_INFO_CARD_TEXT3: '了解更多',

  // 用户技能图标
  HEO_GROUP_ICONS: [
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -45,13 +45,15 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
        {/* 图片封面 */}
        {showPageCover && (
          <div className='md:w-5/12 overflow-hidden'>
-            <Link href={post?.href} passHref legacyBehavior>
-              <LazyImage
-                priority={index === 1}
-                alt={post?.title}
-                src={post?.pageCoverThumbnail}
-                className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500'
-              />
+            <Link href={post?.href}>
+              <>
+                <LazyImage
+                  priority={index === 1}
+                  alt={post?.title}
+                  src={post?.pageCoverThumbnail}
+                  className='h-56 w-full object-cover object-center group-hover:scale-110 duration-500'
+                />
+              </>
            </Link>
          </div>
        )}
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/themes/hexo/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const showPagination = postCount >= POSTS_PER_PAGE
  if (!posts || posts.length === 0 || page > totalPage) {
--- a/themes/hexo/components/BlogPostListScroll.js
+++ b/themes/hexo/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
 }) => {
  const { NOTION_CONFIG } = useGlobal()
  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)

  let hasMore = false
--- a/themes/hexo/components/Hero.js
+++ b/themes/hexo/components/Hero.js
@@ -27,7 +27,7 @@ const Hero = props => {

    if (!typed && window && document.getElementById('typed')) {
      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js',
        'js'
      ).then(() => {
        if (window.Typed) {
--- a/themes/hexo/components/SocialButton.js
+++ b/themes/hexo/components/SocialButton.js
@@ -99,7 +99,11 @@ const SocialButton = () => {
          </a>
        )}
        {ENABLE_RSS && (
-          <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'}>
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
            <i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600' />
          </a>
        )}
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount, siteInfo }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const showPagination = postCount >= POSTS_PER_PAGE
  if (!posts || posts.length === 0 || page > totalPage) {
--- a/themes/matery/components/BlogPostListScroll.js
+++ b/themes/matery/components/BlogPostListScroll.js
@@ -21,7 +21,7 @@ const BlogPostListScroll = ({
  siteInfo
 }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const [page, updatePage] = useState(1)
  const postsToShow = getListByPage(posts, page, POSTS_PER_PAGE)
  // 监听滚动
--- a/themes/matery/components/Hero.js
+++ b/themes/matery/components/Hero.js
@@ -22,7 +22,7 @@ const Hero = props => {
    updateHeaderHeight()
    if (!typed && window && document.getElementById('typed')) {
      loadExternalResource(
-        'https://cdn.jsdelivr.net/npm/typed.js@2.0.12',
+        'https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js',
        'js'
      ).then(() => {
        if (window.Typed) {
--- a/themes/matery/components/SocialButton.js
+++ b/themes/matery/components/SocialButton.js
@@ -12,42 +12,113 @@ const SocialButton = () => {
    setShow(!show)
  }

-  return <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
-        {!show && <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-user py-0.5' />}
-        {show && <>
-            {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-github ' />
-            </a>}
-            {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
-            </a>}
-            {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-                <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
-            </a>}
-            {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkIn'} >
-                <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
-            </a>}
-            {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
-            </a>}
-            {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-                <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
-            </a>}
-            {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-                <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
-            </a>}
-            {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-                <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
-            </a>}
-            {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-                <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-            </a>}
-            {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-                <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-            </a>}
-            <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-close ' />
-
-        </>}
+  return (
+    <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
+      {!show && (
+        <i
+          onClick={toggleShow}
+          className='transform hover:scale-125 duration-150 fas fa-user py-0.5'
+        />
+      )}
+      {show && (
+        <>
+          {siteConfig('CONTACT_GITHUB') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'github'}
+              href={siteConfig('CONTACT_GITHUB')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-github ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_TWITTER') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'twitter'}
+              href={siteConfig('CONTACT_TWITTER')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_TELEGRAM') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              href={siteConfig('CONTACT_TELEGRAM')}
+              title={'telegram'}>
+              <i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_LINKEDIN') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              href={siteConfig('CONTACT_LINKEDIN')}
+              title={'linkIn'}>
+              <i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_WEIBO') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'weibo'}
+              href={siteConfig('CONTACT_WEIBO')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_INSTAGRAM') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'instagram'}
+              href={siteConfig('CONTACT_INSTAGRAM')}>
+              <i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_EMAIL') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'email'}
+              href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+              <i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
+            </a>
+          )}
+          {JSON.parse(siteConfig('ENABLE_RSS')) && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'RSS'}
+              href={'/rss/feed.xml'}>
+              <i className='transform hover:scale-125 duration-150 fas fa-rss ' />
+            </a>
+          )}
+          {siteConfig('CONTACT_BILIBILI') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'bilibili'}
+              href={siteConfig('CONTACT_BILIBILI')}>
+              <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+            </a>
+          )}
+          {siteConfig('CONTACT_YOUTUBE') && (
+            <a
+              target='_blank'
+              rel='noreferrer'
+              title={'youtube'}
+              href={siteConfig('CONTACT_YOUTUBE')}>
+              <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+            </a>
+          )}
+          <i
+            onClick={toggleShow}
+            className='transform hover:scale-125 duration-150 fas fa-close '
+          />
+        </>
+      )}
    </div>
+  )
 }
 export default SocialButton
--- a/themes/medium/components/BlogPostListPage.js
+++ b/themes/medium/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationSimple from './PaginationSimple'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)

  if (!posts || posts.length === 0) {
--- a/themes/medium/components/BlogPostListScroll.js
+++ b/themes/medium/components/BlogPostListScroll.js
@@ -15,7 +15,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
 */
 const BlogPostListScroll = ({ posts = [], currentSearch }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const [page, updatePage] = useState(1)
  const router = useRouter()
  let filteredPosts = Object.assign(posts)
--- a/themes/medium/components/SocialButton.js
+++ b/themes/medium/components/SocialButton.js
@@ -6,37 +6,99 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
+  return (
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {siteConfig('CONTACT_GITHUB') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'github'}
+          href={siteConfig('CONTACT_GITHUB')}>
+          <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TWITTER') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'twitter'}
+          href={siteConfig('CONTACT_TWITTER')}>
+          <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TELEGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_TELEGRAM')}
+          title={'telegram'}>
+          <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_LINKEDIN') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_LINKEDIN')}
+          title={'linkedIn'}>
+          <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_WEIBO') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'weibo'}
+          href={siteConfig('CONTACT_WEIBO')}>
+          <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_INSTAGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'instagram'}
+          href={siteConfig('CONTACT_INSTAGRAM')}>
+          <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_EMAIL') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'email'}
+          href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+          <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'RSS'}
+          href={'/rss/feed.xml'}>
+          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_BILIBILI') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'bilibili'}
+          href={siteConfig('CONTACT_BILIBILI')}>
+          <i className='fab fa-bilibili transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_YOUTUBE') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'youtube'}
+          href={siteConfig('CONTACT_YOUTUBE')}>
+          <i className='fab fa-youtube transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
    </div>
+  )
 }
 export default SocialButton
--- a/themes/movie/components/BlogListPage.js
+++ b/themes/movie/components/BlogListPage.js
@@ -7,7 +7,7 @@ import PaginationNumber from './PaginationNumber'
 export const BlogListPage = props => {
  const { page = 1, posts, postCount } = props
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)

  const showPageCover = siteConfig('MOVIE_POST_LIST_COVER', null, CONFIG)
--- a/themes/nav/components/BlogPostListAll.js
+++ b/themes/nav/components/BlogPostListAll.js
@@ -1,9 +1,9 @@
 /* eslint-disable */
-import BlogPostListEmpty from './BlogPostListEmpty'
-import BlogPostItem from './BlogPostItem'
+import { siteConfig } from '@/lib/config'
 import { useNavGlobal } from '@/themes/nav'
 import CONFIG from '../config'
-import { siteConfig } from '@/lib/config'
+import BlogPostItem from './BlogPostItem'
+import BlogPostListEmpty from './BlogPostListEmpty'

 /**
 * 博客列表滚动分页
--- a/themes/nav/components/BlogPostListPage.js
+++ b/themes/nav/components/BlogPostListPage.js
@@ -13,7 +13,7 @@ import PaginationSimple from './PaginationSimple'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
  const totalPage = Math.ceil(
-    postCount / parseInt(siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG))
+    postCount / parseInt(siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG))
  )

  if (!posts || posts.length === 0) {
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -16,8 +16,6 @@ const NavPostItem = props => {
  const toggleOpenSubMenu = () => {
    changeIsOpen(!isOpen)
  }
-  console.log('group::')
-  console.log(group)

  if (group?.category) {
    return (
--- a/themes/nav/components/SocialButton.js
+++ b/themes/nav/components/SocialButton.js
@@ -6,31 +6,81 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
-      </a>}
+  return (
+    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
+      {siteConfig('CONTACT_GITHUB') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'github'}
+          href={siteConfig('CONTACT_GITHUB')}>
+          <i className='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TWITTER') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'twitter'}
+          href={siteConfig('CONTACT_TWITTER')}>
+          <i className='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_TELEGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_TELEGRAM')}
+          title={'telegram'}>
+          <i className='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_LINKEDIN') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href={siteConfig('CONTACT_LINKEDIN')}
+          title={'linkedIn'}>
+          <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_WEIBO') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'weibo'}
+          href={siteConfig('CONTACT_WEIBO')}>
+          <i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_INSTAGRAM') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'instagram'}
+          href={siteConfig('CONTACT_INSTAGRAM')}>
+          <i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {siteConfig('CONTACT_EMAIL') && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'email'}
+          href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+          <i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
+      {JSON.parse(siteConfig('ENABLE_RSS')) && (
+        <a
+          target='_blank'
+          rel='noreferrer'
+          title={'RSS'}
+          href={'/rss/feed.xml'}>
+          <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600' />
+        </a>
+      )}
    </div>
+  )
 }
 export default SocialButton
--- a/themes/next/components/BlogPostListPage.js
+++ b/themes/next/components/BlogPostListPage.js
@@ -14,7 +14,7 @@ import PaginationNumber from './PaginationNumber'
 */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)

  if (!posts || posts.length === 0) {
--- a/themes/next/components/BlogPostListScroll.js
+++ b/themes/next/components/BlogPostListScroll.js
@@ -19,7 +19,7 @@ const BlogPostListScroll = ({
  showSummary = siteConfig('NEXT_POST_LIST_SUMMARY', null, CONFIG)
 }) => {
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const [page, updatePage] = useState(1)
  const postsToShow = getPostByPage(page, posts, POSTS_PER_PAGE)

--- a/themes/next/components/SocialButton.js
+++ b/themes/next/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex-wrap flex'>
-    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 text-center'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='w-52 justify-center flex-wrap flex'>
+      <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 text-center'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/nobelium/components/BlogListPage.js
+++ b/themes/nobelium/components/BlogListPage.js
@@ -9,7 +9,7 @@ export const BlogListPage = props => {
  const { locale } = useGlobal()
  const router = useRouter()
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const currentPage = +page

--- a/themes/plog/components/BlogListPage.js
+++ b/themes/plog/components/BlogListPage.js
@@ -10,7 +10,7 @@ export const BlogListPage = props => {
  const { locale } = useGlobal()
  const router = useRouter()
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const currentPage = +page

--- a/themes/plog/components/SocialButton.js
+++ b/themes/plog/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='justify-start flex-wrap flex mx-1'>
-    <div className='space-x-3 text-2xl text-gray-600 dark:text-gray-400 text-center'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-        <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='justify-start flex-wrap flex mx-1'>
+      <div className='space-x-3 text-2xl text-gray-600 dark:text-gray-400 text-center'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -15,7 +15,7 @@ export default function BlogListPage(props) {
  const { page = 1, posts, postCount } = props
  const router = useRouter()
  const { NOTION_CONFIG } = useGlobal()
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
  const currentPage = +page

--- a/themes/simple/components/BlogListScroll.js
+++ b/themes/simple/components/BlogListScroll.js
@@ -13,7 +13,7 @@ export default function BlogListScroll(props) {
  const { posts } = props
  const { locale, NOTION_CONFIG } = useGlobal()
  const [page, updatePage] = useState(1)
-  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', 12, NOTION_CONFIG)
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
  let hasMore = false
  const postsToShow = posts
    ? Object.assign(posts).slice(0, POSTS_PER_PAGE * page)
--- a/themes/simple/components/SocialButton.js
+++ b/themes/simple/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex-wrap flex my-2'>
-    <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-      <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='w-52 justify-center flex-wrap flex my-2'>
+      <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/starter/components/SocialButton.js
+++ b/themes/starter/components/SocialButton.js
@@ -6,39 +6,101 @@ import { siteConfig } from '@/lib/config'
 * @constructor
 */
 const SocialButton = () => {
-  return <div className='w-52 justify-center flex-wrap flex my-2'>
-    <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
-      {siteConfig('CONTACT_GITHUB') && <a target='_blank' rel='noreferrer' title={'github'} href={siteConfig('CONTACT_GITHUB')} >
-        <i className='fab fa-github transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TWITTER') && <a target='_blank' rel='noreferrer' title={'twitter'} href={siteConfig('CONTACT_TWITTER')} >
-        <i className='fab fa-twitter transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_TELEGRAM') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_TELEGRAM')} title={'telegram'} >
-        <i className='fab fa-telegram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_LINKEDIN') && <a target='_blank' rel='noreferrer' href={siteConfig('CONTACT_LINKEDIN')} title={'linkedIn'} >
-      <i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_WEIBO') && <a target='_blank' rel='noreferrer' title={'weibo'} href={siteConfig('CONTACT_WEIBO')} >
-        <i className='fab fa-weibo transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_INSTAGRAM') && <a target='_blank' rel='noreferrer' title={'instagram'} href={siteConfig('CONTACT_INSTAGRAM')} >
-        <i className='fab fa-instagram transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_EMAIL') && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${siteConfig('CONTACT_EMAIL')}`} >
-        <i className='fas fa-envelope transform hover:scale-125 duration-150'/>
-      </a>}
-      {JSON.parse(siteConfig('ENABLE_RSS')) && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <i className='fas fa-rss transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_BILIBILI') && <a target='_blank' rel='noreferrer' title={'bilibili'} href={siteConfig('CONTACT_BILIBILI')} >
-        <i className='fab fa-bilibili transform hover:scale-125 duration-150'/>
-      </a>}
-      {siteConfig('CONTACT_YOUTUBE') && <a target='_blank' rel='noreferrer' title={'youtube'} href={siteConfig('CONTACT_YOUTUBE')} >
-        <i className='fab fa-youtube transform hover:scale-125 duration-150'/>
-      </a>}
+  return (
+    <div className='w-52 justify-center flex-wrap flex my-2'>
+      <div className='space-x-5 md:text-xl text-3xl text-gray-600 dark:text-gray-400 text-center'>
+        {siteConfig('CONTACT_GITHUB') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'github'}
+            href={siteConfig('CONTACT_GITHUB')}>
+            <i className='fab fa-github transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TWITTER') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'twitter'}
+            href={siteConfig('CONTACT_TWITTER')}>
+            <i className='fab fa-twitter transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_TELEGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_TELEGRAM')}
+            title={'telegram'}>
+            <i className='fab fa-telegram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_LINKEDIN') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            href={siteConfig('CONTACT_LINKEDIN')}
+            title={'linkedIn'}>
+            <i className='fab fa-linkedin transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_WEIBO') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'weibo'}
+            href={siteConfig('CONTACT_WEIBO')}>
+            <i className='fab fa-weibo transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_INSTAGRAM') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'instagram'}
+            href={siteConfig('CONTACT_INSTAGRAM')}>
+            <i className='fab fa-instagram transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_EMAIL') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'email'}
+            href={`mailto:${siteConfig('CONTACT_EMAIL')}`}>
+            <i className='fas fa-envelope transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {JSON.parse(siteConfig('ENABLE_RSS')) && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'RSS'}
+            href={'/rss/feed.xml'}>
+            <i className='fas fa-rss transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_BILIBILI') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'bilibili'}
+            href={siteConfig('CONTACT_BILIBILI')}>
+            <i className='fab fa-bilibili transform hover:scale-125 duration-150' />
+          </a>
+        )}
+        {siteConfig('CONTACT_YOUTUBE') && (
+          <a
+            target='_blank'
+            rel='noreferrer'
+            title={'youtube'}
+            href={siteConfig('CONTACT_YOUTUBE')}>
+            <i className='fab fa-youtube transform hover:scale-125 duration-150' />
+          </a>
+        )}
+      </div>
    </div>
-  </div>
+  )
 }
 export default SocialButton
--- a/themes/theme.js
+++ b/themes/theme.js
@@ -7,6 +7,20 @@ import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 // 在next.config.js中扫描所有主题
 export const { THEMES = [] } = getConfig().publicRuntimeConfig

+/**
+ * 获取主体配置
+ */
+export const getThemeConfig = async themeQuery => {
+  if (themeQuery && themeQuery !== BLOG.THEME) {
+    const THEME_CONFIG = await import(`@/themes/${themeQuery}`).then(
+      m => m.THEME_CONFIG
+    )
+    return THEME_CONFIG
+  } else {
+    return ThemeComponents?.THEME_CONFIG
+  }
+}
+
 /**
 * 加载全局布局
 * @param {*} themeQuery