支持在NotionConfig中配置字体

2026-05-14 15:09:22 +00:00 · 2024-02-22 12:32:26 +08:00
parent a363caa13b
commit 8e041703b3
40 changed files with 51 additions and 52 deletions
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -28,7 +28,7 @@ class MyDocument extends Document {
                  })}
                </Head>

-                <body className={`${BLOG.FONT_STYLE} dark:bg-black scroll-smooth`}>
+                <body>
                    <Main />
                    <NextScript />
                </body>
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -28,7 +28,7 @@ export const ArticleLock = props => {
    passwordInputRef.current.focus()
  }, [])

-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  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'>
--- a/themes/example/components/ExampleRecentComments.js
+++ b/themes/example/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/example/index.js
+++ b/themes/example/index.js
@@ -62,7 +62,7 @@ const LayoutBase = props => {
  //   }, [onLoading])

  return (
-        <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
+        <div id='theme-example' className={`${siteConfig('FONT_STYLE')} dark:text-gray-300  bg-white dark:bg-black scroll-smooth`} >

            <Style/>

--- a/themes/fukasawa/components/ArticleLock.js
+++ b/themes/fukasawa/components/ArticleLock.js
@@ -31,7 +31,7 @@ const ArticleLock = props => {

  return (<div id='container' className="flex justify-center">
    <div className="shadow md:hover:shadow-2xl overflow-x-auto max-w-5xl  w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200 subpixel-antialiased">
-      <div className="w-full flex justify-center items-center h-96 font-sans">
+      <div className="w-full flex justify-center items-center h-96 ">
        <div className="text-center space-y-3 dark:text-gray-300 text-black">
          <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
          <div className="flex mx-4">
--- a/themes/fukasawa/components/Catalog.js
+++ b/themes/fukasawa/components/Catalog.js
@@ -63,7 +63,7 @@ const Catalog = ({ toc }) => {
  return <div id='catalog'>
    <div className='w-full dark:text-gray-300 mb-2'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
    <div className='h-96'>
-      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden font-sans text-black'>
+      <nav ref={tRef} className='h-full overflow-y-auto overscroll-none scroll-hidden  text-black'>
        {toc.map((tocItem) => {
          const id = uuidToId(tocItem.id)
          return (
--- a/themes/fukasawa/components/MenuList.js
+++ b/themes/fukasawa/components/MenuList.js
@@ -30,10 +30,10 @@ export const MenuList = (props) => {
  }

  return (<>
-        <menu id='nav-pc' className='hidden md:block font-sans text-sm z-10'>
+        <menu id='nav-pc' className='hidden md:block  text-sm z-10'>
            {links?.map((link, index) => <MenuItemDrop key={index} link={link} />)}
        </menu>
-        <menu id='nav-mobile' className='block md:hidden font-sans text-sm z-10 pb-1'>
+        <menu id='nav-mobile' className='block md:hidden  text-sm z-10 pb-1'>
            {links?.map((link, index) => <MenuItemCollapse key={index} link={link} onHeightChange={props.onHeightChange}/>)}
        </menu>
    </>
--- a/themes/fukasawa/components/SiteInfo.js
+++ b/themes/fukasawa/components/SiteInfo.js
@@ -8,7 +8,7 @@ function SiteInfo ({ title }) {

  return (
        <footer
-            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs font-sans'
+            className='relative leading-6 justify-start w-full text-gray-600 dark:text-gray-300 text-xs '
        >
            <span> © {`${copyrightDate}`} <span> <a href={siteConfig('LINK')}> <i className='mx-1 animate-pulse fas fa-heart'/> {siteConfig('AUTHOR')}</a>. <br /></span>

--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -50,7 +50,7 @@ const LayoutBase = (props) => {
  return (
        <ThemeGlobalFukasawa.Provider value={{}}>

-            <div id='theme-fukasawa'>
+            <div id='theme-fukasawa' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
                <Style/>

                <TopNav {...props} />
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -19,9 +19,8 @@ const NavPostItem = (props) => {

  if (group?.category) {
    return <>
-            <div
-                onClick={toggleOpenSubMenu}
-                className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
+            <div onClick={toggleOpenSubMenu}
+                className='select-none flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-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 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
            </div>
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -55,7 +55,7 @@ export default function TopNavBar(props) {
                <LogoBar {...props} />

                {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+                <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
                    <DarkModeButton className='flex text-md items-center h-full' />
                    <div onClick={toggleMenuOpen} className='cursor-pointer text-lg hover:scale-110 duration-150'>
                        {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -66,7 +66,7 @@ const LayoutBase = (props) => {
        <ThemeGlobalGitbook.Provider value={{ searchModal, tocVisible, changeTocVisible, filteredNavPages, setFilteredNavPages, allNavPages, pageNavVisible, changePageNavVisible }}>
            <Style/>

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

                {/* 顶部导航栏 */}
@@ -77,7 +77,7 @@ const LayoutBase = (props) => {
                    {/* 左侧推拉抽屉 */}
                    {fullWidth
                      ? null
-                      : (<div className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
+                      : (<div className={'hidden md:block border-r dark:border-transparent relative z-10 '}>
                        <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'>
                            {slotLeft}
                            <SearchInput className='my-3 rounded-md' />
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -16,13 +16,13 @@ export const MenuItemDrop = ({ link }) => {
            <Link
                target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
                href={link?.to}
-                className="font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest">
+                className=" hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest">
                {link?.icon && <i className={link?.icon} />} {link?.name}
            </Link>}

        {/* 含子菜单的按钮 */}
        {hasSubMenu && <>
-            <div className='cursor-pointer font-sans hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
+            <div className='cursor-pointer  hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
                {link?.icon && <i className={link?.icon} />} {link?.name}
            </div>
        </>}
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -83,7 +83,7 @@ const LayoutBase = props => {
  return (
    <div
      id="theme-heo"
-      className="bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col"
+      className={`${siteConfig('FONT_STYLE')} bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}
    >

      <Style />
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
        {!hasSubMenu &&
            <Link
                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
                {link?.icon && <i className={link?.icon}/>} {link?.name}
                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
            </Link>}

        {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                {link?.icon && <i className={link?.icon}/>} {link?.name}
                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
            </div>
--- a/themes/hexo/index.js
+++ b/themes/hexo/index.js
@@ -73,7 +73,7 @@ const LayoutBase = props => {

  return (
    <ThemeGlobalHexo.Provider value={{ searchModal }}>
-        <div id='theme-hexo'>
+        <div id='theme-hexo' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
            <Style/>

            {/* 顶部导航 */}
--- a/themes/landing/index.js
+++ b/themes/landing/index.js
@@ -32,7 +32,7 @@ import { Pricing } from './components/Pricing'
 const LayoutBase = (props) => {
  const { children } = props

-  return <div id='theme-landing' className="overflow-hidden flex flex-col justify-between bg-white dark:bg-black">
+  return <div id='theme-landing' className={`${siteConfig('FONT_STYLE')} scroll-smooth overflow-hidden flex flex-col justify-between bg-white dark:bg-black`}>

        {/* 顶部导航栏 */}
        <Header />
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
        {!hasSubMenu &&
            <Link
                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4  no-underline tracking-widest pb-1">
                {link?.icon && <i className={link?.icon} />} {link?.name}
                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
            </Link>}

        {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4  no-underline tracking-widest pb-1'>
                {link?.icon && <i className={link?.icon} />} {link?.name}
                <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i>
            </div>
--- a/themes/matery/index.js
+++ b/themes/matery/index.js
@@ -50,7 +50,7 @@ const LayoutBase = props => {
  const floatRightBottom = post ? <JumpToCommentButton /> : null

  return (
-        <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
+        <div id='theme-matery' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full scroll-smooth`}>

            <Style/>

--- a/themes/medium/index.js
+++ b/themes/medium/index.js
@@ -59,7 +59,7 @@ const LayoutBase = props => {
            {/* CSS样式 */}
            <Style />

-            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+            <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={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
                    {/* 桌面端左侧菜单 */}
--- a/themes/nav/components/BlogPostItem.js
+++ b/themes/nav/components/BlogPostItem.js
@@ -12,7 +12,7 @@ const BlogPostItem = (props) => {
  const { group } = props
  if (group?.category) {
    return <>
-            <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
+            <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between  text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>
                <h3><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />{group?.category}</h3>
            </div>
            <div id='posts-wrapper' className='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' >
@@ -23,7 +23,7 @@ const BlogPostItem = (props) => {
        </>
  } else {
    return <>
-            <div id='uncategory' className='category text-lg pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
+            <div id='uncategory' className='category text-lg pt-9 pb-4 first:pt-4 font-bold select-none flex justify-between  text-neutral-800 dark:text-neutral-400 p-2' key='uncategory'>
                <span><i className={`text-base mr-2 ${group?.icon ? group?.icon : 'fas fa-hashtag'}`} />未分类</span>
            </div>
            <div className='card-list grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'>
--- a/themes/nav/components/NavPostItem.js
+++ b/themes/nav/components/NavPostItem.js
@@ -23,7 +23,7 @@ const NavPostItem = (props) => {
    return <>
            <div
                onClick={toggleOpenSubMenu}
-                className='select-none flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
+                className='select-none flex justify-between text-sm  cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-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 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
            </div>
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -75,7 +75,7 @@ const LayoutBase = (props) => {
            <Style/>

            {/* 主题样式根基 */}
-            <div id='theme-onenav' className='dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
+            <div id='theme-onenav' className={`${siteConfig('FONT_STYLE')} dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300 scroll-smooth`}>

                {/* 端顶部导航栏 */}
                <TopNavBar {...props} />
@@ -84,7 +84,7 @@ const LayoutBase = (props) => {
                <main id='wrapper' className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' relative flex justify-between w-full h-screen mx-auto'}>

                    {/* 左侧推拉抽屉 */}
-                    <div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
+                    <div className={' hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>

                        {/* 图标Logo */}
                        <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
--- a/themes/next/components/ArticleLock.js
+++ b/themes/next/components/ArticleLock.js
@@ -31,7 +31,7 @@ export const ArticleLock = props => {

  return (
    <div id='article-wrapper' className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full  py-10 px-5 lg:pt-24 md:px-24 min-h-screen dark:border-gray-700 bg-white dark:bg-gray-800 duration-200">
-      <div className="w-full flex justify-center items-center h-96 font-sans">
+      <div className="w-full flex justify-center items-center h-96 ">
        <div className="text-center space-y-3 dark:text-gray-300 text-black">
          <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
          <div className="flex mx-4">
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -38,7 +38,7 @@ export const MenuList = (props) => {
                data-aos-delay="400"
                data-aos-once="true"
                data-aos-anchor-placement="top-bottom"
-                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 '>
                {links.map((link, index) => link && link.show && <MenuItemDrop key={index} link={link} />)}
            </menu>

--- a/themes/next/components/NextRecentComments.js
+++ b/themes/next/components/NextRecentComments.js
@@ -26,7 +26,7 @@ const NextRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-500 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-500  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/next/components/Progress.js
+++ b/themes/next/components/Progress.js
@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
  }, [])

  return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+    <div className="h-4 w-full shadow-2xl bg-gray-400 ">
      <div
        className="h-4 bg-gray-600 duration-200"
        style={{ width: `${percent}%` }}
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -30,10 +30,10 @@ const SideAreaLeft = props => {
            {/* 菜单 */}
            <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
                <Logo className='h-32' {...props} />
-                <div className='pt-2 px-2 font-sans'>
+                <div className='pt-2 px-2 '>
                    <MenuList allowCollapse={true} {...props} />
                </div>
-                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 font-sans'>
+                {siteConfig('NEXT_MENU_SEARCH', null, CONFIG) && <div className='px-2 pt-2 '>
                    <SearchInput {...props} />
                </div>}

--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -63,7 +63,7 @@ const Toc = ({ toc }) => {
      <Progress />
    </div>
    <div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
-      <nav className='h-full font-sans text-black dark:text-gray-300'>
+      <nav className='h-full  text-black dark:text-gray-300'>
        {toc.map((tocItem) => {
          const id = uuidToId(tocItem.id)
          tocIds.push(id)
--- a/themes/next/index.js
+++ b/themes/next/index.js
@@ -85,7 +85,7 @@ const LayoutBase = (props) => {

  return (
    <ThemeGlobalNext.Provider value={{ searchModal }}>
-        <div id='theme-next'>
+        <div id='theme-next' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
            <Style/>

            {/* 移动端顶部导航栏 */}
@@ -119,7 +119,7 @@ const LayoutBase = (props) => {
            </div>}

            {/* 右下角悬浮 */}
-            <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+            <div ref={floatButtonGroup} className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 '>
                <div className={(showRightFloat ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
                    <JumpToTopButton percent={percent} />
                    <JumpToBottomButton />
--- a/themes/nobelium/components/ArticleLock.js
+++ b/themes/nobelium/components/ArticleLock.js
@@ -29,7 +29,7 @@ export const ArticleLock = props => {
    passwordInputRef.current.focus()
  }, [])

-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  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'>
--- a/themes/nobelium/components/ExampleRecentComments.js
+++ b/themes/nobelium/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/nobelium/index.js
+++ b/themes/nobelium/index.js
@@ -46,7 +46,7 @@ const LayoutBase = props => {

  return (
        <ThemeGlobalNobelium.Provider value={{ searchModal, filterKey, setFilterKey }}>
-            <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col'>
+            <div id='theme-nobelium' className={`${siteConfig('FONT_STYLE')} nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen flex flex-col scroll-smooth`}>

                <Style />

--- a/themes/plog/components/ArticleLock.js
+++ b/themes/plog/components/ArticleLock.js
@@ -29,7 +29,7 @@ export const ArticleLock = props => {
    passwordInputRef.current.focus()
  }, [])

-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  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'>
--- a/themes/plog/components/ExampleRecentComments.js
+++ b/themes/plog/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -53,7 +53,7 @@ const LayoutBase = props => {

  return (
    <ThemeGlobalPlog.Provider value={{ showModal, setShowModal, modalContent, setModalContent }}>
-        <div id='theme-plog' className='plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen'>
+        <div id='theme-plog' className={`${siteConfig('FONT_STYLE')} plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen scroll-smooth`} >

            <Style/>

--- a/themes/simple/components/ArticleLock.js
+++ b/themes/simple/components/ArticleLock.js
@@ -28,7 +28,7 @@ export default function ArticleLock (props) {
    passwordInputRef.current.focus()
  }, [])

-  return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
+  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'>
--- a/themes/simple/components/ExampleRecentComments.js
+++ b/themes/simple/components/ExampleRecentComments.js
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
        {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
        {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
            <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' dangerouslySetInnerHTML={{ __html: comment.comment }} />
-            <div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
        </div>)}

  </>
--- a/themes/simple/components/MenuItemDrop.js
+++ b/themes/simple/components/MenuItemDrop.js
@@ -14,13 +14,13 @@ export const MenuItemDrop = ({ link }) => {
        {!hasSubMenu &&
            <Link
                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                className=" menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
                {link?.icon && <span className='mr-2'><i className={link.icon} /></span>}{link?.name}
                    {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
            </Link>}

        {hasSubMenu && <>
-            <div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <div className='cursor-pointer  menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
                {link?.icon && <span className='mr-2'><i className={link.icon} /></span>} {link?.name}
                <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
            </div>
--- a/themes/simple/index.js
+++ b/themes/simple/index.js
@@ -47,7 +47,7 @@ const LayoutBase = props => {

  return (
    <ThemeGlobalSimple.Provider value={{ searchModal }}>
-        <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
+        <div id='theme-simple' className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black scroll-smooth`}>

            <Style/>