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

themes/gitbook/components/NavPostItem.js

@@ -1,6 +1,7 @@
 import Badge from '@/components/Badge'
 import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
+import { useEffect, useState } from 'react'
 import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'
 
@@ -13,12 +14,35 @@ import BlogPostCard from './BlogPostCard'
  */
 const NavPostItem = props => {
   const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
-  // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
+  const [isTouchDevice, setIsTouchDevice] = useState(false)
+
+  // 检测是否为触摸设备
+  useEffect(() => {
+    const checkTouchDevice = () => {
+      if (window.matchMedia('(pointer: coarse)').matches) {
+        setIsTouchDevice(true)
+      }
+    }
+    checkTouchDevice()
+
+    // 可选：监听窗口大小变化时重新检测
+    window.addEventListener('resize', checkTouchDevice)
+    return () => {
+      window.removeEventListener('resize', checkTouchDevice)
+    }
+  }, [])
 
   // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
     toggleItem() // 调用父组件传递的切换函数
-    // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
+  }
+  const onHoverToggle = () => {
+    // 允许鼠标悬停时自动展开，而非点击展开
+    if (!hoverExpand || isTouchDevice) {
+      return
+    }
+    toggleOpenSubMenu()
   }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
@@ -27,13 +51,14 @@ const NavPostItem = props => {
     return (
       <>
         <div
+          onMouseEnter={onHoverToggle}
           onClick={toggleOpenSubMenu}
-          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
+          className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
           <span>{group?.category}</span>
           <div className='inline-flex items-center select-none pointer-events-none '>
             <i
-              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
           </div>
           {groupHasLatest &&
             siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&

themes/gitbook/components/NavPostList.js

@@ -105,6 +105,7 @@ function groupArticles(filteredNavPages) {
     return []
   }
   const groups = []
+  const AUTO_SORT = siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)
 
   for (let i = 0; i < filteredNavPages.length; i++) {
     const item = filteredNavPages[i]
@@ -112,7 +113,7 @@ function groupArticles(filteredNavPages) {
 
     let existingGroup = null
     // 开启自动分组排序；将同分类的自动归到同一个文件夹，忽略Notion中的排序
-    if (siteConfig('GITBOOK_AUTO_SORT', true, CONFIG)) {
+    if (AUTO_SORT) {
       existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
     } else {
       existingGroup = groups[groups.length - 1] // 获取最后一个分组

themes/gitbook/config.js

@@ -15,6 +15,8 @@ const CONFIG = {
   // 导航文章自动排他折叠
   GITBOOK_EXCLUSIVE_COLLAPSE: true, // 一次只展开一个分类，其它文件夹自动关闭。
 
+  GITBOOK_FOLDER_HOVER_EXPAND: true, // 左侧导航文件夹鼠标悬停时自动展开；若为false，则要点击才能展开
+
   // Widget
   GITBOOK_WIDGET_REVOLVER_MAPS:
     process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件

themes/heo/components/BlogPostCard.js

@@ -1,5 +1,5 @@
 import LazyImage from '@/components/LazyImage'
-import NotionIcon from '@/components/NotionIcon'
+import NotionIcon from './NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import CONFIG from '../config'
@@ -29,7 +29,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
 
   return (
     <article
-      className={` ${COVER_HOVER_ENLARGE} ? ' hover:scale-110 transition-all duration-150' : ''}`}>
+      className={` ${COVER_HOVER_ENLARGE} ? ' hover:transition-all duration-150' : ''}`}>
       <div
         data-wow-delay='.2s'
         className={
@@ -48,7 +48,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 priority={index === 0}
                 src={post?.pageCoverThumbnail}
                 alt={post?.title}
-                className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'
+                className='h-full w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-500 ease-in-out' //宽高都调整为自适应,保证封面居中
               />
             </div>
           </Link>
@@ -74,7 +74,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
               </div>
             )}
 
-            {/* 标题 */}
+            {/* 标题和图标 */}
             <Link
               href={post?.href}
               passHref
@@ -82,7 +82,10 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 ' group-hover:text-indigo-700 dark:hover:text-yellow-700 dark:group-hover:text-yellow-600 text-black dark:text-gray-100  line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'
               }>
               {siteConfig('POST_TITLE_ICON') && (
-                <NotionIcon icon={post.pageIcon} />
+                <NotionIcon
+                icon={post.pageIcon}
+                className="heo-icon w-6 h-6 mr-1 align-middle transform translate-y-[-8%]" // 专门为 Heo 主题的图标设置样式
+              />
               )}
               <span className='menu-link '>{post.title}</span>
             </Link>

themes/heo/components/NotionIcon.js

@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    // 这里优先使用传入的 className
+    return <LazyImage src={icon} className={className} />
+  }
+
+  // 对于 emoji 或 svg，设置默认 className，也可以传递不同的样式
+  return <span className={`inline-block ${className}`}>{icon}</span>
+}
+
+export default NotionIcon

themes/magzine/components/Announcement.js

@@ -0,0 +1,30 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+/**
+ * Magzine主题的公告
+ */
+const Announcement = ({ post, className }) => {
+  //   const { locale } = useGlobal()
+  if (post?.blockMap) {
+    return (
+      <div className={className}>
+        <section
+          id='announcement-wrapper'
+          className='rounded-xl px-2'>
+          {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+          {post && (
+            <div id='announcement-content'>
+              <NotionPage post={post}/>
+            </div>
+          )}
+        </section>
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/magzine/components/ArticleInfo.js

@@ -0,0 +1,55 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 文章详情页介绍
+ * @param {*} props
+ * @returns
+ */
+export default function ArticleInfo(props) {
+  const { post, siteInfo } = props
+
+  return (
+    <>
+      <div className='flex flex-col gap-y-4 py-4 px-2 lg:px-0'>
+        <div className='flex justify-center items-center'>
+          {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+            <CategoryItem category={post?.category} />
+          )}
+          <div
+            className={
+              'flex items-center justify-start flex-wrap text-gray-400'
+            }>
+            {siteConfig('MAGZINE_POST_LIST_TAG') &&
+              post?.tagItems?.map(tag => (
+                <TagItemMini key={tag.name} tag={tag} />
+              ))}
+          </div>
+        </div>
+
+        {/* title */}
+        <h2 className='text-4xl text-center dark:text-gray-300'>
+          {siteConfig('POST_TITLE_ICON') && (
+            <NotionIcon icon={post?.pageIcon} />
+          )}
+          {post?.title}
+        </h2>
+
+        <div className='text-xl text-center'>{post?.summary}</div>
+      </div>
+
+      {post?.type && !post?.type !== 'Page' && post?.pageCover && (
+        <div className='w-full relative md:flex-shrink-0 overflow-hidden'>
+          <LazyImage
+            alt={post?.title}
+            src={post?.pageCover}
+            className='object-cover max-h-[60vh] w-full'
+          />
+        </div>
+      )}
+    </>
+  )
+}

themes/magzine/components/ArticleLock.js

@@ -0,0 +1,61 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return (
+    <div
+      id='container'
+      className='w-full flex justify-center items-center h-96 '>
+      <div className='text-center space-y-3'>
+        <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+        <div className='flex mx-4'>
+          <input
+            id='password'
+            type='password'
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300  leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+          <div
+            onClick={submitPassword}
+            className='px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-gray-500 hover:bg-gray-400 text-white rounded-r duration-300'>
+            <i className={'duration-200 cursor-pointer fas fa-key'}>
+              &nbsp;{locale.COMMON.SUBMIT}
+            </i>
+          </div>
+        </div>
+        <div id='tips'></div>
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerFullWidth.js

@@ -0,0 +1,30 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import BannerItem from './BannerItem'
+
+/**
+ * 全宽
+ * @param {*} props
+ * @returns
+ */
+export default function BannerFullWidth() {
+  const { siteInfo } = useGlobal()
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE')
+  if (!banner) {
+    return null
+  }
+  return (
+    <div className='w-full flex lg:flex-row flex-col justify-between lg:h-96 bg-black'>
+      <LazyImage
+        alt={siteInfo?.title}
+        src={siteInfo?.pageCover}
+        className={`banner-cover w-full lg:h-96 object-cover object-center `}
+      />
+
+      <div className='w-full flex items-center justify-center'>
+        <BannerItem />
+      </div>
+    </div>
+  )
+}

themes/magzine/components/BannerItem.js

@@ -0,0 +1,35 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 文字广告Banner
+ * @param {*} props
+ * @returns
+ */
+export default function BannerItem() {
+  // 首屏信息栏按钮文字
+  const banner = siteConfig('MAGZINE_HOME_BANNER_ENABLE')
+  const button = siteConfig('MAGZINE_HOME_BUTTON')
+  const text = siteConfig('MAGZINE_HOME_BUTTON_TEXT')
+  const url = siteConfig('MAGZINE_HOME_BUTTON_URL')
+  const title = siteConfig('MAGZINE_HOME_TITLE')
+  const description = siteConfig('MAGZINE_HOME_DESCRIPTION')
+  const tips = siteConfig('MAGZINE_HOME_TIPS')
+  if (!banner) {
+    return null
+  }
+
+  return (
+    <div className='flex flex-col p-5 gap-y-5 dark items-center justify-between w-full bg-black text-white'>
+      {/* 首屏导航按钮 */}
+      <h2 className='text-2xl font-semibold'>{title}</h2>
+      <h3 className='text-sm'>{description}</h3>
+      {button && (
+        <div className='mt-2 text-center px-6 py-3 font-semibold rounded-3xl text-black bg-[#7BE986] hover:bg-[#62BA6B]'>
+          <Link href={url}>{text}</Link>
+        </div>
+      )}
+      <span className='text-xs'>{tips}</span>
+    </div>
+  )
+}

themes/magzine/components/CTA.js

@@ -0,0 +1,18 @@
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
+export default function CTA({ notice }) {
+  return (
+    <>
+      {/* 底部 */}
+      <Announcement
+        post={notice}
+        className={
+          'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'
+        }
+      />
+    </>
+  )
+}

themes/magzine/components/Card.js

@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card

themes/magzine/components/Catalog.js

@@ -0,0 +1,102 @@
+import throttle from 'lodash.throttle'
+import { uuidToId } from 'notion-utils'
+import { useEffect, useRef, useState } from 'react'
+import Progress from './Progress'
+
+/**
+ * 目录导航组件
+ * @param toc
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Catalog = ({ post, toc, className }) => {
+  const tocIds = []
+
+  // 目录自动滚动
+  const tRef = useRef(null)
+  // 同步选中目录事件
+  const [activeSection, setActiveSection] = useState(null)
+
+  // 监听滚动事件
+  useEffect(() => {
+    if (toc && toc.length > 1) {
+      actionSectionScrollSpy()
+      window.addEventListener('scroll', actionSectionScrollSpy)
+    }
+    setTimeout(() => {
+      console.log('目录', post, toc)
+    }, 1000)
+    return () => {
+      window.removeEventListener('scroll', actionSectionScrollSpy)
+    }
+  }, [])
+
+  const throttleMs = 200
+  const actionSectionScrollSpy = 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={className}>
+      <div className='w-full mt-2 mb-4'>
+        <Progress />
+      </div>
+      <div
+        className='overflow-y-auto scroll-hidden lg:max-h-96 max-h-44'
+        ref={tRef}>
+        <nav className='h-full text-black'>
+          {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  dark:text-gray-400
+              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-gray-500 dark:text-white underline' : ''}`}>
+                  {tocItem.text}
+                </span>
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default Catalog

themes/magzine/components/CatalogFloat.js

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

themes/magzine/components/CatalogFloatButton.js

@@ -0,0 +1,28 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import CONFIG from '../config'
+
+/**
+ * 移动端点击召唤目录抽屉
+ * 当屏幕下滑500像素后会出现该控件
+ * @param props 父组件传入props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogFloatButton = props => {
+  const { locale } = useGlobal()
+  // 用此配置可以关闭
+  if (!siteConfig('Magzine_WIDGET_TOC', true, CONFIG)) {
+    return <></>
+  }
+  return (
+    <div
+      onClick={props.onClick}
+      className='py-5 px-5 cursor-pointer transform duration-200 flex justify-center items-center w-7 h-7 text-center'
+      title={locale.POST.TOP}>
+      <i className='fas fa-list-ol' />
+    </div>
+  )
+}
+
+export default CatalogFloatButton

themes/magzine/components/CategoryGroup.js

@@ -0,0 +1,42 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+/**
+ * 分类
+ * @param {*} param0
+ * @returns
+ */
+const CategoryGroup = ({ currentCategory, categoryOptions }) => {
+  const { locale } = useGlobal()
+  if (!categoryOptions) {
+    return <></>
+  }
+  return (
+    <div id='category-list' className='pt-4'>
+      <div className='text-xl font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
+      <div className=''>
+        {categoryOptions?.map((category, index) => {
+          const selected = currentCategory === category.name
+          return (
+            <Link
+              key={index}
+              href={`/category/${category.name}`}
+              passHref
+              className={
+                (selected
+                  ? 'bg-gray-600 text-white '
+                  : 'dark:text-gray-400 text-gray-900 ') +
+                'text-lg hover:underline flex text-md items-center duration-300 cursor-pointer py-1 whitespace-nowrap'
+              }>
+              <span>
+                {category.name} {category?.count && `(${category?.count})`}
+              </span>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default CategoryGroup

themes/magzine/components/CategoryItem.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function CategoryItem({ selected, category, categoryCount }) {
+  return (
+    <Link
+      href={`/category/${category}`}
+      passHref
+      className={
+        (selected
+          ? 'bg-gray-600 text-white '
+          : 'dark:text-gray-400 text-gray-900 ') +
+        'text-sm font-semibold hover:underline flex text-md items-center duration-300 cursor-pointer py-1 whitespace-nowrap'
+      }>
+      <div>
+        {category} {categoryCount && `(${categoryCount})`}
+      </div>
+    </Link>
+  )
+}

themes/magzine/components/Footer.js

@@ -0,0 +1,120 @@
+import DarkModeButton from '@/components/DarkModeButton'
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import SocialButton from './SocialButton'
+
+/**
+ * 网页底脚
+ */
+const Footer = ({ title }) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const since = siteConfig('SINCE')
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const { siteInfo } = useGlobal()
+  const MAGZINE_FOOTER_LINKS = siteConfig('MAGZINE_FOOTER_LINKS', [])
+
+  return (
+    <footer
+      id='footer-bottom'
+      className='z-10 bg-black text-white justify-center m-auto w-full p-6 relative'>
+      <div className='max-w-screen-3xl w-full mx-auto '>
+        {/* 信息与链接区块 */}
+        <div className='w-full flex lg:flex-row flex-col justify-between py-16'>
+          <div className='gap-x-2 py-6 flex items-center'>
+            {/* 站长信息 */}
+            <LazyImage
+              src={siteInfo?.icon}
+              className='rounded-full'
+              width={40}
+              alt={siteConfig('AUTHOR')}
+            />
+            <div>
+              <h1 className='text-lg'>{title}</h1>
+              <i className='fas fa-copyright' />
+              <a
+                href={siteConfig('LINK')}
+                className='underline font-bold justify-start  '>
+                {siteConfig('AUTHOR')}
+              </a>
+            </div>
+          </div>
+
+          {/* 右侧链接区块 */}
+          <div className='grid grid-cols-2 lg:grid-cols-4 lg:gap-16 gap-8'>
+            {MAGZINE_FOOTER_LINKS?.map((group, index) => {
+              return (
+                <div key={index}>
+                  <div className='font-bold text-xl text-white lg:pb-8 pb-4'>
+                    {group.name}
+                  </div>
+                  <div className='flex flex-col gap-y-2'>
+                    {group?.menus?.map((menu, index) => {
+                      return (
+                        <div key={index}>
+                          <Link href={menu.href} className='hover:underline'>
+                            {menu.title}
+                          </Link>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* 页脚 */}
+        <div className='py-4 flex flex-col lg:flex-row  justify-between items-center border-t border-gray-400'>
+          <div className='flex gap-x-2 justify-between items-center'>
+            <span className='whitespace-nowrap'>{`${copyrightDate}`}</span>
+
+            {siteConfig('BEI_AN') && (
+              <>
+                <i className='fas fa-shield-alt' />{' '}
+                <a href='https://beian.miit.gov.cn/' className='mr-2'>
+                  {siteConfig('BEI_AN')}
+                </a>
+                <br />
+              </>
+            )}
+
+            <div className='text-sm font-serif'>
+              Powered by{' '}
+              <a
+                href='https://github.com/tangly1024/NotionNext'
+                className='underline justify-start text-white'>
+                NotionNext {siteConfig('VERSION')}
+              </a>
+              .
+            </div>
+          </div>
+
+          <DarkModeButton className='text-white' />
+
+          <div className='flex justify-between items-center gap-x-2'>
+            <div className='flex items-center gap-x-4'>
+              <div>
+                <span className='hidden busuanzi_container_site_pv'>
+                  <i className='fas fa-eye' />
+                  <span className='px-1 busuanzi_value_site_pv'> </span>{' '}
+                </span>
+                <span className='pl-2 hidden busuanzi_container_site_uv'>
+                  <i className='fas fa-users' />{' '}
+                  <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
+                </span>
+              </div>
+              <SocialButton />
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

themes/magzine/components/Header.js

@@ -0,0 +1,199 @@
+import Collapse from '@/components/Collapse'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+import { useMagzineGlobal } from '..'
+import CONFIG from '../config'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function Header(props) {
+  const { customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+  const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const { searchModal } = useMagzineGlobal()
+
+  const defaultLinks = [
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: CONFIG.MENU_TAG
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: CONFIG.MENU_SEARCH
+    }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 向下滚动时，调整导航条高度
+  useEffect(() => {
+    scrollTrigger()
+    window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
+  }, [])
+
+  const throttleMs = 150
+
+  const scrollTrigger = throttle(() => {
+    const scrollS = window.scrollY
+    if (scrollS === lastScrollY.current) return // 如果滚动位置没有变化，则不做任何操作
+
+    const nav = document.querySelector('#top-navbar')
+    const narrowNav = scrollS > 60
+    if (narrowNav) {
+      nav && nav.classList.replace('h-20', 'h-14')
+    } else {
+      nav && nav.classList.replace('h-14', 'h-20')
+    }
+
+    lastScrollY.current = scrollS // 更新上一次的滚动位置
+  }, throttleMs)
+
+  const [showSearchInput, changeShowSearchInput] = useState(false)
+
+  // 展示搜索框
+  const toggleShowSearchInput = () => {
+    if (siteConfig('ALGOLIA_APP_ID')) {
+      searchModal.current.openSearch()
+    } else {
+      changeShowSearchInput(!showSearchInput)
+    }
+  }
+
+  const onKeyUp = e => {
+    if (e.keyCode === 13) {
+      const search = document.getElementById('simple-search').value
+      if (search) {
+        router.push({ pathname: '/search/' + search })
+      }
+    }
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      id='top-navbar-wrapper'
+      className={
+        'sticky top-0 w-full z-40 shadow bg-white dark:bg-hexo-black-gray '
+      }>
+      {/* 导航栏菜单内容 */}
+      <div
+        id='top-navbar'
+        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-3xl h-20 transition-all duration-200 items-center justify-between'>
+        {/* 搜索栏 */}
+        {showSearchInput && (
+          <input
+            autoFocus
+            id='simple-search'
+            onKeyUp={onKeyUp}
+            className='outline-none dark:bg-hexo-black-gray dark:text flex flex-row text-base relative w-full border-b py-2'
+            aria-label='Submit search'
+            type='search'
+            name='s'
+            autoComplete='off'
+            placeholder='Type then hit enter to search...'
+          />
+        )}
+
+        {/* 默认菜单 */}
+        {!showSearchInput && (
+          <>
+            {/* 左侧图标Logo */}
+            <div className='flex gap-x-8 h-full'>
+              <LogoBar {...props} />
+              {/* 桌面端顶部菜单 */}
+              <div className='hidden md:flex items-center gap-x-3'>
+                {links &&
+                  links?.map((link, index) => (
+                    <MenuItemDrop key={index} link={link} />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* 右侧移动端折叠按钮 */}
+        <div className='flex items-center gap-x-2 pr-2'>
+          {/* 搜索按钮 */}
+          <div
+            onClick={toggleShowSearchInput}
+            className='flex text-center items-center cursor-pointer p-2'>
+            <i
+              className={
+                showSearchInput
+                  ? 'fa-regular fa-circle-xmark'
+                  : 'fa-solid fa-magnifying-glass' + ' align-middle'
+              }></i>
+          </div>
+          <div className='mr-1 flex md:hidden justify-end items-center text-lg space-x-4 font-serif dark:text-gray-200'>
+            <div onClick={toggleMenuOpen} className='cursor-pointer p-2'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
+        </div>
+      </Collapse>
+    </div>
+  )
+}

themes/magzine/components/Hero.js

@@ -0,0 +1,40 @@
+// import { useGlobal } from '@/lib/global'
+import BannerItem from './BannerItem'
+import PostItemCardTop from './PostItemCardTop'
+import PostItemCardWide from './PostItemCardWide'
+
+/**
+ * 首页主宣传
+ * @param {*} param0
+ * @returns
+ */
+const Hero = ({ posts }) => {
+  // 获取置顶文章与次要文章
+  const postTop = posts[0]
+  const post1 = posts[1]
+  const post2 = posts[2]
+  return (
+    <>
+      <div className='w-full mx-auto max-w-screen-3xl xl:flex justify-between gap-10'>
+        {/* 左侧一篇主要置顶文章 */}
+        <div className='basis-1/2 mb-6 px-2 lg:px-5'>
+          <PostItemCardTop post={postTop} />
+        </div>
+        {/* 右侧 */}
+        <div className='basis-1/2 flex flex-col gap-y-4'>
+          {/* 首屏宣传小Banner */}
+          <BannerItem />
+
+          {/* 两篇次要文章 */}
+          <div className='py-4 px-2 lg:px-0 flex flex-col gap-y-6'>
+            <hr />
+            <PostItemCardWide post={post1} />
+            <hr />
+            <PostItemCardWide post={post2} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+export default Hero

themes/magzine/components/InfoCard.js

@@ -0,0 +1,40 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+
+/**
+ * 用户信息卡
+ * @param {*} props
+ * @returns
+ */
+const InfoCard = props => {
+  const { siteInfo } = useGlobal()
+  const router = useRouter()
+
+  return (
+    <div id='info-card'>
+      <div className='items-center justify-start'>
+        <div
+          className='hover:scale-105 transform duration-200 cursor-pointer flex justify-start'
+          onClick={() => {
+            router.push('/about')
+          }}>
+          <LazyImage
+            src={siteInfo?.icon}
+            width={120}
+            alt={siteConfig('AUTHOR')}
+          />
+        </div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-start '>
+          {siteConfig('AUTHOR')}
+        </div>
+        <div className='text-gray-100 mb-2 hover:scale-105 transform duration-200 flex justify-start'>
+          {siteConfig('BIO')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default InfoCard

themes/magzine/components/JumpToTopButton.js

@@ -0,0 +1,33 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = ({ showPercent = false, percent, className }) => {
+  if (!siteConfig('MAGZINE_WIDGET_TO_TOP')) {
+    return <></>
+  }
+  return (
+    <div
+      id='jump-to-top'
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-center'
+      className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
+      <i
+        className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
+  )
+}
+
+export default JumpToTopButton

themes/magzine/components/LeftMenuBar.js

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

themes/magzine/components/LogoBar.js

@@ -0,0 +1,21 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+export default function LogoBar(props) {
+  return (
+    <div id='top-wrapper' className='w-full flex items-center '>
+      <Link
+        href='/'
+        className='flex text-md font-semibold md:text-xl hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
+        {/* <LazyImage
+          src={siteInfo?.icon}
+          width={24}
+          height={20}
+          alt={siteConfig('AUTHOR')}
+          className='mr-2 hidden md:block rounded-full'
+        /> */}
+        {siteConfig('TITLE')}
+      </Link>
+    </div>
+  )
+}

themes/magzine/components/MenuBarMobile.js

@@ -0,0 +1,53 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { MenuItemCollapse } from './MenuItemCollapse'
+
+export const MenuBarMobile = props => {
+  const { customMenu, customNav } = props
+  const { locale } = useGlobal()
+
+  let links = [
+    // { name: locale.NAV.INDEX, href: '/' || '/', show: true },
+    {
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MAGZINE_MENU_CATEGORY')
+    },
+    {
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MAGZINE_MENU_TAG')
+    },
+    {
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MAGZINE_MENU_ARCHIVE')
+    }
+    // { name: locale.NAV.SEARCH, href: '/search', show: siteConfig('MENU_SEARCH', ) }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  // 如果 开启自定义菜单，则不再使用 Page生成菜单。
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav id='nav' className=' text-md'>
+      {links?.map((link, index) => (
+        <MenuItemCollapse
+          onHeightChange={props.onHeightChange}
+          key={index}
+          link={link}
+        />
+      ))}
+    </nav>
+  )
+}

themes/magzine/components/MenuItemCollapse.js

@@ -0,0 +1,97 @@
+import Collapse from '@/components/Collapse'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+/**
+ * 折叠菜单
+ * @param {*} param0
+ * @returns
+ */
+export const MenuItemCollapse = props => {
+  const { link } = props
+  const [show, changeShow] = useState(false)
+  const hasSubMenu = link?.subMenus?.length > 0
+
+  const [isOpen, changeIsOpen] = useState(false)
+
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  const toggleShow = () => {
+    changeShow(!show)
+  }
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  return (
+    <>
+      <div
+        className={
+          (selected
+            ? 'bg-gray-600 text-white hover:text-white'
+            : 'hover:text-gray-600') +
+          ' px-7 w-full text-left duration-200 dark:bg-hexo-black-gray dark:border-black'
+        }
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.href}
+            target={link?.target}
+            className='py-2 w-full my-auto items-center justify-between flex  '>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+          </Link>
+        )}
+
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='py-2 flex justify-between cursor-pointer  dark:text-gray-200 no-underline tracking-widest'>
+            <div>
+              <div className={`${link.icon} text-center w-4 mr-4`} />
+              {link.name}
+            </div>
+            <div className='inline-flex items-center '>
+              <i
+                className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <div
+                key={sLink.id}
+                className='
+              not:last-child:border-b-0 border-b dark:border-gray-800 py-2 pl-12 cursor-pointer hover:bg-gray-100 dark:text-gray-200
+              dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
+                <Link href={sLink.href} target={link?.target}>
+                  <div>
+                    <div
+                      className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
+                    />
+                    {sLink.title}
+                  </div>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
+    </>
+  )
+}

themes/magzine/components/MenuItemDrop.js

@@ -0,0 +1,74 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  //   const show = true
+  //   const changeShow = () => {}
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+  const hasSubMenu = link?.subMenus?.length > 0
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  return (
+    <li
+      className='cursor-pointer list-none items-center h-full'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {hasSubMenu && (
+        <div
+          className={
+            'h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            (selected
+              ? 'bg-gray-600 text-white hover:text-white'
+              : 'hover:text-gray-600')
+          }>
+          <div className='items-center flex gap-x-1'>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+            <i
+              className={`px-1 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
+          </div>
+        </div>
+      )}
+
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-3 gap-x-1 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            (selected
+              ? 'bg-gray-600 text-white hover:text-white'
+              : 'hover:text-gray-600')
+          }>
+          <Link href={link?.href} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </Link>
+        </div>
+      )}
+
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          className={`${show ? 'visible opacity-100 top-14 ' : 'invisible opacity-0 top-10 '} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 block rounded-lg drop-shadow-lg p-4 `}>
+          {link?.subMenus?.map(sLink => {
+            return (
+              <li
+                key={sLink.id}
+                className='dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                <Link href={sLink.href} target={link?.target}>
+                  <span className='text-sm hover:underline'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </li>
+  )
+}

themes/magzine/components/MenuItemMobileNormal.js

@@ -0,0 +1,29 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const NormalMenu = props => {
+  const { link } = props
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+
+  const selected = router.pathname === link.href || router.asPath === link.href
+
+  return (
+    <Link
+      key={`${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+        (selected ? 'text-black' : ' ')
+      }>
+      <div className='my-auto items-center justify-center flex '>
+        <div className={'hover:text-black'}>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
+}

themes/magzine/components/MenuItemPCNormal.js

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export const MenuItemPCNormal = props => {
+  const { link } = props
+  const router = useRouter()
+  const selected = router.pathname === link.href || router.asPath === link.href
+  if (!link || !link.show) {
+    return null
+  }
+
+  return (
+    <Link
+      key={`${link.id}-${link.href}`}
+      title={link.href}
+      href={link.href}
+      className={
+        'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+        (selected
+          ? 'bg-gray-600 text-white hover:text-white'
+          : 'hover:text-gray-600')
+      }>
+      <div className='items-center justify-center flex '>
+        <i className={link.icon} />
+        <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+      </div>
+      {link.slot}
+    </Link>
+  )
+}

themes/magzine/components/PaginationSimple.js

@@ -0,0 +1,55 @@
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 简易翻页插件
+ * @param page 当前页码
+ * @param totalPage 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PaginationSimple = ({ page, totalPage }) => {
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const currentPage = +page
+  const showNext = currentPage < totalPage
+  const pagePrefix = router.asPath
+    .split('?')[0]
+    .replace(/\/page\/[1-9]\d*/, '')
+    .replace(/\/$/, '')
+
+  return (
+    <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
+      <Link
+        href={{
+          pathname:
+            currentPage === 2
+              ? `${pagePrefix}/`
+              : `${pagePrefix}/page/${currentPage - 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='prev'
+        className={`${
+          currentPage === 1 ? 'invisible' : 'block'
+        } text-center w-full duration-200 px-4 py-2 hover:border-gray-500 border-b-2 hover:font-bold`}>
+        ←{locale.PAGINATION.PREV}
+      </Link>
+      <Link
+        href={{
+          pathname: `${pagePrefix}/page/${currentPage + 1}`,
+          query: router.query.s ? { s: router.query.s } : {}
+        }}
+        passHref
+        rel='next'
+        className={`${
+          +showNext ? 'block' : 'invisible'
+        } text-center w-full duration-200 px-4 py-2 hover:border-gray-500 border-b-2 hover:font-bold`}>
+        {locale.PAGINATION.NEXT}→
+      </Link>
+    </div>
+  )
+}
+
+export default PaginationSimple

themes/magzine/components/PostBannerGroupByCategory.js

@@ -0,0 +1,87 @@
+import { siteConfig } from '@/lib/config'
+import PostListHorizontal from './PostListHorizontal'
+
+/**
+ * 按文章类别分组的文章列表区块
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostBannerGroupByCategory = props => {
+  const { posts, categoryOptions, allNavPages } = props
+  if (!posts || posts.length === 0) {
+    return null
+  }
+
+  // 按分类将文章分组成文件夹
+  const categoryFolders = groupArticles(categoryOptions, allNavPages.slice(8))
+
+  return (
+    <>
+      {/* 不同的分类文章列表 */}
+      {categoryFolders?.map((categoryGroup, index) => {
+        if (
+          !categoryGroup ||
+          !categoryGroup.items ||
+          categoryGroup.items.length < 1
+        ) {
+          return null
+        }
+
+        return (
+          <PostListHorizontal
+            key={index}
+            hasBg={index % 2 === 1}
+            title={categoryGroup?.category}
+            href={`/category/${categoryGroup?.category}`}
+            posts={categoryGroup?.items}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+// 按照分类将文章分组成文件夹
+function groupArticles(categoryOptions, allPosts) {
+  if (!allPosts) {
+    return []
+  }
+  const groups = []
+
+  for (let i = 0; i < allPosts.length; i++) {
+    const item = allPosts[i]
+    const categoryName = item?.category ? item?.category : '' // 将 category 转换为字符串
+
+    const existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+
+    if (existingGroup && existingGroup.category === categoryName) {
+      // 如果分组已存在，并且该分组中的文章数量小于4，添加文章
+      if (existingGroup.items.length < 4) {
+        existingGroup.items.push(item)
+      }
+    } else {
+      // 新建分组，并添加当前文章
+      groups.push({ category: categoryName, items: [item] })
+    }
+  }
+  const hiddenCategory = siteConfig('MAGZINE_HOME_HIDDEN_CATEGORY')
+  // 按照 categoryOptions 的顺序排序 groups
+  const sortedGroups = []
+  for (let i = 0; i < categoryOptions.length; i++) {
+    const option = categoryOptions[i]
+    const matchingGroup = groups.find(group => group.category === option.name)
+
+    if (matchingGroup) {
+      if (
+        hiddenCategory &&
+        hiddenCategory.indexOf(matchingGroup.category) >= 0
+      ) {
+        continue
+      }
+      sortedGroups.push(matchingGroup)
+    }
+  }
+  return sortedGroups
+}
+
+export default PostBannerGroupByCategory

themes/magzine/components/PostGroupArchive.js

@@ -0,0 +1,34 @@
+import PostItemCard from './PostItemCard'
+
+/**
+ * 博客归档列表
+ * @param posts 所有文章
+ * @param archiveTitle 归档标题
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostGroupArchive = ({ posts = [], archiveTitle }) => {
+  if (!posts || posts.length === 0) {
+    return <></>
+  }
+
+  return (
+    <div className='px-2 lg:px-0'>
+      {/* 分组标题 */}
+      <div
+        className='pb-4 text-2xl font-bold dark:text-gray-300'
+        id={archiveTitle}>
+        {archiveTitle}
+      </div>
+
+      {/* 列表 */}
+      <ul className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
+        {posts?.map((p, index) => {
+          return <PostItemCard key={index} post={p} />
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default PostGroupArchive

themes/magzine/components/PostGroupLatest.js

@@ -0,0 +1,72 @@
+import LazyImage from '@/components/LazyImage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+// import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 最新文章列表
+ * @param posts 所有文章数据
+ * @param sliceCount 截取展示的数量 默认6
+ * @constructor
+ */
+const PostGroupLatest = props => {
+  const { latestPosts, vertical } = props
+  // 获取当前路径
+  const currentPath = useRouter().asPath
+  const { locale, siteInfo } = useGlobal()
+  if (!latestPosts) {
+    return <></>
+  }
+
+  return (
+    <>
+      {/* 标题 */}
+      <div className='mb-2 px-1 flex flex-nowrap justify-between'>
+        <div className='font-bold text-lg'>{locale.COMMON.LATEST_POSTS}</div>
+      </div>
+
+      {/* 文章列表 */}
+      <div className={`grid grid-cols-1 ${!vertical ? 'lg:grid-cols-4' : ''}`}>
+        {latestPosts.map(post => {
+          const selected =
+            currentPath === `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+          const headerImage = post?.pageCoverThumbnail
+            ? post.pageCoverThumbnail
+            : siteInfo?.pageCover
+
+          return (
+            <Link
+              key={post.id}
+              title={post.title}
+              href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
+              passHref
+              className={'my-3 flex'}>
+              <div className='w-20 h-14 overflow-hidden relative'>
+                <LazyImage
+                  alt={post?.title}
+                  src={`${headerImage}`}
+                  className='object-cover w-full h-full'
+                />
+              </div>
+              <div
+                className={
+                  (selected ? ' text-green-400 ' : 'dark:text-gray-400 ') +
+                  ' text-sm overflow-x-hidden hover:text-green-600 px-2 duration-200 w-full rounded ' +
+                  ' hover:text-green-400 cursor-pointer items-center flex'
+                }>
+                <div>
+                  <div className='line-clamp-2 menu-link'>{post.title}</div>
+                  <div className='text-gray-500'>{post.lastEditedDay}</div>
+                </div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default PostGroupLatest

themes/magzine/components/PostItemCard.js

@@ -0,0 +1,62 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { formatDateFmt } from '@/lib/utils/formatDate'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 普通的博客卡牌
+ * 带封面图
+ */
+const PostItemCard = ({ post }) => {
+  const { siteInfo } = useGlobal()
+  const cover = post?.pageCoverThumbnail || siteInfo?.pageCover
+  return (
+    <div key={post.id} className='mb-6 max-w-screen-3xl'>
+      <div className='flex flex-col space-y-3'>
+        {siteConfig('MAGZINE_POST_LIST_COVER') && (
+          <Link
+            href={post?.href}
+            passHref
+            className={
+              'cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+            }>
+            <div className='w-full h-40 aspect-video overflow-hidden mb-2'>
+              <LazyImage
+                alt={post?.title}
+                src={cover}
+                style={cover ? {} : { height: '0px' }}
+                className='w-full h-40 aspect-video object-cover'
+              />
+            </div>
+          </Link>
+        )}
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
+
+        <Link
+          href={post?.href}
+          passHref
+          className={
+            'text-xl cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+          }>
+          <h2>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </h2>
+        </Link>
+
+        <div className='text-sm'>
+          {formatDateFmt(post.publishDate, 'yyyy-MM')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCard

themes/magzine/components/PostItemCardSimple.js

@@ -0,0 +1,40 @@
+import NotionIcon from '@/components/NotionIcon'
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 不带图片
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardSimple = ({ post, showSummary }) => {
+  return (
+    <div
+      key={post.id}
+      className='lg:mb-6 max-w-screen-3xl border-t border-gray-300 mr-8 py-2 gap-y-3 flex flex-col dark:border-gray-800 '>
+      <div className='flex mr-2 items-center'>
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
+      </div>
+
+      {/* 文章标题 */}
+      <Link
+        href={post?.href}
+        passHref
+        className={
+          'cursor-pointer hover:underline text-lg leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+        }>
+        <h2>
+          {siteConfig('POST_TITLE_ICON') && <NotionIcon icon={post.pageIcon} />}
+          {post.title}
+        </h2>
+      </Link>
+
+      <div className='text-sm text-gray-700'>{post.date?.start_date}</div>
+    </div>
+  )
+}
+
+export default PostItemCardSimple

themes/magzine/components/PostItemCardTop.js

@@ -0,0 +1,106 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+import TagItemMini from './TagItemMini'
+
+/**
+ * 置顶头条文章
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardTop = ({ post, showSummary }) => {
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const { locale } = useGlobal()
+  return (
+    <div
+      key={post.id}
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-bottom'
+      className='mb-6 max-w-screen-3xl '>
+      <div className='flex flex-col w-full'>
+        {siteConfig('MAGZINE_POST_LIST_COVER') && (
+          <Link
+            href={post?.href}
+            passHref
+            className={
+              'cursor-pointer hover:underline text-4xl leading-tight  dark:text-gray-300  dark:hover:text-gray-400'
+            }>
+            <div className='w-full max-h-80 object-cover overflow-hidden mb-2'>
+              <LazyImage
+                priority
+                alt={post?.title}
+                src={post.pageCoverThumbnail}
+                style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+                className='w-full max-h-80 object-cover hover:scale-125 duration-150'
+              />
+            </div>
+          </Link>
+        )}
+
+        <div className='flex py-2 mr-2 items-center'>
+          {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+            <CategoryItem category={post.category} />
+          )}
+          <div
+            className={
+              'flex items-center justify-start flex-wrap space-x-3 text-gray-400'
+            }>
+            {siteConfig('MAGZINE_POST_LIST_TAG') &&
+              post?.tagItems?.map(tag => (
+                <TagItemMini key={tag.name} tag={tag} />
+              ))}
+          </div>
+        </div>
+
+        <Link
+          href={post?.href}
+          passHref
+          className={
+            'cursor-pointer hover:underline leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+          }>
+          <h2 className='text-4xl'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </h2>
+        </Link>
+
+        <div className='flex'></div>
+
+        {(!showPreview || showSummary) && (
+          <main className='my-4 text-gray-900 dark:text-gray-300 text-lg  leading-7'>
+            {post.summary}
+          </main>
+        )}
+
+        {showPreview && (
+          <div className='overflow-ellipsis truncate'>
+            <NotionPage post={post} />
+            <div className='pointer-events-none border-t pt-8 border-dashed'>
+              <div className='w-full justify-start flex'>
+                <Link
+                  href={post?.href}
+                  passHref
+                  className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
+                  {locale.COMMON.ARTICLE_DETAIL}
+                  <i className='ml-1 fas fa-angle-right' />
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className='text-sm py-1'>{post.date?.start_date}</div>
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCardTop

themes/magzine/components/PostItemCardWide.js

@@ -0,0 +1,86 @@
+import LazyImage from '@/components/LazyImage'
+import NotionIcon from '@/components/NotionIcon'
+import NotionPage from '@/components/NotionPage'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+import CategoryItem from './CategoryItem'
+
+/**
+ * 水平左右布局的博客卡片
+ * @param {*} param0
+ * @returns
+ */
+const PostItemCardWide = ({ post, showSummary }) => {
+  const showPreview = siteConfig('MAGZINE_POST_LIST_PREVIEW') && post.blockMap
+  const { locale } = useGlobal()
+  return (
+    <div key={post.id} className='flex justify-between gap-x-6'>
+      {/* 卡牌左侧 */}
+      <div className='h-40 w-96 gap-y-3 flex flex-col'>
+        {siteConfig('MAGZINE_POST_LIST_CATEGORY') && (
+          <CategoryItem category={post.category} />
+        )}
+        <Link
+          href={post?.href}
+          passHref
+          className={
+            ' cursor-pointer font-semibold hover:underline text-xl leading-tight dark:text-gray-300  dark:hover:text-gray-400'
+          }>
+          <h3 className='max-w-80 break-words'>
+            {siteConfig('POST_TITLE_ICON') && (
+              <NotionIcon icon={post.pageIcon} />
+            )}
+            {post.title}
+          </h3>
+        </Link>
+
+        {(!showPreview || showSummary) && (
+          <main className='line-clamp-2 text-gray-900 dark:text-gray-300 text-sm'>
+            {post.summary}
+          </main>
+        )}
+
+        {showPreview && (
+          <div className='overflow-ellipsis truncate'>
+            <NotionPage post={post} />
+            <div className='pointer-events-none border-t pt-8 border-dashed'>
+              <div className='w-full justify-start flex'>
+                <Link
+                  href={post?.href}
+                  passHref
+                  className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-gray-500 cursor-pointer'>
+                  {locale.COMMON.ARTICLE_DETAIL}
+                  <i className='ml-1 fas fa-angle-right' />
+                </Link>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div
+          className={
+            'flex items-center justify-start flex-wrap space-x-3 text-gray-500'
+          }>
+          {/* {siteConfig('MAGZINE_POST_LIST_TAG') &&
+            post?.tagItems?.map(tag => (
+              <TagItemMini key={tag.name} tag={tag} />
+            ))} */}
+          <div className='text-sm py-1'>{post.date?.start_date}</div>
+        </div>
+      </div>
+
+      {/* 卡牌右侧图片 */}
+      <div className='w-40 h-40 object-cover overflow-hidden mb-2'>
+        <LazyImage
+          alt={post?.title}
+          src={post.pageCoverThumbnail}
+          style={post.pageCoverThumbnail ? {} : { height: '0px' }}
+          className='w-40 h-40 object-cover hover:scale-125 duration-150'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PostItemCardWide

themes/magzine/components/PostListEmpty.js

@@ -0,0 +1,19 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 空白博客 列表
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListEmpty = ({ currentSearch }) => {
+  const { locale } = useGlobal()
+  return (
+    <div className='flex w-full items-center justify-center min-h-screen mx-auto md:-mt-20'>
+      <p className='text-gray-500 dark:text-gray-300'>
+        {locale.COMMON.NO_RESULTS_FOUND}{' '}
+        {currentSearch && <div>{currentSearch}</div>}
+      </p>
+    </div>
+  )
+}
+export default PostListEmpty

themes/magzine/components/PostListHorizontal.js

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+import Swiper from './Swiper'
+
+/**
+ * 博文水平列表
+ * 含封面
+ * 可以指定是否有模块背景色
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListHorizontal = ({ title, href, posts, hasBg }) => {
+  if (!posts || posts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div
+      className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
+      <div className='max-w-screen-3xl w-full mx-auto'>
+        {/* 标题 */}
+        <div className='flex justify-between items-center py-6'>
+          <h3 className='text-2xl'>{title}</h3>
+          {href && (
+            <Link
+              className='hidden font-bold lg:block text-lg underline'
+              href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
+        </div>
+        {/* 列表 */}
+        <ul className='hidden lg:grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {posts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </ul>
+        <div className='block lg:hidden px-2'>
+          <Swiper posts={posts} />
+          {href && (
+            <Link className='lg:hidden block text-lg underline' href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostListHorizontal

themes/magzine/components/PostListPage.js

@@ -0,0 +1,39 @@
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import PaginationSimple from './PaginationSimple'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListPage = ({ page = 1, posts = [], postCount }) => {
+  const { NOTION_CONFIG } = useGlobal()
+  const POSTS_PER_PAGE = siteConfig('POSTS_PER_PAGE', null, NOTION_CONFIG)
+  const totalPage = Math.ceil(postCount / POSTS_PER_PAGE)
+
+  if (!posts || posts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div className='w-full justify-center'>
+      <div id='posts-wrapper'>
+        {/* 列表 */}
+        <ul className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {posts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </ul>
+      </div>
+      <PaginationSimple page={page} totalPage={totalPage} />
+    </div>
+  )
+}
+
+export default PostListPage

themes/magzine/components/PostListRecommend.js

@@ -0,0 +1,83 @@
+import { siteConfig } from '@/lib/config'
+import PostItemCard from './PostItemCard'
+import PostListEmpty from './PostListEmpty'
+import Swiper from './Swiper'
+
+/**
+ * 博文水平列表
+ * 含封面
+ * 可以指定是否有模块背景色
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostListRecommend = ({ latestPosts, allNavPages }) => {
+  // 获取推荐文章
+  const recommendPosts = getTopPosts({ latestPosts, allNavPages })
+  if (!recommendPosts || recommendPosts.length === 0) {
+    return <PostListEmpty />
+  }
+  const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE')
+
+  return (
+    <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
+      <div className='max-w-screen-3xl w-full mx-auto'>
+        {/* 标题 */}
+        <div className='flex justify-between items-center py-6'>
+          <h3 className='text-4xl font-bold'>{title}</h3>
+        </div>
+        {/* 列表 */}
+        <ul className='hidden lg:grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          {recommendPosts?.map((p, index) => {
+            return <PostItemCard key={index} post={p} />
+          })}
+        </ul>
+        <div className='block lg:hidden px-2'>
+          <Swiper posts={recommendPosts} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 获取推荐置顶文章
+ */
+function getTopPosts({ latestPosts, allNavPages }) {
+  // 默认展示最近更新
+  if (
+    !siteConfig('MAGZINE_RECOMMEND_POST_TAG') ||
+    siteConfig('MAGZINE_RECOMMEND_POST_TAG') === ''
+  ) {
+    return latestPosts
+  }
+
+  // 显示包含‘推荐’标签的文章
+  let sortPosts = []
+
+  // 排序方式
+  if (siteConfig('MAGZINE_RECOMMEND_POST_SORT_BY_UPDATE_TIME')) {
+    sortPosts = Object.create(allNavPages).sort((a, b) => {
+      const dateA = new Date(a?.lastEditedDate)
+      const dateB = new Date(b?.lastEditedDate)
+      return dateB - dateA
+    })
+  } else {
+    sortPosts = Object.create(allNavPages)
+  }
+
+  const count = siteConfig('MAGZINE_RECOMMEND_POST_COUNT', 6)
+  // 只取前4篇
+  const topPosts = []
+  for (const post of sortPosts) {
+    if (topPosts.length === count) {
+      break
+    }
+    // 查找标签
+    if (post?.tags?.indexOf(siteConfig('MAGZINE_RECOMMEND_POST_TAG')) >= 0) {
+      topPosts.push(post)
+    }
+  }
+  return topPosts
+}
+
+export default PostListRecommend

themes/magzine/components/PostListScroll.js

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

themes/magzine/components/PostListSimpleHorizontal.js

@@ -0,0 +1,47 @@
+import Link from 'next/link'
+import PostItemCardSimple from './PostItemCardSimple'
+import PostListEmpty from './PostListEmpty'
+
+/**
+ * 博文水平列表;不带封面图
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PostSimpleListHorizontal = ({ title, href, posts }) => {
+  if (!posts || posts.length === 0) {
+    return <PostListEmpty />
+  }
+
+  return (
+    <div className='w-full py-10 bg-[#F6F6F1] dark:bg-black'>
+      <div className='max-w-screen-3xl w-full mx-auto px-4 lg:px-0'>
+        {/* 标题 */}
+        <div className='flex justify-between items-center py-6'>
+          <h3 className='text-2xl'>{title}</h3>
+          {href && (
+            <Link
+              className='hidden font-bold lg:block text-lg underline'
+              href={href}>
+              <span>查看全部</span>
+              <i className='ml-2 fas fa-arrow-right' />
+            </Link>
+          )}
+        </div>
+        {/* 列表 */}
+        <ul className='grid grid-cols-1 lg:grid-cols-4'>
+          {posts?.map(p => {
+            return <PostItemCardSimple key={p.id} post={p} />
+          })}
+        </ul>
+        {href && (
+          <Link className='lg:hidden block text-lg underline' href={href}>
+            <span>查看全部</span>
+            <i className='ml-2 fas fa-arrow-right' />
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PostSimpleListHorizontal

themes/magzine/components/PostListSlotBar.js

@@ -0,0 +1,29 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 文章列表上方嵌入
+ * @param {*} props
+ * @returns
+ */
+export default function PostListSlotBar(props) {
+  const { tag, category } = props
+  const { locale } = useGlobal()
+
+  if (tag) {
+    return (
+      <div className='flex items-center text-xl py-8'>
+        <i className='mr-2 fas fa-tag' />
+        {locale.COMMON.TAGS}:{tag}
+      </div>
+    )
+  } else if (category) {
+    return (
+      <div className='flex items-center text-xl py-8'>
+        <i className='mr-2 fas fa-th' />
+        {locale.COMMON.CATEGORY}:{category}
+      </div>
+    )
+  } else {
+    return <></>
+  }
+}

themes/magzine/components/PostNavAround.js

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

themes/magzine/components/Progress.js

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

themes/magzine/components/RevolverMaps.js

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

themes/magzine/components/SearchInput.js

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

themes/magzine/components/SocialButton.js

@@ -0,0 +1,104 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * 社交联系方式按钮组
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SocialButton = () => {
+  return (
+    <div className='space-x-3 text-xl text-white flex-wrap flex justify-start '>
+      {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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </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-gray-100' />
+        </a>
+      )}
+    </div>
+  )
+}
+export default SocialButton

themes/magzine/components/Swiper.js

@@ -0,0 +1,137 @@
+import { useRef, useState } from 'react'
+import PostItemCard from './PostItemCard'
+
+const Swiper = ({ posts }) => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const containerRef = useRef(null)
+
+  // 用于记录触摸开始和结束的水平位置
+  const touchStartPos = useRef({ x: 0, y: 0 })
+  const touchEndPos = useRef({ x: 0, y: 0 })
+  const isHorizontalSwipe = useRef(false)
+
+  const handleTouchStart = e => {
+    // 记录初始触摸位置
+    touchStartPos.current = {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    }
+    isHorizontalSwipe.current = false // 重置滑动方向标志
+  }
+
+  const handleTouchMove = e => {
+    const touch = e.touches[0]
+    const deltaX = touch.clientX - touchStartPos.current.x
+    const deltaY = touch.clientY - touchStartPos.current.y
+
+    // 判断是否为水平滑动（避免垂直滑动干扰）
+    if (!isHorizontalSwipe.current) {
+      isHorizontalSwipe.current = Math.abs(deltaX) > Math.abs(deltaY)
+    }
+
+    // 如果是水平滑动，阻止垂直滚动
+    if (isHorizontalSwipe.current) {
+      e.preventDefault() // 阻止垂直方向的默认滚动行为
+    }
+  }
+
+  const handleTouchEnd = e => {
+    if (isHorizontalSwipe.current) {
+      // 记录触摸结束位置
+      touchEndPos.current = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+
+      // 计算滑动距离
+      const deltaX = touchEndPos.current.x - touchStartPos.current.x
+
+      // 如果滑动距离足够大，则决定滑动到下一张或上一张卡片
+      const swipeThreshold = 50 // 设置滑动的阈值
+      if (deltaX > swipeThreshold) {
+        goToPrevious() // 向右滑动，上一张
+      } else if (deltaX < -swipeThreshold) {
+        goToNext() // 向左滑动，下一张
+      } else {
+        // 滑动距离不够，回到当前卡片
+        scrollToCard(currentIndex)
+      }
+    }
+  }
+
+  const goToPrevious = () => {
+    const newIndex = currentIndex === 0 ? posts.length - 1 : currentIndex - 1
+    setCurrentIndex(newIndex)
+    scrollToCard(newIndex)
+  }
+
+  const goToNext = () => {
+    const newIndex = currentIndex === posts.length - 1 ? 0 : currentIndex + 1
+    setCurrentIndex(newIndex)
+    scrollToCard(newIndex)
+  }
+
+  const scrollToCard = index => {
+    const container = containerRef.current
+    if (!container) return
+
+    const cardWidth = container.scrollWidth / posts.length
+    container.scrollTo({
+      left: index * cardWidth,
+      behavior: 'smooth'
+    })
+  }
+
+  const handleIndicatorClick = index => {
+    setCurrentIndex(index)
+    scrollToCard(index)
+  }
+
+  return (
+    <div className='relative w-full mx-auto'>
+      {/* 左侧点击区域 */}
+      <div
+        className='absolute inset-y-0 left-0 w-1/6 z-10 cursor-move bg-black hover:opacity-10 opacity-0 duration-100'
+        onClick={goToPrevious}></div>
+
+      {/* 右侧点击区域 */}
+      <div
+        className='absolute inset-y-0 right-0 w-1/6 z-10 cursor-move bg-black hover:opacity-10 opacity-0 duration-100'
+        onClick={goToNext}></div>
+
+      {/* Swiper Container */}
+      <div
+        ref={containerRef}
+        className='relative w-full overflow-x-scroll scroll-smooth py-4'
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        style={{ WebkitOverflowScrolling: 'touch' }} // iOS自然滚动支持
+      >
+        <div className='flex gap-x-4'>
+          {posts.map((item, index) => (
+            <div key={index} className='w-5/6 flex-shrink-0'>
+              <PostItemCard key={index} post={item} />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Indicator Dots */}
+      <div className='absolute bottom-0 left-0 right-0 flex justify-center space-x-2'>
+        {posts.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => handleIndicatorClick(index)}
+            className={`w-3 h-3 rounded-full ${
+              currentIndex === index
+                ? 'bg-black dark:bg-white'
+                : 'bg-gray-300 dark:bg-gray-700'
+            }`}></button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Swiper

themes/magzine/components/TagGroups.js

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

themes/magzine/components/TagItemMini.js

@@ -0,0 +1,24 @@
+import Link from 'next/link'
+
+const TagItemMini = ({ tag, selected = false }) => {
+  return (
+    <Link
+      key={tag}
+      href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
+      passHref
+      className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+        py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
+         ${
+           selected
+             ? 'text-white dark:text-gray-300 dark:hover:bg-gray-900'
+             : `text-gray-900 hover:shadow-xl dark:border-gray-400  dark:bg-gray-800`
+         }`}>
+      <div className=' dark:text-gray-400'>
+        {/* {selected && <i className='mr-1 fas fa-tag'/>} */}#
+        {tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
+      </div>
+    </Link>
+  )
+}
+
+export default TagItemMini

themes/magzine/components/TopNavBar.js

@@ -0,0 +1,109 @@
+import Collapse from '@/components/Collapse'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { useRef, useState } from 'react'
+import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import { MenuItemDrop } from './MenuItemDrop'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function TopNavBar(props) {
+  const { className, customNav, customMenu } = props
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    {
+      icon: 'fas fa-th',
+      name: locale.COMMON.CATEGORY,
+      href: '/category',
+      show: siteConfig('MAGZINE_MENU_CATEGORY')
+    },
+    {
+      icon: 'fas fa-tag',
+      name: locale.COMMON.TAGS,
+      href: '/tag',
+      show: siteConfig('MAGZINE_MENU_TAG')
+    },
+    {
+      icon: 'fas fa-archive',
+      name: locale.NAV.ARCHIVE,
+      href: '/archive',
+      show: siteConfig('MAGZINE_MENU_ARCHIVE')
+    },
+    {
+      icon: 'fas fa-search',
+      name: locale.NAV.SEARCH,
+      href: '/search',
+      show: siteConfig('MAGZINE_MENU_SEARCH')
+    }
+  ]
+
+  let links = defaultLinks.concat(customNav)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  // 如果 开启自定义菜单，则覆盖Page生成的菜单
+  if (siteConfig('CUSTOM_MENU')) {
+    links = customMenu
+  }
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      id='top-nav'
+      className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+      {/* 移动端折叠菜单 */}
+      <Collapse
+        type='vertical'
+        collapseRef={collapseRef}
+        isOpen={isOpen}
+        className='md:hidden'>
+        <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 lg:hidden '>
+          <MenuBarMobile
+            {...props}
+            onHeightChange={param =>
+              collapseRef.current?.updateCollapseHeight(param)
+            }
+          />
+        </div>
+      </Collapse>
+
+      {/* 导航栏菜单 */}
+      <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+        {/* 左侧图标Logo */}
+        <LogoBar {...props} />
+
+        {/* 折叠按钮、仅移动端显示 */}
+        <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+          <div onClick={toggleMenuOpen} className='cursor-pointer'>
+            {isOpen ? (
+              <i className='fas fa-times' />
+            ) : (
+              <i className='fas fa-bars' />
+            )}
+          </div>
+        </div>
+
+        {/* 桌面端顶部菜单 */}
+        <div className='hidden md:flex'>
+          {links &&
+            links?.map((link, index) => (
+              <MenuItemDrop key={index} link={link} />
+            ))}
+        </div>
+      </div>
+    </div>
+  )
+}

themes/magzine/components/TouchMeCard.js

@@ -0,0 +1,39 @@
+import FlipCard from '@/components/FlipCard'
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 交流频道
+ * @returns
+ */
+export default function TouchMeCard() {
+  // 开关
+  if (!siteConfig('MAGZINE_SOCIAL_CARD', null)) {
+    return <></>
+  }
+
+  return (
+    <div className={'relative h-32 text-black flex flex-col'}>
+      <FlipCard
+        className='cursor-pointer lg:py-8 px-4 py-4 border bg-[#7BE986] dark:bg-yellow-600 dark:border-gray-600'
+        frontContent={
+          <div className='h-full'>
+            <h2 className='font-[1000] text-3xl'>
+              {siteConfig('MAGZINE_SOCIAL_CARD_TITLE_1')}
+            </h2>
+            <h3 className='pt-2'>
+              {siteConfig('MAGZINE_SOCIAL_CARD_TITLE_2')}
+            </h3>
+          </div>
+        }
+        backContent={
+          <Link href={siteConfig('MAGZINE_SOCIAL_CARD_URL')}>
+            <div className='font-[1000] text-xl h-full'>
+              {siteConfig('MAGZINE_SOCIAL_CARD_TITLE_3')}
+            </div>
+          </Link>
+        }
+      />
+    </div>
+  )
+}

themes/magzine/config.js

@@ -0,0 +1,115 @@
+const CONFIG = {
+  // 首屏信息栏按钮文字
+  MAGZINE_HOME_BANNER_ENABLE: true, // 首屏右上角的宣传位
+  MAGZINE_HOME_BUTTON: true,
+  MAGZINE_HOME_BUTTON_URL: '/about',
+  MAGZINE_HOME_BUTTON_TEXT: '了解更多',
+
+  MAGZINE_HOME_HIDDEN_CATEGORY: '分享杂文', //不希望在首页展示的文章分类，用英文逗号隔开
+
+  MAGZINE_HOME_TITLE: '立即开创您的在线业务。完全免费。',
+  MAGZINE_HOME_DESCRIPTION:
+    '借助NotionNext，获得助您开创、经营和扩展业务所需的全部工具和帮助。',
+  MAGZINE_HOME_TIPS: 'AI时代来临，这是属于超级个体的狂欢盛宴！',
+
+  // 首页底部推荐文章标签, 例如 [推荐] , 最多六篇文章; 若留空白''，则推荐最近更新文章
+  MAGZINE_RECOMMEND_POST_TAG: '推荐',
+  MAGZINE_RECOMMEND_POST_COUNT: 6,
+  MAGZINE_RECOMMEND_POST_TITLE: '推荐文章',
+  MAGZINE_RECOMMEND_POST_SORT_BY_UPDATE_TIME: false, // 推荐文章排序，为`true`时将强制按最后修改时间倒序
+
+  // Style
+  MAGZINE_RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MAGZINE_RIGHT_DARK || false, // 右侧面板深色模式
+
+  MAGZINE_POST_LIST_COVER: true, // 文章列表显示图片封面
+  MAGZINE_POST_LIST_PREVIEW: true, // 列表显示文章预览
+  MAGZINE_POST_LIST_CATEGORY: true, // 列表显示文章分类
+  MAGZINE_POST_LIST_TAG: true, // 列表显示文章标签
+
+  MAGZINE_POST_DETAIL_CATEGORY: true, // 文章显示分类
+  MAGZINE_POST_DETAIL_TAG: true, // 文章显示标签
+
+  // 文章页面联系卡
+  MAGZINE_SOCIAL_CARD: true, // 是否显示右侧，点击加入社群按钮
+  MAGZINE_SOCIAL_CARD_TITLE_1: '交流频道',
+  MAGZINE_SOCIAL_CARD_TITLE_2: '加入社群讨论分享',
+  MAGZINE_SOCIAL_CARD_TITLE_3: '点击加入社群',
+  MAGZINE_SOCIAL_CARD_URL: 'https://docs.tangly1024.com/article/chat-community',
+
+  // 页脚菜单
+  MAGZINE_FOOTER_LINKS: [
+    {
+      name: '友情链接',
+      menus: [
+        {
+          title: 'Tangly的学习笔记',
+          href: 'https://blog.tangly1024.com'
+        },
+        {
+          title: 'NotionNext',
+          href: 'https://www.tangly1024.com'
+        }
+      ]
+    },
+    {
+      name: '开发者',
+      menus: [
+        { title: 'Github', href: 'https://github.com/tangly1024/NotionNext' },
+        {
+          title: '开发帮助',
+          href: 'https://docs.tangly1024.com/article/how-to-develop-with-notion-next'
+        },
+        {
+          title: '功能反馈',
+          href: 'https://github.com/tangly1024/NotionNext/issues/new/choose'
+        },
+        {
+          title: '技术讨论',
+          href: 'https://github.com/tangly1024/NotionNext/discussions'
+        },
+        {
+          title: '关于作者',
+          href: 'https://blog.tangly1024.com/about'
+        }
+      ]
+    },
+    {
+      name: '支持',
+      menus: [
+        {
+          title: '站长社群',
+          href: 'https://docs.tangly1024.com/article/chat-community'
+        },
+        {
+          title: '咨询与定制',
+          href: 'https://docs.tangly1024.com/article/my-service'
+        },
+        {
+          title: '升级手册',
+          href: 'https://docs.tangly1024.com/article/my-service'
+        },
+        {
+          title: '安装教程',
+          href: 'https://docs.tangly1024.com/article/how-to-update-notionnext'
+        },
+        { title: 'SEO推广', href: 'https://seo.tangly1024.com/' }
+      ]
+    },
+    {
+      name: '解决方案',
+      menus: [
+        { title: '建站工具', href: 'https://www.tangly1024.com/' },
+        { title: 'NotionNext', href: 'https://docs.tangly1024.com/about' }
+      ]
+    }
+  ],
+
+  // 旧版本顶部菜单
+  MAGZINE_MENU_CATEGORY: true, // 显示分类
+  MAGZINE_MENU_TAG: true, // 显示标签
+  MAGZINE_MENU_ARCHIVE: true, // 显示归档
+  MAGZINE_MENU_SEARCH: true, // 显示搜索
+
+  MAGZINE_WIDGET_TO_TOP: true // 跳回顶部
+}
+export default CONFIG

themes/magzine/index.js

@@ -0,0 +1,454 @@
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import Comment from '@/components/Comment'
+import { AdSlot } from '@/components/GoogleAdsense'
+import LoadingCover from '@/components/LoadingCover'
+import replaceSearchResult from '@/components/Mark'
+import NotionPage from '@/components/NotionPage'
+import ShareBar from '@/components/ShareBar'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import ArticleInfo from './components/ArticleInfo'
+import { ArticleLock } from './components/ArticleLock'
+import BannerFullWidth from './components/BannerFullWidth'
+import CTA from './components/CTA'
+import Catalog from './components/Catalog'
+import CatalogFloat from './components/CatalogFloat'
+import CategoryGroup from './components/CategoryGroup'
+import Footer from './components/Footer'
+import Header from './components/Header'
+import Hero from './components/Hero'
+import PostBannerGroupByCategory from './components/PostBannerGroupByCategory'
+import PostGroupArchive from './components/PostGroupArchive'
+import PostGroupLatest from './components/PostGroupLatest'
+import PostListPage from './components/PostListPage'
+import PostListRecommend from './components/PostListRecommend'
+import PostListScroll from './components/PostListScroll'
+import PostSimpleListHorizontal from './components/PostListSimpleHorizontal'
+import PostNavAround from './components/PostNavAround'
+import TagGroups from './components/TagGroups'
+import TagItemMini from './components/TagItemMini'
+import TouchMeCard from './components/TouchMeCard'
+import CONFIG from './config'
+import { Style } from './style'
+
+// 主题全局状态
+const ThemeGlobalMagzine = createContext()
+export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
+
+/**
+ * 基础布局
+ * 采用左右两侧布局，移动端使用顶部导航栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children } = props
+  const [tocVisible, changeTocVisible] = useState(false)
+  const searchModal = useRef(null)
+
+  return (
+    <ThemeGlobalMagzine.Provider
+      value={{ searchModal, tocVisible, changeTocVisible }}>
+      {/* CSS样式 */}
+      <Style />
+
+      <div
+        id='theme-medium'
+        className={`${siteConfig('FONT_STYLE')} bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>
+        <main
+          id='wrapper'
+          className={'relative flex justify-between w-full h-full mx-auto'}>
+          {/* 主区 */}
+          <div id='container-wrapper' className='w-full relative z-10'>
+            <Header {...props} />
+            <div id='main' role='main'>
+              {children}
+            </div>
+            {/* 行动呼吁 */}
+            <CTA {...props} />
+            <Footer title={siteConfig('TITLE')} />
+          </div>
+        </main>
+
+        {/* 全局Loading */}
+        <LoadingCover />
+        {/* 全局搜索遮罩 */}
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
+      </div>
+    </ThemeGlobalMagzine.Provider>
+  )
+}
+
+/**
+ * 首页
+ * 首页就是一个博客列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutIndex = props => {
+  const { posts } = props
+  // 最新文章 从第4个元素开始截取出4个
+  const newPosts = posts.slice(3, 7)
+
+  return (
+    <div className='pt-10 md:pt-18'>
+      {/* 首屏宣传区块 */}
+      <Hero posts={posts} />
+
+      {/* 最新文章区块 */}
+      <PostSimpleListHorizontal
+        title='最新文章'
+        href='/archive'
+        posts={newPosts}
+      />
+
+      {/* 文章分类陈列区 */}
+      <PostBannerGroupByCategory {...props} />
+
+      {/* 文章推荐  */}
+      <PostListRecommend {...props} />
+    </div>
+  )
+}
+
+/**
+ * 博客列表
+ * @returns
+ */
+const LayoutPostList = props => {
+  // 当前筛选的分类或标签
+  const { category, tag } = props
+
+  return (
+    <div className=' max-w-screen-3xl mx-auto w-full px-2 lg:px-0'>
+      {/* 一个顶部条 */}
+      <h2 className='py-8 text-2xl font-bold'>{category || tag}</h2>
+
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <PostListPage {...props} />
+      ) : (
+        <PostListScroll {...props} />
+      )}
+    </div>
+  )
+}
+
+/**
+ * 文章详情
+ * @param {*} props
+ * @returns
+ */
+const LayoutSlug = props => {
+  const { post, recommendPosts, prev, next, lock, validPassword } = props
+  const { locale } = useGlobal()
+  const router = useRouter()
+
+  useEffect(() => {
+    // 404
+    if (!post) {
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
+          }
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
+    }
+  }, [post])
+
+  return (
+    <>
+      <div {...props} className='w-full mx-auto max-w-screen-3xl'>
+        {/* 广告位 */}
+        <WWAds orientation='horizontal' />
+
+        {/* 文章锁 */}
+        {lock && <ArticleLock validPassword={validPassword} />}
+
+        {!lock && (
+          <div className='w-full max-w-screen-3xl mx-auto'>
+            {/* 文章信息 */}
+            <ArticleInfo {...props} />
+
+            {/* 文章区块分为三列 */}
+            <div className='grid grid-cols-1 lg:grid-cols-5 gap-8 py-12'>
+              <div className='h-full lg:col-span-1 hidden lg:block'>
+                <Catalog
+                  post={post}
+                  toc={post?.toc || []}
+                  className='sticky top-20'
+                />
+              </div>
+
+              {/* Notion文章主体 */}
+              <article className='max-w-3xl lg:col-span-3 w-full mx-auto px-2 lg:px-0'>
+                <div id='article-wrapper'>
+                  <NotionPage post={post} />
+                </div>
+
+                {/* 文章底部区域  */}
+                <section>
+                  <div className='py-2 flex justify-end'>
+                    {siteConfig('MAGZINE_POST_DETAIL_TAG') &&
+                      post?.tagItems?.map(tag => (
+                        <TagItemMini key={tag.name} tag={tag} />
+                      ))}
+                  </div>
+                  {/* 分享 */}
+                  <ShareBar post={post} />
+                  {/* 上一篇下一篇 */}
+                  <PostNavAround prev={prev} next={next} />
+
+                  {/* 评论区 */}
+                  <Comment frontMatter={post} />
+                </section>
+              </article>
+
+              <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
+                {/* meta信息 */}
+                <section className='text-lg gap-y-6 text-center lg:text-left'>
+                  <div className='text-gray-500 py-1 dark:text-gray-600 '>
+                    {/* <div className='whitespace-nowrap'>
+                      <i className='far fa-calendar mr-2' />
+                      {post?.publishDay}
+                    </div> */}
+                    <div className='whitespace-nowrap mr-2'>
+                      <i className='far fa-calendar-check mr-2' />
+                      {post?.lastEditedDay}
+                    </div>
+                    <div className='hidden busuanzi_container_page_pv  mr-2 whitespace-nowrap'>
+                      <i className='mr-1 fas fa-fire' />
+                      <span className='busuanzi_value_page_pv' />
+                    </div>
+                  </div>
+                </section>
+
+                {/* 最新文章区块 */}
+                <div>
+                  <PostGroupLatest {...props} vertical={true} />
+                </div>
+
+                {/* Adsense */}
+                <div>
+                  <AdSlot />
+                </div>
+
+                {/* 留白 */}
+                <div></div>
+
+                {/* 文章分类区块 */}
+                <div>
+                  <CategoryGroup {...props} />
+                </div>
+
+                <div>
+                  <TouchMeCard />
+                </div>
+
+                <div>
+                  <WWAds />
+                </div>
+
+                {/* 底部留白 */}
+                <div></div>
+              </div>
+            </div>
+
+            {/* 移动端目录 */}
+            <CatalogFloat {...props} />
+          </div>
+        )}
+      </div>
+
+      <div>
+        {/* 广告醒图 */}
+        <BannerFullWidth />
+        {/* 推荐关联文章 */}
+        <PostSimpleListHorizontal
+          title={locale.COMMON.RELATE_POSTS}
+          posts={recommendPosts}
+        />
+      </div>
+    </>
+  )
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
+const LayoutSearch = props => {
+  const { locale } = useGlobal()
+  const { keyword } = props
+  const router = useRouter()
+  const currentSearch = keyword || router?.query?.s
+
+  useEffect(() => {
+    if (isBrowser) {
+      replaceSearchResult({
+        doms: document.getElementById('posts-wrapper'),
+        search: keyword,
+        target: {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        }
+      })
+    }
+  }, [])
+
+  return (
+    <div className='max-w-screen-3xl w-full mx-auto'>
+      {/* 搜索导航栏 */}
+      <div className='py-12'>
+        <div className='pb-4 w-full'>{locale.NAV.SEARCH}</div>
+        {!currentSearch && (
+          <>
+            <TagGroups {...props} />
+            <CategoryGroup {...props} />
+          </>
+        )}
+      </div>
+
+      {/* 文章列表 */}
+      {currentSearch && (
+        <div>
+          {siteConfig('POST_LIST_STYLE') === 'page' ? (
+            <PostListPage {...props} />
+          ) : (
+            <PostListScroll {...props} />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 归档
+ * @param {*} props
+ * @returns
+ */
+const LayoutArchive = props => {
+  const { archivePosts } = props
+  return (
+    <>
+      <div className='w-full max-w-screen-3xl mx-auto mt-14 min-h-full'>
+        {Object.keys(archivePosts)?.map(archiveTitle => (
+          <PostGroupArchive
+            key={archiveTitle}
+            archiveTitle={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
+
+/**
+ * 404
+ * @param {*} props
+ * @returns
+ */
+const Layout404 = props => {
+  return (
+    <>
+      <div className='w-full h-96 py-80 flex justify-center items-center'>
+        404 Not found.
+      </div>
+    </>
+  )
+}
+
+/**
+ * 分类列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
+  const { categoryOptions } = props
+  const { locale } = useGlobal()
+  return (
+    <div className='w-full max-w-screen-3xl mx-auto min-h-96'>
+      <div className='bg-white dark:bg-gray-700 py-10'>
+        <div className='dark:text-gray-200 mb-5 text-2xl font-bold'>
+          {/* <i className='mr-4 fas fa-th' /> */}
+          {locale.COMMON.CATEGORY}:
+        </div>
+        <div id='category-list' className='duration-200 flex flex-wrap'>
+          {categoryOptions?.map(category => {
+            return (
+              <Link
+                key={category.name}
+                href={`/category/${category.name}`}
+                passHref
+                legacyBehavior>
+                <div
+                  className={
+                    'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+                  }>
+                  {/* <i className='mr-4 fas fa-folder' /> */}
+                  {category.name}({category.count})
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 标签列表
+ * @param {*} props
+ * @returns
+ */
+const LayoutTagIndex = props => {
+  const { tagOptions } = props
+  const { locale } = useGlobal()
+  return (
+    <div className='w-full max-w-screen-3xl mx-auto min-h-96'>
+      <div className='bg-white dark:bg-gray-700 py-10'>
+        <div className='dark:text-gray-200 mb-5  text-2xl font-bold'>
+          {/* <i className='mr-4 fas fa-tag' /> */}
+          {locale.COMMON.TAGS}:
+        </div>
+        <div id='tags-list' className='duration-200 flex flex-wrap'>
+          {tagOptions?.map(tag => {
+            return (
+              <div key={tag.name} className='p-2'>
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export {
+  Layout404,
+  LayoutArchive,
+  LayoutBase,
+  LayoutCategoryIndex,
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
+}

themes/magzine/style.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    // 底色
+    .dark body{
+        background-color: black;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/medium/components/BottomMenuBar.js

@@ -1,8 +1,8 @@
 import Link from 'next/link'
-import { useMediumGlobal } from '@/themes/medium'
+import { useMediumGlobal } from '..'
 import JumpToTopButton from './JumpToTopButton'
 
-export default function BottomMenuBar ({ post, className }) {
+export default function BottomMenuBar({ post, className }) {
   const { tocVisible, changeTocVisible } = useMediumGlobal()
   const showTocButton = post?.toc?.length > 0
 
@@ -11,24 +11,34 @@ export default function BottomMenuBar ({ post, className }) {
   }
 
   return (
-    <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
+    <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'>
         <Link href='/search' passHref legacyBehavior>
           <div className='flex w-full items-center justify-center cursor-pointer'>
-            <i className='fas fa-search'/>
+            <i className='fas fa-search' />
           </div>
         </Link>
         <div className='flex w-full items-center justify-center cursor-pointer z-20'>
-          <JumpToTopButton/>
+          <JumpToTopButton />
         </div>
-        {showTocButton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer z-30'>
-          <i className='fas fa-list-ol ' />
-        </div>}
-        { !showTocButton && <Link href='/' passHref legacyBehavior>
-          <div className='flex w-full items-center justify-center cursor-pointer'>
-            <i className='fas fa-home' />
+        {showTocButton && (
+          <div
+            onClick={toggleToc}
+            className='flex w-full items-center justify-center cursor-pointer z-30'>
+            <i className='fas fa-list-ol ' />
           </div>
-        </Link>}
+        )}
+        {!showTocButton && (
+          <Link href='/' passHref legacyBehavior>
+            <div className='flex w-full items-center justify-center cursor-pointer'>
+              <i className='fas fa-home' />
+            </div>
+          </Link>
+        )}
       </div>
     </div>
   )

themes/medium/components/TocDrawer.js

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

themes/starter/components/About.js

@@ -1,195 +1,178 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react/no-unescaped-entities */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 
 /**
  * 首页的关于模块
  */
 export const About = () => {
-  return <>
-       {/* <!-- ====== About Section Start --> */}
-       <section
-      id="about"
-      className="bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]"
-    >
-      <div className="container">
-        <div className="wow fadeInUp" data-wow-delay=".2s">
-          <div className="-mx-4 flex flex-wrap items-center">
+  return (
+    <>
+      {/* <!-- ====== About Section Start --> */}
+      <section
+        id='about'
+        className='bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]'>
+        <div className='container'>
+          <div className='wow fadeInUp' data-wow-delay='.2s'>
+            <div className='-mx-4 flex flex-wrap items-center'>
+              {/* 左侧的文字说明板块 */}
+              <div className='w-full px-4 lg:w-1/2'>
+                <div className='mb-12 max-w-[540px] lg:mb-0'>
+                  <h2 className='mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]'>
+                    {siteConfig('STARTER_ABOUT_TITLE')}
+                  </h2>
+                  <p
+                    className='mb-10 text-base leading-relaxed text-body-color dark:text-dark-6'
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_ABOUT_TEXT')
+                    }}></p>
 
-            {/* 左侧的文字说明板块 */}
-            <div className="w-full px-4 lg:w-1/2">
-              <div className="mb-12 max-w-[540px] lg:mb-0">
-                <h2
-                  className="mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]"
-                >
-                  {siteConfig('STARTER_ABOUT_TITLE', null, CONFIG)}
-                </h2>
-                <p className="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6"
-                    dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_ABOUT_TEXT', null, CONFIG) }
-                }></p>
-
-                <a
-                  href={siteConfig('STARTER_ABOUT_BUTTON_URL', null, CONFIG)}
-                  className="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark"
-                >
-                  {siteConfig('STARTER_ABOUT_BUTTON_TEXT', null, CONFIG)}
-                </a>
-              </div>
-            </div>
-
-            {/* 右侧的图片海报 */}
-            <div className="w-full px-4 lg:w-1/2">
-              <div className="-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4">
-                <div className="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
-                  <div
-                    className="mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]"
-                  >
-                    <img
-                      src={siteConfig('STARTER_ABOUT_IMAGE_1', null, CONFIG)}
-                      alt="about image"
-                      className="h-full w-full object-cover object-center"
-                    />
-                  </div>
+                  <a
+                    href={siteConfig('STARTER_ABOUT_BUTTON_URL')}
+                    className='inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark'>
+                    {siteConfig('STARTER_ABOUT_BUTTON_TEXT')}
+                  </a>
                 </div>
+              </div>
 
-                <div className="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
-                  <div
-                    className="mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]"
-                  >
-                    <img
-                      src={siteConfig('STARTER_ABOUT_IMAGE_2', null, CONFIG)}
-                      alt="about image"
-                      className="h-full w-full object-cover object-center"
-                    />
+              {/* 右侧的图片海报 */}
+              <div className='w-full px-4 lg:w-1/2'>
+                <div className='-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4'>
+                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
+                    <div className='mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]'>
+                      <img
+                        src={siteConfig('STARTER_ABOUT_IMAGE_1')}
+                        alt='about image'
+                        className='h-full w-full object-cover object-center'
+                      />
+                    </div>
                   </div>
 
-                  <div
-                    className="relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8"
-                  >
-                    <div>
-                      <span className="block text-5xl font-extrabold text-white">
-                        {siteConfig('STARTER_ABOUT_TIPS_1', null, CONFIG)}
-                      </span>
-                      <span className="block text-base font-semibold text-white">
-                        {siteConfig('STARTER_ABOUT_TIPS_2', null, CONFIG)}
-                      </span>
-                      <span
-                        className="block text-base font-medium text-white text-opacity-70"
-                      >
-                        {siteConfig('STARTER_ABOUT_TIPS_3', null, CONFIG)}
-                      </span>
+                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
+                    <div className='mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]'>
+                      <img
+                        src={siteConfig('STARTER_ABOUT_IMAGE_2')}
+                        alt='about image'
+                        className='h-full w-full object-cover object-center'
+                      />
                     </div>
-                    <div>
-                      <span className="absolute left-0 top-0 -z-10">
-                        <svg
-                          width="106"
-                          height="144"
-                          viewBox="0 0 106 144"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="-67"
-                            y="47.127"
-                            width="113.378"
-                            height="131.304"
-                            transform="rotate(-42.8643 -67 47.127)"
-                            fill="url(#paint0_linear_1416_214)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_214"
-                              x1="-10.3111"
-                              y1="47.127"
-                              x2="-10.3111"
-                              y2="178.431"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
-                      <span className="absolute right-0 top-0 -z-10">
-                        <svg
-                          width="130"
-                          height="97"
-                          viewBox="0 0 130 97"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="0.86792"
-                            y="-6.67725"
-                            width="155.563"
-                            height="140.614"
-                            transform="rotate(-42.8643 0.86792 -6.67725)"
-                            fill="url(#paint0_linear_1416_215)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_215"
-                              x1="78.6495"
-                              y1="-6.67725"
-                              x2="78.6495"
-                              y2="133.937"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
-                      <span className="absolute bottom-0 right-0 -z-10">
-                        <svg
-                          width="175"
-                          height="104"
-                          viewBox="0 0 175 104"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            opacity="0.1"
-                            x="175.011"
-                            y="108.611"
-                            width="101.246"
-                            height="148.179"
-                            transform="rotate(137.136 175.011 108.611)"
-                            fill="url(#paint0_linear_1416_216)"
-                          />
-                          <defs>
-                            <linearGradient
-                              id="paint0_linear_1416_216"
-                              x1="225.634"
-                              y1="108.611"
-                              x2="225.634"
-                              y2="256.79"
-                              gradientUnits="userSpaceOnUse"
-                            >
-                              <stop stopColor="white" />
-                              <stop
-                                offset="1"
-                                stopColor="white"
-                                stopOpacity="0"
-                              />
-                            </linearGradient>
-                          </defs>
-                        </svg>
-                      </span>
+
+                    <div className='relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8'>
+                      <div>
+                        <span className='block text-5xl font-extrabold text-white'>
+                          {siteConfig('STARTER_ABOUT_TIPS_1')}
+                        </span>
+                        <span className='block text-base font-semibold text-white'>
+                          {siteConfig('STARTER_ABOUT_TIPS_2')}
+                        </span>
+                        <span className='block text-base font-medium text-white text-opacity-70'>
+                          {siteConfig('STARTER_ABOUT_TIPS_3')}
+                        </span>
+                      </div>
+                      <div>
+                        <span className='absolute left-0 top-0 -z-10'>
+                          <svg
+                            width='106'
+                            height='144'
+                            viewBox='0 0 106 144'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='-67'
+                              y='47.127'
+                              width='113.378'
+                              height='131.304'
+                              transform='rotate(-42.8643 -67 47.127)'
+                              fill='url(#paint0_linear_1416_214)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_214'
+                                x1='-10.3111'
+                                y1='47.127'
+                                x2='-10.3111'
+                                y2='178.431'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                        <span className='absolute right-0 top-0 -z-10'>
+                          <svg
+                            width='130'
+                            height='97'
+                            viewBox='0 0 130 97'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='0.86792'
+                              y='-6.67725'
+                              width='155.563'
+                              height='140.614'
+                              transform='rotate(-42.8643 0.86792 -6.67725)'
+                              fill='url(#paint0_linear_1416_215)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_215'
+                                x1='78.6495'
+                                y1='-6.67725'
+                                x2='78.6495'
+                                y2='133.937'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                        <span className='absolute bottom-0 right-0 -z-10'>
+                          <svg
+                            width='175'
+                            height='104'
+                            viewBox='0 0 175 104'
+                            fill='none'
+                            xmlns='http://www.w3.org/2000/svg'>
+                            <rect
+                              opacity='0.1'
+                              x='175.011'
+                              y='108.611'
+                              width='101.246'
+                              height='148.179'
+                              transform='rotate(137.136 175.011 108.611)'
+                              fill='url(#paint0_linear_1416_216)'
+                            />
+                            <defs>
+                              <linearGradient
+                                id='paint0_linear_1416_216'
+                                x1='225.634'
+                                y1='108.611'
+                                x2='225.634'
+                                y2='256.79'
+                                gradientUnits='userSpaceOnUse'>
+                                <stop stopColor='white' />
+                                <stop
+                                  offset='1'
+                                  stopColor='white'
+                                  stopOpacity='0'
+                                />
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -197,8 +180,8 @@ export const About = () => {
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== About Section End --> */}
+      </section>
+      {/* <!-- ====== About Section End --> */}
     </>
+  )
 }

themes/starter/components/BackToTopButton.js

@@ -1,41 +1,45 @@
-import throttle from 'lodash.throttle';
+import throttle from 'lodash.throttle'
 import { useCallback, useEffect } from 'react'
 
+/**
+ * 回顶按钮
+ * @returns
+ */
 export const BackToTopButton = () => {
   useEffect(() => {
     // ====== scroll top js
     function scrollTo(element, to = 0, duration = 500) {
-      const start = element.scrollTop;
-      const change = to - start;
-      const increment = 20;
-      let currentTime = 0;
+      const start = element.scrollTop
+      const change = to - start
+      const increment = 20
+      let currentTime = 0
 
       const animateScroll = () => {
-        currentTime += increment;
+        currentTime += increment
 
-        const val = Math.easeInOutQuad(currentTime, start, change, duration);
+        const val = Math.easeInOutQuad(currentTime, start, change, duration)
 
-        element.scrollTop = val;
+        element.scrollTop = val
 
         if (currentTime < duration) {
-          setTimeout(animateScroll, increment);
+          setTimeout(animateScroll, increment)
         }
-      };
+      }
 
-      animateScroll();
+      animateScroll()
     }
 
     Math.easeInOutQuad = function (t, b, c, d) {
-      t /= d / 2;
-      if (t < 1) return (c / 2) * t * t + b;
-      t--;
-      return (-c / 2) * (t * (t - 2) - 1) + b;
-    };
+      t /= d / 2
+      if (t < 1) return (c / 2) * t * t + b
+      t--
+      return (-c / 2) * (t * (t - 2) - 1) + b
+    }
     const backToTop = document.querySelector('.back-to-top')
     if (backToTop) {
       backToTop.onclick = () => {
-        scrollTo(document.documentElement);
-      };
+        scrollTo(document.documentElement)
+      }
     }
 
     window.addEventListener('scroll', navBarScollListener)
@@ -48,20 +52,22 @@ export const BackToTopButton = () => {
   const throttleMs = 200
   const navBarScollListener = useCallback(
     throttle(() => {
-      const scrollY = window.scrollY;
+      const scrollY = window.scrollY
       // 显示或隐藏返回顶部按钮
-      const backToTop = document.querySelector('.back-to-top');
+      const backToTop = document.querySelector('.back-to-top')
       if (backToTop) {
-        backToTop.style.display = scrollY > 50 ? 'flex' : 'none';
+        backToTop.style.display = scrollY > 50 ? 'flex' : 'none'
       }
     }, throttleMs)
   )
 
-  return <>
-        {/* <!-- ====== Back To Top Start --> */}
-        <a className="back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark">
-            <span className="mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white" ></span>
-         </a>
-    {/* <!-- ====== Back To Top End --> */}
+  return (
+    <>
+      {/* <!-- ====== Back To Top Start --> */}
+      <a className='back-to-top fixed bottom-16 left-auto right-8 z-[999] hidden h-10 w-10 items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-dark'>
+        <span className='mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white'></span>
+      </a>
+      {/* <!-- ====== Back To Top End --> */}
     </>
+  )
 }

themes/starter/components/Banner.js

@@ -1,30 +1,25 @@
 /**
- * 详情页面顶部条
+ * 页面顶部宣传栏
  * @returns
  */
 export const Banner = ({ title, description }) => {
-  return <>
-    {/* <!-- ====== Banner Section Start --> */}
-    <div
-      className="relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]"
-    >
-      <div
-        className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3"
-      ></div>
-      <div className="container">
-        <div className="flex flex-wrap items-center -mx-4">
-          <div className="w-full px-4">
-            <div className="text-center">
-              <h1
-                className="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {title}
-              </h1>
-              <p className="mb-5 text-base text-body-color dark:text-dark-6">
-                {description}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Banner Section Start --> */}
+      <div className='relative z-10 overflow-hidden pb-[60px] pt-[120px] dark:bg-dark md:pt-[130px] lg:pt-[160px]'>
+        <div className='absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-stroke/0 via-stroke to-stroke/0 dark:via-dark-3'></div>
+        <div className='container'>
+          <div className='flex flex-wrap items-center -mx-4'>
+            <div className='w-full px-4'>
+              <div className='text-center'>
+                <h1 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {title}
+                </h1>
+                <p className='mb-5 text-base text-body-color dark:text-dark-6'>
+                  {description}
+                </p>
 
-              {/* <ul className="flex items-center justify-center gap-[10px]">
+                {/* <ul className="flex items-center justify-center gap-[10px]">
                 <li>
                   <a
                     href="index.html"
@@ -43,11 +38,12 @@ export const Banner = ({ title, description }) => {
                   </a>
                 </li>
               </ul> */}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    {/* <!-- ====== Banner Section End --> */}
+      {/* <!-- ====== Banner Section End --> */}
     </>
+  )
 }

themes/starter/components/Blog.js

@@ -1,7 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
-import CONFIG from '../config'
 
 /**
  * 博文列表
@@ -19,14 +18,14 @@ export const Blog = ({ posts }) => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_BLOG_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TITLE')}
                 </span>
                 <h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
-                  {siteConfig('STARTER_BLOG_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_BLOG_TEXT_1')}
                 </h2>
                 <p
                   dangerouslySetInnerHTML={{
-                    __html: siteConfig('STARTER_BLOG_TEXT_2', null, CONFIG)
+                    __html: siteConfig('STARTER_BLOG_TEXT_2')
                   }}
                   className='text-base text-body-color dark:text-dark-6'></p>
               </div>

themes/starter/components/Brand.js

@@ -1,37 +1,39 @@
 /* eslint-disable @next/next/no-img-element */
 
-import CONFIG from '../config'
+import { siteConfig } from '@/lib/config'
 
 /**
  * 合作伙伴
  * @returns
  */
 export const Brand = () => {
-  return <>
-
-    {/* <!-- ====== Brands Section Start --> */}
-    <section className="pb-20 dark:bg-dark">
-      <div className="container px-4">
-        <div
-          className="-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11"
-        >
-          {CONFIG.STARTER_BRANDS?.map((item, index) => {
-            return <a key={index} href={item.URL}>
-            <img
-              src={item.IMAGE}
-              alt={item.TITLE}
-              className="dark:hidden"
-            />
-            <img
-              src={item.IMAGE_WHITE}
-              alt={item.TITLE}
-              className="hidden dark:block"
-            />
-          </a>
-          })}
+  const brands = siteConfig('STARTER_BRANDS')
+  return (
+    <>
+      {/* <!-- ====== Brands Section Start --> */}
+      <section className='pb-20 dark:bg-dark'>
+        <div className='container px-4'>
+          <div className='-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11'>
+            {brands?.map((item, index) => {
+              return (
+                <a key={index} href={item.URL}>
+                  <img
+                    src={item.IMAGE}
+                    alt={item.TITLE}
+                    className='dark:hidden'
+                  />
+                  <img
+                    src={item.IMAGE_WHITE}
+                    alt={item.TITLE}
+                    className='hidden dark:block'
+                  />
+                </a>
+              )
+            })}
+          </div>
         </div>
-      </div>
-    </section>
-    {/* <!-- ====== Brands Section End --> */}
+      </section>
+      {/* <!-- ====== Brands Section End --> */}
     </>
+  )
 }

themes/starter/components/CTA.js

@@ -1,106 +1,111 @@
+import { siteConfig } from '@/lib/config'
+
+/**
+ * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。
+ * 该组件通过以下方式激励用户进行特定操作
+ * 用户的公告栏内容将在此显示
+ **/
 export const CTA = () => {
-  return <>
-
-    {/* <!-- ====== CTA Section Start --> */}
-    <section
-      className="relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]"
-    >
-      <div className="container mx-auto">
-        <div className="relative overflow-hidden">
-          <div className="-mx-4 flex flex-wrap items-stretch">
-            <div className="w-full px-4">
-              <div className="mx-auto max-w-[570px] text-center">
-                <h2
-                  className="mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]"
-                >
-                  <span>What Are You Looking For?</span>
-                  <span className="text-3xl font-normal md:text-[40px]">
-                    Get Started Now
-                  </span>
-                </h2>
-                <p
-                  className="mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white"
-                >
-                  There are many variations of passages of Lorem Ipsum but the
-                  majority have suffered in some form.
-                </p>
-                <a
-
-                  className="inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]"
-                >
-                  Start using Play
-                </a>
+  if (!siteConfig('STARTER_CTA_ENABLE')) {
+    return <></>
+  }
+  return (
+    <>
+      {/* <!-- ====== CTA Section Start --> */}
+      <section className='relative z-10 overflow-hidden bg-primary py-20 lg:py-[115px]'>
+        <div className='container mx-auto'>
+          <div className='relative overflow-hidden'>
+            <div className='-mx-4 flex flex-wrap items-stretch'>
+              <div className='w-full px-4'>
+                <div className='mx-auto max-w-[570px] text-center'>
+                  <h2 className='mb-2.5 text-3xl font-bold text-white md:text-[38px] md:leading-[1.44]'>
+                    <span>{siteConfig('STARTER_CTA_TITLE')}</span>
+                    <span className='text-3xl font-normal md:text-[40px]'>
+                      {siteConfig('STARTER_CTA_TITLE_2')}
+                    </span>
+                  </h2>
+                  <p className='mx-auto mb-6 max-w-[515px] text-base leading-[1.5] text-white'>
+                    {siteConfig('STARTER_CTA_DESCRIOTN')}
+                  </p>
+                  {siteConfig('STARTER_CTA_BUTTON') && (
+                    <>
+                      <a
+                        href={siteConfig('STARTER_CTA_BUTTON_URL')}
+                        className='inline-block rounded-md border border-transparent bg-secondary px-7 py-3 text-base font-medium text-white transition hover:bg-[#0BB489]'>
+                        {siteConfig('STARTER_CTA_BUTTON_TEXT')}
+                      </a>
+                    </>
+                  )}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div>
-        <span className="absolute left-0 top-0">
-          <svg
-            width="495"
-            height="470"
-            viewBox="0 0 495 470"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="55"
-              cy="442"
-              r="138"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="50"
-            />
-            <circle
-              cx="446"
-              r="39"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="20"
-            />
-            <path
-              d="M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z"
-              stroke="white"
-              stroke-opacity="0.08"
-              stroke-width="12"
-            />
-          </svg>
-        </span>
-        <span className="absolute bottom-0 right-0">
-          <svg
-            width="493"
-            height="470"
-            viewBox="0 0 493 470"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="462"
-              cy="5"
-              r="138"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="50"
-            />
-            <circle
-              cx="49"
-              cy="470"
-              r="39"
-              stroke="white"
-              stroke-opacity="0.04"
-              stroke-width="20"
-            />
-            <path
-              d="M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z"
-              stroke="white"
-              stroke-opacity="0.06"
-              stroke-width="13"
-            />
-          </svg>
-        </span>
-      </div>
-    </section>
-    {/* <!-- ====== CTA Section End --> */}
+        <div>
+          <span className='absolute left-0 top-0'>
+            <svg
+              width='495'
+              height='470'
+              viewBox='0 0 495 470'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'>
+              <circle
+                cx='55'
+                cy='442'
+                r='138'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='50'
+              />
+              <circle
+                cx='446'
+                r='39'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='20'
+              />
+              <path
+                d='M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z'
+                stroke='white'
+                stroke-opacity='0.08'
+                stroke-width='12'
+              />
+            </svg>
+          </span>
+          <span className='absolute bottom-0 right-0'>
+            <svg
+              width='493'
+              height='470'
+              viewBox='0 0 493 470'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'>
+              <circle
+                cx='462'
+                cy='5'
+                r='138'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='50'
+              />
+              <circle
+                cx='49'
+                cy='470'
+                r='39'
+                stroke='white'
+                stroke-opacity='0.04'
+                stroke-width='20'
+              />
+              <path
+                d='M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z'
+                stroke='white'
+                stroke-opacity='0.06'
+                stroke-width='13'
+              />
+            </svg>
+          </span>
+        </div>
+      </section>
+      {/* <!-- ====== CTA Section End --> */}
     </>
+  )
 }

themes/starter/components/Contact.js

@@ -5,6 +5,7 @@ import { SVGLocation } from './svg/SVGLocation'
 
 /* eslint-disable react/no-unescaped-entities */
 export const Contact = () => {
+  const url = siteConfig('STARTER_CONTACT_MSG_EXTERNAL_URL')
   return (
     <>
       {/* <!-- ====== Contact Start ====== --> */}
@@ -18,10 +19,10 @@ export const Contact = () => {
               <div className='ud-contact-content-wrapper'>
                 <div className='ud-contact-title mb-12 lg:mb-[150px]'>
                   <span className='mb-6 block text-base font-medium text-dark dark:text-white'>
-                    {siteConfig('STARTER_CONTACT_TITLE', null, CONFIG)}
+                    {siteConfig('STARTER_CONTACT_TITLE')}
                   </span>
                   <h2 className='max-w-[260px] text-[35px] font-semibold leading-[1.14] text-dark dark:text-white'>
-                    {siteConfig('STARTER_CONTACT_TEXT', null, CONFIG)}
+                    {siteConfig('STARTER_CONTACT_TEXT')}
                   </h2>
                 </div>
                 <div className='mb-12 flex flex-wrap justify-between lg:mb-0'>
@@ -59,7 +60,7 @@ export const Contact = () => {
                         )}
                       </h5>
                       <p className='text-base text-body-color dark:text-dark-6'>
-                        {siteConfig('STARTER_CONTACT_EMAIL_TEXT', null, CONFIG)}
+                        {siteConfig('STARTER_CONTACT_EMAIL_TEXT')}
                       </p>
                     </div>
                   </div>
@@ -67,7 +68,7 @@ export const Contact = () => {
               </div>
             </div>
 
-            {siteConfig('STARTER_CONTACT_MSG_EXTERNAL_URL', null, CONFIG) && (
+            {url && url !== '' && (
               <>
                 {/* 联系方式右侧留言 */}
                 <div className='w-full px-4 lg:w-5/12 xl:w-4/12'>

themes/starter/components/FAQ.js

@@ -1,137 +1,120 @@
-import { siteConfig } from '@/lib/config';
+import { siteConfig } from '@/lib/config'
 import { useEffect } from 'react'
-import CONFIG from '../config';
-import { SVGQuestion } from './svg/SVGQuestion';
-import { SVGCircleBG } from './svg/SVGCircleBG';
+import { SVGCircleBG } from './svg/SVGCircleBG'
+import { SVGQuestion } from './svg/SVGQuestion'
 
 export const FAQ = () => {
   useEffect(() => {
     // ===== Faq accordion
-    const faqs = document.querySelectorAll('.single-faq');
-    faqs.forEach((el) => {
+    const faqs = document.querySelectorAll('.single-faq')
+    faqs.forEach(el => {
       el.querySelector('.faq-btn').addEventListener('click', () => {
-        el.querySelector('.icon').classList.toggle('rotate-180');
-        el.querySelector('.faq-content').classList.toggle('hidden');
-      });
-    });
+        el.querySelector('.icon').classList.toggle('rotate-180')
+        el.querySelector('.faq-content').classList.toggle('hidden')
+      })
+    })
   })
-  return <>
+  return (
+    <>
       {/* <!-- ====== FAQ Section Start --> */}
-      <section
-      className="relative z-20 overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]"
-    >
-      <div className="container mx-auto">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-[60px] max-w-[520px] text-center">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_FAQ_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]"
-              >
-                {siteConfig('STARTER_FAQ_TEXT_1', null, CONFIG)}
-              </h2>
-              <p
-                className="mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6"
-              >
-                {siteConfig('STARTER_FAQ_TEXT_2', null, CONFIG)}
-              </p>
+      <section className='relative z-20 overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]'>
+        <div className='container mx-auto'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-[60px] max-w-[520px] text-center'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_FAQ_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
+                  {siteConfig('STARTER_FAQ_TEXT_1')}
+                </h2>
+                <p className='mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_FAQ_TEXT_2')}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4 lg:w-1/2'>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_1_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_1_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
+              </div>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_2_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_2_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
+              </div>
+            </div>
+
+            <div className='w-full px-4 lg:w-1/2'>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_3_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_3_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
+              </div>
+              <div className='mb-12 flex lg:mb-[70px]'>
+                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
+                  <SVGQuestion />
+                </div>
+                <div className='w-full'>
+                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
+                    {siteConfig('STARTER_FAQ_4_QUESTION')}
+                  </h3>
+                  <p
+                    dangerouslySetInnerHTML={{
+                      __html: siteConfig('STARTER_FAQ_4_ANSWER')
+                    }}
+                    className='text-base text-body-color dark:text-dark-6'></p>
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4 lg:w-1/2">
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-                <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_1_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_1_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
-              </div>
-            </div>
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_2_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_2_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="w-full px-4 lg:w-1/2">
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_3_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_3_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
-              </div>
-            </div>
-            <div className="mb-12 flex lg:mb-[70px]">
-              <div
-                className="mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]"
-              >
-                <SVGQuestion/>
-              </div>
-              <div className="w-full">
-              <h3
-                  className="mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
-                >
-                 {siteConfig('STARTER_FAQ_4_QUESTION', null, CONFIG)}
-                </h3>
-                <p dangerouslySetInnerHTML={
-                    { __html: siteConfig('STARTER_FAQ_4_ANSWER', null, CONFIG) }
-                } className="text-base text-body-color dark:text-dark-6">
-                </p>
-              </div>
-            </div>
-          </div>
+        {/* 背景图案 */}
+        <div>
+          <span className='absolute left-4 top-4 -z-[1]'>
+            <SVGCircleBG />
+          </span>
+          <span className='absolute bottom-4 right-4 -z-[1]'>
+            <SVGCircleBG />
+          </span>
         </div>
-      </div>
-
-    {/* 背景图案 */}
-      <div>
-        <span className="absolute left-4 top-4 -z-[1]">
-          <SVGCircleBG/>
-        </span>
-        <span className="absolute bottom-4 right-4 -z-[1]">
-            <SVGCircleBG/>
-        </span>
-      </div>
-    </section>
-    {/* <!-- ====== FAQ Section End --> */}
+      </section>
+      {/* <!-- ====== FAQ Section End --> */}
     </>
+  )
 }

themes/starter/components/Features.js

@@ -1,135 +1,114 @@
-import CONFIG from '../config'
-import { siteConfig } from '@/lib/config';
-import { SVGGifts } from './svg/SVGGifts';
-import { SVGTemplate } from './svg/SVGTemplate';
-import { SVGDesign } from './svg/SVGDesign';
-import { SVGEssential } from './svg/SVGEssential';
+import { siteConfig } from '@/lib/config'
+import { SVGDesign } from './svg/SVGDesign'
+import { SVGEssential } from './svg/SVGEssential'
+import { SVGGifts } from './svg/SVGGifts'
+import { SVGTemplate } from './svg/SVGTemplate'
 /**
  * 产品特性相关，将显示在首页中
  * @returns
  */
 export const Features = () => {
-  return <>
-     {/* <!-- ====== Features Section Start --> */}
-     <section className="pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]">
-      <div className="container">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_FEATURE_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {siteConfig('STARTER_FEATURE_TEXT_1', null, CONFIG)}
-              </h2>
-              <p className="text-base text-body-color dark:text-dark-6">
-                {siteConfig('STARTER_FEATURE_TEXT_2', null, CONFIG)}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Features Section Start --> */}
+      <section className='pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]'>
+        <div className='container'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_FEATURE_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {siteConfig('STARTER_FEATURE_TEXT_1')}
+                </h2>
+                <p className='text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_FEATURE_TEXT_2')}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.1s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGGifts />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_1_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_1_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_1_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_1_BUTTON_TEXT')}
+                </a>
+              </div>
+            </div>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.15s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGTemplate />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_2_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_2_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_2_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_2_BUTTON_TEXT')}
+                </a>
+              </div>
+            </div>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.2s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGDesign />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_3_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_3_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_3_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT')}
+                </a>
+              </div>
+            </div>
+            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
+              <div className='wow fadeInUp group mb-12' data-wow-delay='.25s'>
+                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
+                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
+                  <SVGEssential />
+                </div>
+                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
+                  {siteConfig('STARTER_FEATURE_4_TITLE_1')}
+                </h4>
+                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+                  {siteConfig('STARTER_FEATURE_4_TEXT_1')}
+                </p>
+                <a
+                  href={siteConfig('STARTER_FEATURE_4_BUTTON_URL')}
+                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
+                  {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT')}
+                </a>
+              </div>
             </div>
           </div>
         </div>
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".1s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGGifts/>
-              </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-                {siteConfig('STARTER_FEATURE_1_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-                {siteConfig('STARTER_FEATURE_1_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_1_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_1_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".15s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGTemplate/>
-              </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-              {siteConfig('STARTER_FEATURE_2_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_2_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_2_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_2_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".2s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGDesign/>
-              </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-                {siteConfig('STARTER_FEATURE_3_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_3_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_3_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-          <div className="w-full px-4 md:w-1/2 lg:w-1/4">
-            <div className="wow fadeInUp group mb-12" data-wow-delay=".25s">
-              <div
-                className="relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary"
-              >
-                <span
-                  className="absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45"
-                ></span>
-                <SVGEssential/>
-              </div>
-              <h4 className="mb-3 text-xl font-bold text-dark dark:text-white">
-              {siteConfig('STARTER_FEATURE_4_TITLE_1', null, CONFIG)}
-              </h4>
-              <p className="mb-8 text-body-color dark:text-dark-6 lg:mb-9">
-              {siteConfig('STARTER_FEATURE_4_TEXT_1', null, CONFIG)}
-              </p>
-              <a
-                href={siteConfig('STARTER_FEATURE_4_BUTTON_URL', null, CONFIG)}
-                className="text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary"
-              >
-                {siteConfig('STARTER_FEATURE_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    {/* <!-- ====== Features Section End --> */}
+      </section>
+      {/* <!-- ====== Features Section End --> */}
     </>
+  )
 }

themes/starter/components/Footer.js

@@ -1,17 +1,12 @@
 import { siteConfig } from '@/lib/config'
 import SocialButton from '@/themes/fukasawa/components/SocialButton'
-import CONFIG from '../config'
 import { Logo } from './Logo'
 import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG'
 
 /* eslint-disable @next/next/no-img-element */
 export const Footer = props => {
   const latestPosts = props?.latestPosts ? props?.latestPosts.slice(0, 2) : []
-  const STARTER_FOOTER_LINK_GROUP = siteConfig(
-    'STARTER_FOOTER_LINK_GROUP',
-    [],
-    CONFIG
-  )
+  const STARTER_FOOTER_LINK_GROUP = siteConfig('STARTER_FOOTER_LINK_GROUP')
   return (
     <>
       {/* <!-- ====== Footer Section Start --> */}
@@ -26,7 +21,7 @@ export const Footer = props => {
                   <Logo white={true} />
                 </a>
                 <p className='mb-8 max-w-[270px] text-base text-gray-7'>
-                  {siteConfig('STARTER_FOOTER_SLOGAN', null, CONFIG)}
+                  {siteConfig('STARTER_FOOTER_SLOGAN')}
                 </p>
                 <div className='-mx-3 flex items-center'>
                   <div className='mx-3'>
@@ -68,7 +63,7 @@ export const Footer = props => {
             <div className='w-full px-4 md:w-2/3 lg:w-6/12 xl:w-3/12'>
               <div className='mb-10 w-full'>
                 <h4 className='mb-9 text-lg font-semibold text-white'>
-                  {siteConfig('STARTER_FOOTER_BLOG_LATEST_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_FOOTER_BLOG_LATEST_TITLE')}
                 </h4>
                 {/* 展示两条最新博客文章 */}
                 <div className='flex flex-col gap-8'>
@@ -102,42 +97,24 @@ export const Footer = props => {
                 <div className='my-1'>
                   <div className='-mx-3 flex items-center justify-center md:justify-start'>
                     <a
-                      href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_POLICY_URL',
-                        null,
-                        CONFIG
-                      )}
+                      href={siteConfig('STARTER_FOOTER_PRIVACY_POLICY_URL')}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
-                      {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_POLICY_TEXT',
-                        null,
-                        CONFIG
-                      )}
+                      {siteConfig('STARTER_FOOTER_PRIVACY_POLICY_TEXT')}
                     </a>
                     <a
                       href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_URL',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_URL'
                       )}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
-                      {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT',
-                        null,
-                        CONFIG
-                      )}
+                      {siteConfig('STARTER_FOOTER_PRIVACY_LEGAL_NOTICE_TEXT')}
                     </a>
                     <a
                       href={siteConfig(
-                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_URL'
                       )}
                       className='px-3 text-base text-gray-7 hover:text-white hover:underline'>
                       {siteConfig(
-                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT',
-                        null,
-                        CONFIG
+                        'STARTER_FOOTER_PRIVACY_TERMS_OF_SERVICE_TEXT'
                       )}
                     </a>
                   </div>

themes/starter/components/Hero.js

@@ -1,96 +1,90 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 /**
  * 英雄大图区块
  */
 export const Hero = () => {
-  return <>
-     {/* <!-- ====== Hero Section Start --> */}
-     <div
-      id="home"
-      className="relative overflow-hidden bg-primary pt-[120px] md:pt-[130px] lg:pt-[160px]"
-    >
-      <div className="container">
-        <div className="-mx-4 flex flex-wrap items-center">
-          <div className="w-full px-4">
-            <div
-              className="hero-content wow fadeInUp mx-auto max-w-[780px] text-center"
-              data-wow-delay=".2s"
-            >
-              {/* 主标题 */}
-              <h1
-                className="mb-6 text-3xl font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]"
-              >
-                {siteConfig('STARTER_HERO_TITLE_1', null, CONFIG)}
-              </h1>
-              {/* 次标题 */}
-              <p
-                className="mx-auto mb-9 max-w-[600px] text-base font-medium text-white sm:text-lg sm:leading-[1.44]"
-              >
-                {siteConfig('STARTER_HERO_TITLE_2', null, CONFIG)}
-              </p>
-              {/* 按钮组 */}
-              <ul
-                className="mb-10 flex flex-wrap items-center justify-center gap-5"
-              >
-                {siteConfig('STARTER_HERO_BUTTON_1_TEXT', null, CONFIG) &&
-                <li>
-                  <a
-                    href={siteConfig('STARTER_HERO_BUTTON_1_URL', null, CONFIG)}
-                    className="inline-flex items-center justify-center rounded-md bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2 hover:text-body-color"
-                  >
-                     {siteConfig('STARTER_HERO_BUTTON_1_TEXT', null, CONFIG)}
-                  </a>
-                </li>
-                }
-                {siteConfig('STARTER_HERO_BUTTON_2_TEXT', null, CONFIG) &&
-                <li>
-                  <a
-                    href={siteConfig('STARTER_HERO_BUTTON_2_URL', null, CONFIG)}
-                    target="_blank"
-                    className="flex items-center rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark" rel="noreferrer"
-                  >
-                    {siteConfig('STARTER_HERO_BUTTON_2_ICON', null, CONFIG) && <img className='mr-4' src={siteConfig('STARTER_HERO_BUTTON_2_ICON', null, CONFIG)}/>}
-                    {siteConfig('STARTER_HERO_BUTTON_2_TEXT', null, CONFIG)}
-                  </a>
-                </li>
-                }
-              </ul>
-
-            </div>
-          </div>
-
-          {/* 产品预览图片 */}
-          { siteConfig('STARTER_HERO_PREVIEW_IMAGE', null, CONFIG) && <div className="w-full px-4">
-            <div
-              className="wow fadeInUp relative z-10 mx-auto max-w-[845px]"
-              data-wow-delay=".25s"
-            >
-
-              <div className="mt-16">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={siteConfig('STARTER_HERO_PREVIEW_IMAGE', null, CONFIG)}
-                  alt="hero"
-                  className="mx-auto max-w-full rounded-t-xl rounded-tr-xl"
-                />
-              </div>
-
-              {/* 背景图 */}
-              <div className="absolute -left-9 bottom-0 z-[-1]">
-                <img src='/images/starter/bg-hero-circle.svg'/>
-              </div>
-              <div className="absolute -right-6 -top-6 z-[-1]">
-              <img src='/images/starter/bg-hero-circle.svg'/>
+  return (
+    <>
+      {/* <!-- ====== Hero Section Start --> */}
+      <div
+        id='home'
+        className='relative overflow-hidden bg-primary pt-[120px] md:pt-[130px] lg:pt-[160px]'>
+        <div className='container'>
+          <div className='-mx-4 flex flex-wrap items-center'>
+            <div className='w-full px-4'>
+              <div
+                className='hero-content wow fadeInUp mx-auto max-w-[780px] text-center'
+                data-wow-delay='.2s'>
+                {/* 主标题 */}
+                <h1 className='mb-6 text-3xl font-bold leading-snug text-white sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]'>
+                  {siteConfig('STARTER_HERO_TITLE_1')}
+                </h1>
+                {/* 次标题 */}
+                <p className='mx-auto mb-9 max-w-[600px] text-base font-medium text-white sm:text-lg sm:leading-[1.44]'>
+                  {siteConfig('STARTER_HERO_TITLE_2')}
+                </p>
+                {/* 按钮组 */}
+                <ul className='mb-10 flex flex-wrap items-center justify-center gap-5'>
+                  {siteConfig('STARTER_HERO_BUTTON_1_TEXT') && (
+                    <li>
+                      <a
+                        href={siteConfig('STARTER_HERO_BUTTON_1_URL')}
+                        className='inline-flex items-center justify-center rounded-md bg-white px-7 py-[14px] text-center text-base font-medium text-dark shadow-1 transition duration-300 ease-in-out hover:bg-gray-2 hover:text-body-color'>
+                        {siteConfig('STARTER_HERO_BUTTON_1_TEXT')}
+                      </a>
+                    </li>
+                  )}
+                  {siteConfig('STARTER_HERO_BUTTON_2_TEXT') && (
+                    <li>
+                      <a
+                        href={siteConfig('STARTER_HERO_BUTTON_2_URL')}
+                        target='_blank'
+                        className='flex items-center rounded-md bg-white/[0.12] px-6 py-[14px] text-base font-medium text-white transition duration-300 ease-in-out hover:bg-white hover:text-dark'
+                        rel='noreferrer'>
+                        {siteConfig('STARTER_HERO_BUTTON_2_ICON') && (
+                          <img
+                            className='mr-4'
+                            src={siteConfig('STARTER_HERO_BUTTON_2_ICON')}
+                          />
+                        )}
+                        {siteConfig('STARTER_HERO_BUTTON_2_TEXT')}
+                      </a>
+                    </li>
+                  )}
+                </ul>
               </div>
             </div>
-          </div>
-           }
 
+            {/* 产品预览图片 */}
+            {siteConfig('STARTER_HERO_PREVIEW_IMAGE') && (
+              <div className='w-full px-4'>
+                <div
+                  className='wow fadeInUp relative z-10 mx-auto max-w-[845px]'
+                  data-wow-delay='.25s'>
+                  <div className='mt-16'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={siteConfig('STARTER_HERO_PREVIEW_IMAGE')}
+                      alt='hero'
+                      className='mx-auto max-w-full rounded-t-xl rounded-tr-xl'
+                    />
+                  </div>
+
+                  {/* 背景图 */}
+                  <div className='absolute -left-9 bottom-0 z-[-1]'>
+                    <img src='/images/starter/bg-hero-circle.svg' />
+                  </div>
+                  <div className='absolute -right-6 -top-6 z-[-1]'>
+                    <img src='/images/starter/bg-hero-circle.svg' />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-    {/* <!-- ====== Hero Section End --> */}
+      {/* <!-- ====== Hero Section End --> */}
     </>
+  )
 }

themes/starter/components/Logo.js

@@ -5,7 +5,6 @@ import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import CONFIG from '../config'
 
 /**
  * 站点图标
@@ -14,7 +13,7 @@ import CONFIG from '../config'
 export const Logo = ({ white }) => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
-  const logoWhite = siteConfig('STARTER_LOGO_WHITE', null, CONFIG)
+  const logoWhite = siteConfig('STARTER_LOGO_WHITE')
   const [logo, setLogo] = useState(logoWhite)
   const [logoTextColor, setLogoTextColor] = useState('text-white')
 
@@ -26,10 +25,10 @@ export const Logo = ({ white }) => {
       // 何时显示浅色或白底的logo
       const homePageNavBar = router.route === '/' && scrollY < 10 // 在首页并且视窗在页面顶部
       if (white || isDarkMode || homePageNavBar) {
-        setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG))
+        setLogo(siteConfig('STARTER_LOGO_WHITE'))
         setLogoTextColor('text-white')
       } else {
-        setLogo(siteConfig('STARTER_LOGO', null, CONFIG))
+        setLogo(siteConfig('STARTER_LOGO'))
         setLogoTextColor('text-black')
       }
     }, throttleMs)

themes/starter/components/MenuItem.js

@@ -1,6 +1,10 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
+/**
+ * 菜单链接
+ * @param {*} param0
+ * @returns
+ */
 export const MenuItem = ({ link }) => {
   const hasSubMenu = link?.subMenus?.length > 0
   const router = useRouter()

themes/starter/components/MenuList.js

@@ -1,7 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'
-import CONFIG from '../config'
 import { MenuItem } from './MenuItem'
 /**
  * 响应式 折叠菜单
@@ -15,25 +14,25 @@ export const MenuList = props => {
       icon: 'fas fa-archive',
       name: locale.NAV.ARCHIVE,
       href: '/archive',
-      show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG)
+      show: siteConfig('HEO_MENU_ARCHIVE')
     },
     {
       icon: 'fas fa-search',
       name: locale.NAV.SEARCH,
       href: '/search',
-      show: siteConfig('HEO_MENU_SEARCH', null, CONFIG)
+      show: siteConfig('HEO_MENU_SEARCH')
     },
     {
       icon: 'fas fa-folder',
       name: locale.COMMON.CATEGORY,
       href: '/category',
-      show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG)
+      show: siteConfig('HEO_MENU_CATEGORY')
     },
     {
       icon: 'fas fa-tag',
       name: locale.COMMON.TAGS,
       href: '/tag',
-      show: siteConfig('HEO_MENU_TAG', null, CONFIG)
+      show: siteConfig('HEO_MENU_TAG')
     }
   ]
 

themes/starter/components/MessageForm.js

@@ -1,5 +1,4 @@
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 import { useRef, useState } from 'react'
 
 /**
@@ -16,7 +15,7 @@ export const MessageForm = () => {
     message: ''
   })
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     const { name, value } = e.target
     setFormData(prevState => ({
       ...prevState,
@@ -44,89 +43,90 @@ export const MessageForm = () => {
   //     }
   //   }, [submitComments])
 
-  return <>
-                <h3
-                className="mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]"
-              >
-                {siteConfig('STARTER_CONTACT_MSG_TITLE', null, CONFIG)}
-              </h3>
-              <form ref={formRef}>
-    <div className="mb-[22px]">
-      <label
-        // for="fullName"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_NAME', null, CONFIG)}*
-      </label>
-      <input
-        disabled={success}
-        type="text"
-        name="fullName"
-        value={formData.fullName}
-        onChange={handleChange}
-        placeholder="Adam Gelius"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[22px]">
-      <label
-        // for="email"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_EMAIL', null, CONFIG)}*
-      </label >
-      <input
-        disabled={success}
-        type="email"
-        name="email"
-        value={formData.email}
-        onChange={handleChange}
-        placeholder="example@yourmail.com"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[22px]">
-        <label
-        // for="phone"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_PHONE', null, CONFIG)}*
-        </label >
-      <input
-        disabled={success}
-        type="text"
-        name="phone"
-        value={formData.phone}
-        onChange={handleChange}
-        placeholder="+885 1254 5211 552"
-        className="w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      />
-    </div>
-    <div className="mb-[30px]">
-      <label
-        // for="message"
-        className="mb-4 block text-sm text-body-color dark:text-dark-6">
-        {siteConfig('STARTER_CONTACT_MSG_TEXT', null, CONFIG)}*
-        </label >
-      <textarea
-        disabled={success}
-        name="message"
-        value={formData.message}
-        onChange={handleChange}
-        rows="1"
-        placeholder="type your message here"
-        className="w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6"
-      ></textarea>
-    </div>
-    <div className="mb-0">
-      <button
-        disabled={success}
-        type="submit"
-        className="inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark"
-      >
-        {siteConfig('STARTER_CONTACT_MSG_SEND', null, CONFIG)}
-      </button>
-        {/* Success message */}
-        {success && <p className="mt-2 text-green-600 text-sm">{siteConfig('STARTER_CONTACT_MSG_THANKS', null, CONFIG)}</p>}
-
-    </div>
-  </form>
-              </>
+  return (
+    <>
+      <h3 className='mb-8 text-2xl font-semibold text-dark dark:text-white md:text-[28px] md:leading-[1.42]'>
+        {siteConfig('STARTER_CONTACT_MSG_TITLE')}
+      </h3>
+      <form ref={formRef}>
+        <div className='mb-[22px]'>
+          <label
+            // for="fullName"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_NAME')}*
+          </label>
+          <input
+            disabled={success}
+            type='text'
+            name='fullName'
+            value={formData.fullName}
+            onChange={handleChange}
+            placeholder='Adam Gelius'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[22px]'>
+          <label
+            // for="email"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_EMAIL')}*
+          </label>
+          <input
+            disabled={success}
+            type='email'
+            name='email'
+            value={formData.email}
+            onChange={handleChange}
+            placeholder='example@yourmail.com'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[22px]'>
+          <label
+            // for="phone"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_PHONE')}*
+          </label>
+          <input
+            disabled={success}
+            type='text'
+            name='phone'
+            value={formData.phone}
+            onChange={handleChange}
+            placeholder='+885 1254 5211 552'
+            className='w-full border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'
+          />
+        </div>
+        <div className='mb-[30px]'>
+          <label
+            // for="message"
+            className='mb-4 block text-sm text-body-color dark:text-dark-6'>
+            {siteConfig('STARTER_CONTACT_MSG_TEXT')}*
+          </label>
+          <textarea
+            disabled={success}
+            name='message'
+            value={formData.message}
+            onChange={handleChange}
+            rows='1'
+            placeholder='type your message here'
+            className='w-full resize-none border-0 border-b border-[#f1f1f1] bg-transparent pb-3 text-body-color placeholder:text-body-color/60 focus:border-primary focus:outline-none dark:border-dark-3 dark:text-dark-6'></textarea>
+        </div>
+        <div className='mb-0'>
+          <button
+            disabled={success}
+            type='submit'
+            className='inline-flex items-center justify-center rounded-md bg-primary px-10 py-3 text-base font-medium text-white transition duration-300 ease-in-out hover:bg-blue-dark'>
+            {siteConfig('STARTER_CONTACT_MSG_SEND')}
+          </button>
+          {/* Success message */}
+          {success && (
+            <p className='mt-2 text-green-600 text-sm'>
+              {siteConfig('STARTER_CONTACT_MSG_THANKS')}
+            </p>
+          )}
+        </div>
+      </form>
+    </>
+  )
 }

themes/starter/components/NavBar.js

@@ -1,11 +1,9 @@
 /* eslint-disable no-unreachable */
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
-import CONFIG from '../config'
 import { DarkModeButton } from './DarkModeButton'
 import { Logo } from './Logo'
 import { MenuList } from './MenuList'
@@ -62,45 +60,21 @@ export const NavBar = props => {
               <MenuList {...props} />
 
               {/* 右侧功能 */}
-              <div className='flex items-center justify-end pr-16 lg:pr-0 space-x-4'>
+              <div className='flex items-center justify-end pr-16 lg:pr-0'>
                 {/* 深色模式切换 */}
                 <DarkModeButton />
-
                 {/* 注册登录功能 */}
                 <div className='hidden sm:flex'>
-                  <SignedOut>
-                    {/* <a
-                      href={siteConfig(
-                        'STARTER_NAV_BUTTON_1_URL',
-                        null,
-                        CONFIG
-                      )}
-                      className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
-                      {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
-                    </a> */}
-
-                    <SignInButton mode='modal'>
-                      <button
-                        className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
-                        {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
-                      </button>
-                    </SignInButton>
-
-                    {/* <button
-                        className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
-                        {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
-                      </button> */}
-                  </SignedOut>
-
-                  <SignedIn>
-                    <UserButton />
-                  </SignedIn>
-
-                  {/* <a
-                    href={siteConfig('STARTER_NAV_BUTTON_2_URL', null, CONFIG)}
+                  <a
+                    href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                    className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
+                    {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                  </a>
+                  <a
+                    href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
                     className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
-                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)}
-                  </a> */}
+                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                  </a>
                 </div>
               </div>
             </div>

themes/starter/components/Pricing.js

@@ -1,178 +1,177 @@
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 
 /**
  * 价格板块
  * @returns
  */
 export const Pricing = () => {
-  return <>
-       {/* <!-- ====== Pricing Section Start --> */}
-       <section
-      id="pricing"
-      className="relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]"
-    >
-      <div className="container mx-auto">
-        <div className="-mx-4 flex flex-wrap">
-          <div className="w-full px-4">
-            <div className="mx-auto mb-[60px] max-w-[510px] text-center">
-              <span className="mb-2 block text-lg font-semibold text-primary">
-                {siteConfig('STARTER_PRICING_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
-              >
-                {siteConfig('STARTER_PRICING_TEXT_1', null, CONFIG)}
-              </h2>
-              <p className="text-base text-body-color dark:text-dark-6">
-              {siteConfig('STARTER_PRICING_TEXT_2', null, CONFIG)}
-              </p>
+  return (
+    <>
+      {/* <!-- ====== Pricing Section Start --> */}
+      <section
+        id='pricing'
+        className='relative z-20 overflow-hidden bg-white pb-12 pt-20 dark:bg-dark lg:pb-[90px] lg:pt-[120px]'>
+        <div className='container mx-auto'>
+          <div className='-mx-4 flex flex-wrap'>
+            <div className='w-full px-4'>
+              <div className='mx-auto mb-[60px] max-w-[510px] text-center'>
+                <span className='mb-2 block text-lg font-semibold text-primary'>
+                  {siteConfig('STARTER_PRICING_TITLE')}
+                </span>
+                <h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                  {siteConfig('STARTER_PRICING_TEXT_1')}
+                </h2>
+                <p className='text-base text-body-color dark:text-dark-6'>
+                  {siteConfig('STARTER_PRICING_TEXT_2')}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className='-mx-4 flex flex-wrap justify-center'>
+            {/* 第一个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_1_TITLE')}
+                </span>
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_1_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_1_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_1_PRICE_PERIOD')}
+                  </span>
+                </h2>
+
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_1_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_1_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
+                </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_1_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_1_BUTTON_TEXT')}
+                </a>
+              </div>
+            </div>
+
+            {/* 第二个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <p
+                  style={{
+                    writingMode: 'vertical-rl',
+                    textOrientation: 'mixed'
+                  }}
+                  className='absolute p-1 right-0 top-0 inline-block rounded-bl-md rounded-tl-md bg-primary text-base font-medium text-white tracking-wider'>
+                  {siteConfig('STARTER_PRICING_2_TAG')}
+                </p>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_2_TITLE')}
+                </span>
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_2_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_2_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_2_PRICE_PERIOD')}
+                  </span>
+                </h2>
+
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_2_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_2_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
+                </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_2_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_2_BUTTON_TEXT')}
+                </a>
+              </div>
+            </div>
+
+            {/* 第三个付费计划 */}
+            <div className='w-full px-4 md:w-1/2 lg:w-1/3'>
+              <div className='relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14'>
+                <span className='mb-5 block text-xl font-medium text-dark dark:text-white'>
+                  {siteConfig('STARTER_PRICING_3_TITLE')}
+                </span>
+                <h2 className='space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]'>
+                  <span className='text-xl font-medium'>
+                    {siteConfig('STARTER_PRICING_3_PRICE_CURRENCY')}
+                  </span>
+                  <span className='-ml-1 -tracking-[2px]'>
+                    {siteConfig('STARTER_PRICING_3_PRICE')}
+                  </span>
+                  <span className='text-base font-normal text-body-color dark:text-dark-6'>
+                    {siteConfig('STARTER_PRICING_3_PRICE_PERIOD')}
+                  </span>
+                </h2>
+
+                <div className='mb-[50px]'>
+                  <h5 className='mb-5 text-lg font-medium text-dark dark:text-white'>
+                    {siteConfig('STARTER_PRICING_3_HEADER')}
+                  </h5>
+                  <div className='flex flex-col gap-[14px]'>
+                    {siteConfig('STARTER_PRICING_3_FEATURES')
+                      ?.split(',')
+                      .map((feature, index) => {
+                        return (
+                          <p
+                            key={index}
+                            className='text-base text-body-color dark:text-dark-6'>
+                            {feature}
+                          </p>
+                        )
+                      })}
+                  </div>
+                </div>
+                <a
+                  href={siteConfig('STARTER_PRICING_3_BUTTON_URL')}
+                  className='inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark'>
+                  {siteConfig('STARTER_PRICING_3_BUTTON_TEXT')}
+                </a>
+              </div>
             </div>
           </div>
         </div>
-
-        <div className="-mx-4 flex flex-wrap justify-center">
-
-          {/* 第一个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_1_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_1_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_1_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_1_PRICE_PERIOD', null, CONFIG)}
-                </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_1_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_1_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
-
-                </div>
-              </div>
-              <a
-                href={siteConfig('STARTER_PRICING_1_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_1_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-
-          {/* 第二个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <p style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
-                className="absolute p-1 right-0 top-0 inline-block rounded-bl-md rounded-tl-md bg-primary text-base font-medium text-white tracking-wider"
-              >
-                {siteConfig('STARTER_PRICING_2_TAG', null, CONFIG)}
-              </p>
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_2_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_2_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_2_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_2_PRICE_PERIOD', null, CONFIG)}
-                </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_2_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_2_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
-
-                </div>
-              </div>
-              <a
-                href={siteConfig('STARTER_PRICING_2_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_2_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-
-          {/* 第三个付费计划 */}
-          <div className="w-full px-4 md:w-1/2 lg:w-1/3">
-            <div
-              className="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
-            >
-              <span
-                className="mb-5 block text-xl font-medium text-dark dark:text-white"
-              >
-                {siteConfig('STARTER_PRICING_3_TITLE', null, CONFIG)}
-              </span>
-              <h2
-                className="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
-              >
-                <span className="text-xl font-medium">{siteConfig('STARTER_PRICING_3_PRICE_CURRENCY', null, CONFIG)}</span>
-                <span className="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_3_PRICE', null, CONFIG)}</span>
-                <span
-                  className="text-base font-normal text-body-color dark:text-dark-6"
-                >
-                 {siteConfig('STARTER_PRICING_3_PRICE_PERIOD', null, CONFIG)}
-                </span>
-              </h2>
-
-              <div className="mb-[50px]">
-                <h5 className="mb-5 text-lg font-medium text-dark dark:text-white">
-                  {siteConfig('STARTER_PRICING_3_HEADER', null, CONFIG)}
-                </h5>
-                <div className="flex flex-col gap-[14px]">
-                  {siteConfig('STARTER_PRICING_3_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
-                    return <p key={index} className="text-base text-body-color dark:text-dark-6">
-                    {feature}
-                  </p>
-                  })}
-
-                </div>
-              </div>
-              <a
-                href={siteConfig('STARTER_PRICING_3_BUTTON_URL', null, CONFIG)}
-                className="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
-              >
-                {siteConfig('STARTER_PRICING_3_BUTTON_TEXT', null, CONFIG)}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    {/* <!-- ====== Pricing Section End --> */}
-
-</>
+      </section>
+      {/* <!-- ====== Pricing Section End --> */}
+    </>
+  )
 }

themes/starter/components/Team.js

@@ -1,9 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
-import CONFIG from '../config'
 import { SVGAvatarBG } from './svg/SVGAvatarBG'
 
 export const Team = () => {
+  const STARTER_TEAM_ITEMS = siteConfig('STARTER_TEAM_ITEMS')
   return (
     <>
       {/* <!-- ====== Team Section Start --> */}
@@ -15,14 +15,14 @@ export const Team = () => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_TEAM_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_TEAM_TITLE')}
                 </span>
                 <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                  {siteConfig('STARTER_TEAM_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_TEAM_TEXT_1')}
                 </h2>
                 <p
                   dangerouslySetInnerHTML={{
-                    __html: siteConfig('STARTER_TEAM_TEXT_2', null, CONFIG)
+                    __html: siteConfig('STARTER_TEAM_TEXT_2')
                   }}
                   className='text-base text-body-color dark:text-dark-6'></p>
               </div>
@@ -31,7 +31,7 @@ export const Team = () => {
 
           {/* 团队成员排列矩阵 */}
           <div className='-mx-4 flex flex-wrap justify-center'>
-            {CONFIG.STARTER_TEAM_ITEMS.map((item, index) => {
+            {STARTER_TEAM_ITEMS?.map((item, index) => {
               return (
                 <div
                   key={index}

themes/starter/components/Testimonials.js

@@ -4,7 +4,6 @@
 import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
 import { useEffect } from 'react'
-import CONFIG from '../config'
 import { SVGLeftArrow } from './svg/SVGLeftArrow'
 import { SVGRightArrow } from './svg/SVGRightArrow'
 
@@ -60,11 +59,7 @@ export const Testimonials = () => {
   }, [])
   // 用户评分
   const ratings = [1, 2, 3, 4, 5]
-  const STARTER_TESTIMONIALS_ITEMS = siteConfig(
-    'STARTER_TESTIMONIALS_ITEMS',
-    [],
-    CONFIG
-  )
+  const STARTER_TESTIMONIALS_ITEMS = siteConfig('STARTER_TESTIMONIALS_ITEMS')
   return (
     <>
       {/* <!-- ====== Testimonial Section Start --> */}
@@ -76,13 +71,13 @@ export const Testimonials = () => {
             <div className='w-full px-4'>
               <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
                 <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('STARTER_TESTIMONIALS_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TITLE')}
                 </span>
                 <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                  {siteConfig('STARTER_TESTIMONIALS_TEXT_1', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TEXT_1')}
                 </h2>
                 <p className='text-base text-body-color dark:text-dark-6'>
-                  {siteConfig('STARTER_TESTIMONIALS_TEXT_2', null, CONFIG)}
+                  {siteConfig('STARTER_TESTIMONIALS_TEXT_2')}
                 </p>
               </div>
             </div>
@@ -101,11 +96,7 @@ export const Testimonials = () => {
                             <img
                               key={index}
                               alt='star icon' // 为每个图片设置唯一的 key 属性
-                              src={siteConfig(
-                                'STARTER_TESTIMONIALS_STAR_ICON',
-                                null,
-                                CONFIG
-                              )}
+                              src={siteConfig('STARTER_TESTIMONIALS_STAR_ICON')}
                             />
                           ))}
                         </div>

themes/starter/config.js

@@ -358,6 +358,17 @@ const CONFIG = {
   STARTER_404_TEXT: '抱歉！您要查找的页面不存在。可能已经移动或删除。',
   STARTER_404_BACK: '回到主页',
 
+  // 页面底部的行动呼吁模块
+  STARTER_CTA_ENABLE: true,
+  STARTER_CTA_TITLE: '你还在等待什么呢？',
+  STARTER_CTA_TITLE_2: '现在开始吧',
+  STARTER_CTA_DESCRIOTN:
+    '访问NotionNext的操作文档，我们提供了详细的教程，帮助你即刻搭建站点',
+  STARTER_CTA_BUTTON: true, // 是否显示按钮
+  STARTER_CTA_BUTTON_URL:
+    'https://docs.tangly1024.com/article/vercel-deploy-notion-next',
+  STARTER_CTA_BUTTON_TEXT: '开始体验',
+
   STARTER_POST_REDIRECT_ENABLE: true, // 默認開啟重定向
   STARTER_POST_REDIRECT_URL: 'https://blog.tangly1024.com', // 重定向域名
   STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp

themes/starter/index.js

@@ -31,13 +31,11 @@ import { Testimonials } from './components/Testimonials'
 import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
-import BLOG from '@/blog.config'
 import { loadWowJS } from '@/lib/plugins/wow'
-import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
+import { CTA } from './components/CTA'
 import { SignInForm } from './components/SignInForm'
-import { SignUpForm } from './components/SignUpForm'
 import { SVG404 } from './components/svg/SVG404'
 /**
  * 布局框架
@@ -58,7 +56,7 @@ const LayoutBase = props => {
   return (
     <div
       id='theme-starter'
-      className={`${siteConfig('FONT_STYLE', BLOG.FONT_STYLE, props.NOTION_CONFIG)} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
+      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
       <Style />
       <NavBar {...props} />
 
@@ -84,29 +82,26 @@ const LayoutIndex = props => {
   return (
     <>
       {/* 英雄区 */}
-      {siteConfig('STARTER_HERO_ENABLE', null, CONFIG) && <Hero />}
+      {siteConfig('STARTER_HERO_ENABLE') && <Hero />}
       {/* 产品特性 */}
-      {siteConfig('STARTER_FEATURE_ENABLE', null, CONFIG) && <Features />}
+      {siteConfig('STARTER_FEATURE_ENABLE') && <Features />}
       {/* 关于 */}
-      {siteConfig('STARTER_ABOUT_ENABLE', null, CONFIG) && <About />}
+      {siteConfig('STARTER_ABOUT_ENABLE') && <About />}
       {/* 价格 */}
-      {siteConfig('STARTER_PRICING_ENABLE', null, CONFIG) && <Pricing />}
+      {siteConfig('STARTER_PRICING_ENABLE') && <Pricing />}
       {/* 评价展示 */}
-      {siteConfig('STARTER_TESTIMONIALS_ENABLE', null, CONFIG) && (
-        <Testimonials />
-      )}
+      {siteConfig('STARTER_TESTIMONIALS_ENABLE') && <Testimonials />}
       {/* 常见问题 */}
-      {siteConfig('STARTER_FAQ_ENABLE', null, CONFIG) && <FAQ />}
+      {siteConfig('STARTER_FAQ_ENABLE') && <FAQ />}
       {/* 团队介绍 */}
-      {siteConfig('STARTER_TEAM_ENABLE', null, CONFIG) && <Team />}
+      {siteConfig('STARTER_TEAM_ENABLE') && <Team />}
       {/* 博文列表 */}
-      {siteConfig('STARTER_BLOG_ENABLE', null, CONFIG) && (
-        <Blog posts={posts} />
-      )}
+      {siteConfig('STARTER_BLOG_ENABLE') && <Blog posts={posts} />}
       {/* 联系方式 */}
-      {siteConfig('STARTER_CONTACT_ENABLE', null, CONFIG) && <Contact />}
+      {siteConfig('STARTER_CONTACT_ENABLE') && <Contact />}
       {/* 合作伙伴 */}
-      {siteConfig('STARTER_BRANDS_ENABLE', null, CONFIG) && <Brand />}
+      {siteConfig('STARTER_BRANDS_ENABLE') && <Brand />}
+      <CTA />
     </>
   )
 }
@@ -123,12 +118,12 @@ const LayoutSlug = props => {
   const router = useRouter()
   if (
     !post &&
-    siteConfig('STARTER_POST_REDIRECT_ENABLE', null, CONFIG) &&
+    siteConfig('STARTER_POST_REDIRECT_ENABLE') &&
     isBrowser &&
     router.route === '/[prefix]/[slug]'
   ) {
     const redirectUrl =
-      siteConfig('STARTER_POST_REDIRECT_URL', null, CONFIG) +
+      siteConfig('STARTER_POST_REDIRECT_URL') +
       router.asPath.replace('?theme=landing', '')
     router.push(redirectUrl)
     return (
@@ -195,15 +190,15 @@ const Layout404 = props => {
                   <SVG404 />
                 </div>
                 <h3 className='mb-5 text-2xl font-semibold text-dark dark:text-white'>
-                  {siteConfig('STARTER_404_TITLE', null, CONFIG)}
+                  {siteConfig('STARTER_404_TITLE')}
                 </h3>
                 <p className='mb-8 text-base text-body-color dark:text-dark-6'>
-                  {siteConfig('STARTER_404_TEXT', null, CONFIG)}
+                  {siteConfig('STARTER_404_TEXT')}
                 </p>
                 <Link
                   href='/'
                   className='py-3 text-base font-medium text-white transition rounded-md bg-dark px-7 hover:bg-primary'>
-                  {siteConfig('STARTER_404_BACK', null, CONFIG)}
+                  {siteConfig('STARTER_404_BACK')}
                 </Link>
               </div>
             </div>
@@ -225,23 +220,16 @@ const LayoutTagIndex = props => <></>
  * @returns
  */
 const LayoutSignIn = props => {
-  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  const title = siteConfig('STARTER_SIGNIN', '登录')
+  const description = siteConfig(
+    'STARTER_SIGNIN_DESCRITION',
+    '这里是演示页面，NotionNext目前不提供会员登录功能'
+  )
   return (
     <>
       <div className='grow mt-20'>
-        <Banner
-          title='登录'
-          description='这里是演示页面，NotionNext目前不提供会员登录功能'
-        />
-        {/* clerk预置表单 */}
-        {enableClerk && (
-          <div className='flex justify-center py-6'>
-            <SignIn />
-          </div>
-        )}
-
-        {/* 自定义登录表单 */}
-        {!enableClerk && <SignInForm />}
+        <Banner title={title} description={description} />
+        <SignInForm />
       </div>
     </>
   )
@@ -253,62 +241,33 @@ const LayoutSignIn = props => {
  * @returns
  */
 const LayoutSignUp = props => {
-  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  const title = siteConfig('STARTER_SIGNIN', '注册')
+  const description = siteConfig(
+    'STARTER_SIGNIN_DESCRITION',
+    '这里是演示页面，NotionNext目前不提供会员注册功能'
+  )
   return (
     <>
       <div className='grow mt-20'>
-        <Banner
-          title='注册'
-          description='这里是演示页面，NotionNext目前不提供会员注册功能'
-        />
-
-        {/* clerk预置表单 */}
-        {enableClerk && (
-          <div className='flex justify-center py-6'>
-            <SignUp />
-          </div>
-        )}
-
-        {/* 自定义登录表单 */}
-        {!enableClerk && <SignUpForm />}
+        <Banner title={title} description={description} />
+        <SignInForm />
       </div>
     </>
   )
 }
 
-/**
- * 授权页面
- * @param {*} props 
- * @returns 
- */
-const LayoutAuth =  props => {
-    const {msg,title} = props
-    return (
-      <>
-        <Banner title={title} description={msg} />
-        <div className='container grow'>
-          <div className='flex flex-wrap justify-center -mx-4'>
-            <div className='w-full p-4'>
-              <div id='container-inner' className='mx-auto'>
-                {/* {slot} */}
-              </div>
-            </div>
-          </div>
-        </div>
-      </>
-    )
-}
-
 export {
-    Layout404,
-    LayoutArchive, LayoutAuth, LayoutBase,
-    LayoutCategoryIndex,
-    LayoutIndex,
-    LayoutPostList,
-    LayoutSearch,
-    LayoutSignIn,
-    LayoutSignUp,
-    LayoutSlug, LayoutTagIndex,
-    CONFIG as THEME_CONFIG
+  Layout404,
+  LayoutArchive,
+  LayoutAuth,
+  LayoutBase,
+  LayoutCategoryIndex,
+  LayoutIndex,
+  LayoutPostList,
+  LayoutSearch,
+  LayoutSignIn,
+  LayoutSignUp,
+  LayoutSlug,
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
-