Hexo 主题，fontawesome改造

2026-05-14 07:26:52 +00:00 · 2022-02-27 21:42:45 +08:00
parent 53c51846ef
commit 4b1f9059e7
22 changed files with 57 additions and 93 deletions
--- a/themes/Empty/LayoutPage.js
+++ b/themes/Empty/LayoutPage.js
@@ -1,4 +1,4 @@
-import LayoutBase from '../Hexo/LayoutBase'
+import LayoutBase from '../Empty/LayoutBase'

 export const LayoutPage = (props) => {
  const { page } = props
--- a/themes/Hexo/Layout404.js
+++ b/themes/Hexo/Layout404.js
@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
@@ -26,7 +24,7 @@ export const Layout404 = props => {
      <div className="text-black w-full h-screen text-center justify-center content-center items-center flex flex-col">
        <div className="dark:text-gray-200">
          <h2 className="inline-block border-r-2 border-gray-600 mr-2 px-3 py-2 align-top">
-            <FontAwesomeIcon icon={faSpinner} spin={true} className="mr-2" />
+            <i className="mr-2 fas fa-spinner animate-spin" />
            404
          </h2>
          <div className="inline-block text-left h-32 leading-10 items-center">
--- a/themes/Hexo/LayoutCategoryIndex.js
+++ b/themes/Hexo/LayoutCategoryIndex.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faFolder, faTh } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Card from './components/Card'
 import LayoutBase from './LayoutBase'
@@ -18,7 +16,7 @@ export const LayoutCategoryIndex = props => {
    <LayoutBase {...props} meta={meta}>
      <Card className="bg-white dark:bg-gray-700 w-full min-h-screen">
        <div className="dark:text-gray-200 mb-5 mx-3">
-          <FontAwesomeIcon icon={faTh} className="mr-4" />
+          <i className="mr-4 fas fa-th" />
          {locale.COMMON.CATEGORY}:
        </div>
        <div id="category-list" className="duration-200 flex flex-wrap mx-8">
@@ -30,7 +28,7 @@ export const LayoutCategoryIndex = props => {
                    ' duration-300 dark:hover:text-white rounded-lg px-5 cursor-pointer py-2 hover:bg-blue-600 hover:text-white'
                  }
                >
-                  <FontAwesomeIcon icon={faFolder} className="mr-4" />
+                  <i className="mr-4 fas fa-folder" />
                  {category}({categories[category]})
                </div>
              </Link>
--- a/themes/Hexo/LayoutTagIndex.js
+++ b/themes/Hexo/LayoutTagIndex.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Card from './components/Card'
 import TagItemMini from './components/TagItemMini'
 import LayoutBase from './LayoutBase'
@@ -18,7 +16,7 @@ export const LayoutTagIndex = props => {
    <LayoutBase {...props} meta={meta}>
      <Card className='w-full'>
        <div className="dark:text-gray-200 mb-5 ml-4">
-          <FontAwesomeIcon icon={faTag} className="mr-4" />
+          <i className="mr-4 fas fa-tag" />
          {locale.COMMON.TAGS}:
        </div>
        <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
--- a/themes/Hexo/components/BlogPostCard.js
+++ b/themes/Hexo/components/BlogPostCard.js
@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import { faFolder } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
@@ -51,7 +49,7 @@ const BlogPostCard = ({ post, showSummary }) => {

          <Link href={`/category/${post.category}`} passHref>
              <a className='cursor-pointer font-light text-sm hover:underline transform'>
-                <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
+                <i className='mr-1 fas fa-folder' />{post.category}
              </a>
            </Link>
            <div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
--- a/themes/Hexo/components/Catalog.js
+++ b/themes/Hexo/components/Catalog.js
@@ -2,9 +2,6 @@ import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faStream } from '@fortawesome/free-solid-svg-icons'
-// import { cs } from 'react-notion-x'

 /**
 * 目录导航组件
@@ -55,7 +52,7 @@ const Catalog = ({ toc }) => {
  }, throttleMs))

  return <div className='px-3'>
-    <div className='w-full'><FontAwesomeIcon className='mr-1' icon={faStream}/> 目录</div>
+    <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
    <div className='w-full py-1'>
      <Progress/>
    </div>
--- a/themes/Hexo/components/CategoryGroup.js
+++ b/themes/Hexo/components/CategoryGroup.js
@@ -1,5 +1,3 @@
-import { faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'

@@ -16,7 +14,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
            ? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
            : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-blue-600') +
            '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
-              <div>            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={'mr-2'} />{category}({categories[category]})</div>
+              <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category}({categories[category]})</div>
            </a>
        </Link>
      })}
--- a/themes/Hexo/components/Footer.js
+++ b/themes/Hexo/components/Footer.js
@@ -1,5 +1,3 @@
-import { faCopyright, faEye, faShieldAlt, faUsers, faHeart } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import BLOG from '@/blog.config'

@@ -11,16 +9,16 @@ const Footer = ({ title }) => {
    <footer
      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
    >
-      <FontAwesomeIcon icon={faCopyright} /> {`${startYear}${currentYear}`} <span><FontAwesomeIcon icon={faHeart} className='mx-1 animate-pulse'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
+      <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
      <br/>

      <span>Powered by <a href='https://notion.so' className='underline font-bold text-gray-500 dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-500 dark:text-gray-300'>NotionNext</a>.</span></span>

-      {BLOG.BEI_AN && <><br /><FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+      {BLOG.BEI_AN && <><br /><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
      <span className='hidden busuanzi_container_site_pv'>
-            <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
+            <i className='fas fa-eye'/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
      <span className='pl-2 hidden busuanzi_container_site_uv'>
-        <FontAwesomeIcon icon={faUsers}/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+        <i className='fas fa-users'/> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
        <br/>
        <h1>{title}</h1>
    </footer>
--- a/themes/Hexo/components/Header.js
+++ b/themes/Hexo/components/Header.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_HEXO from '../config_hexo'
@@ -116,7 +114,7 @@ export default function Header () {
        }}
        className="cursor-pointer w-full text-center py-4 text-3xl absolute bottom-10 text-white"
      >
-        <FontAwesomeIcon icon={faAngleDown} className='animate-bounce'/>
+        <i className='animate-bounce fas fa-angle-down'/>
      </div>
    </header>
  )
--- a/themes/Hexo/components/HeaderArticle.js
+++ b/themes/Hexo/components/HeaderArticle.js
@@ -1,5 +1,3 @@
-import { faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
@@ -50,13 +48,15 @@ export default function HeaderArticle ({ post }) {

            <section className="flex-wrap shadow-text flex justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
              <div>
-                <Link href={`/category/${post.category}`} passHref>
+                {post.category && <>
+                  <Link href={`/category/${post.category}`} passHref>
                  <a className="cursor-pointer text-md mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-                    <FontAwesomeIcon icon={faFolderOpen} className="mr-1" />
+                    <i className="mr-1 fas fa-folder-open" />
                    {post.category}
                  </a>
-                </Link>
-                <span className="mr-2">|</span>
+                  </Link>
+                  <span className="mr-2">|</span>
+                </>}

                {post.type[0] !== 'Page' && (
                  <>
--- a/themes/Hexo/components/JumpToTopButton.js
+++ b/themes/Hexo/components/JumpToTopButton.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import CONFIG_HEXO from '../config_hexo'

@@ -19,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
  const { locale } = useGlobal()
  return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
        <div className='dark:text-gray-200' title={locale.POST.TOP} >
-          <FontAwesomeIcon icon={faArrowUp} />
+          <i className='fas fa-arrow-up' />
        </div>
        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
    </div>)
--- a/themes/Hexo/components/LatestPostsGroup.js
+++ b/themes/Hexo/components/LatestPostsGroup.js
@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faArchive, faFileAlt } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useRouter } from 'next/router'

@@ -21,7 +19,7 @@ const LatestPostsGroup = ({ posts }) => {

  return <>
      <div className='font-sans mb-2 px-1 flex flex-nowrap justify-between'>
-        <div><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
+        <div><i className='mr-2 fas fa-archive' />{locale.COMMON.LATEST_POSTS}</div>
      </div>
      {posts.map(post => {
        const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
@@ -30,7 +28,7 @@ const LatestPostsGroup = ({ posts }) => {
            <a className={ 'my-1  flex font-light'}>
              <div className={ (selected ? 'text-white  bg-blue-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-blue-600 px-2 duration-200 w-full ' +
                'hover:text-white dark:hover:text-white cursor-pointer' }>
-                <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
+                <i className='mr-2 fas fa-file-alt'/>
                <div className='truncate'>{post.title}</div>
              </div>
            </a>
--- a/themes/Hexo/components/MenuButtonGroup.js
+++ b/themes/Hexo/components/MenuButtonGroup.js
@@ -2,22 +2,24 @@ import React from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons'
 import CONFIG_HEXO from '../config_hexo'

-const MenuButtonGroup = ({ postCount }) => {
+const MenuButtonGroup = (props) => {
+  const { postCount, customNav } = props
  const { locale } = useGlobal()
  const router = useRouter()
  const archiveSlot = <div className='bg-blue-300 dark:bg-blue-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>

-  const links = [
-    { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
-    { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
-    { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
-    { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
+  let links = [
+    { id: 0, icon: 'fas fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { id: 1, icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_HEXO.MENU_CATEGORY },
+    { id: 2, icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_HEXO.MENU_TAG },
+    { id: 3, icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: CONFIG_HEXO.MENU_ARCHIVE },
+    { id: 4, icon: 'fas fa-user', name: locale.NAV.ABOUT, to: '/about', show: CONFIG_HEXO.MENU_ABOUT }
  ]
+  if (customNav) {
+    links = links.concat(customNav)
+  }
  return <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-400 font-sans w-full'>
      {links.map(link => {
        if (link.show) {
@@ -26,7 +28,7 @@ const MenuButtonGroup = ({ postCount }) => {
          <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-600 hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
              (selected ? 'bg-blue-600 text-white' : ' ')} >
              <div className='my-auto items-center justify-center flex '>
-                <FontAwesomeIcon icon={link.icon} />
+                <i className={link.icon} />
                <div className={'ml-4'}>{link.name}</div>
              </div>
              {link.slot}
--- a/themes/Hexo/components/PaginationNumber.js
+++ b/themes/Hexo/components/PaginationNumber.js
@@ -1,8 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'

 /**
 * 数字翻页插件
@@ -29,7 +27,7 @@ const PaginationNumber = ({ page, totalPage }) => {
          rel='prev'
          className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-200  hover:font-bold`}
        >
-          <FontAwesomeIcon icon={faAngleLeft}/>
+          <i className='fas fa-angle-left'/>
        </div>
      </Link>

@@ -41,7 +39,7 @@ const PaginationNumber = ({ page, totalPage }) => {
          rel='next'
          className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-t-2 border-white dark:border-blue-700 hover:border-blue-400 dark:hover:border-blue-400 w-6 text-center cursor-pointer duration-500  hover:font-bold`}
        >
-          <FontAwesomeIcon icon={faAngleRight}/>
+          <i className='fas fa-angle-right'/>
        </div>
      </Link>
    </div>
--- a/themes/Hexo/components/SearchInput.js
+++ b/themes/Hexo/components/SearchInput.js
@@ -1,7 +1,5 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'

 const SearchInput = ({ currentTag, currentSearch, cRef }) => {
  const [searchKey, setSearchKey] = useState(currentSearch || '')
@@ -54,12 +52,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {

    <div className='-ml-8 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'
      onClick={() => { handleSearch(searchKey) }}>
-        <FontAwesomeIcon spin={onLoading} icon={onLoading ? faSpinner : faSearch} className='hover:text-black transform duration-200 text-gray-500 cursor-pointer' />
+        <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
    </div>

    {(searchKey && searchKey.length &&
      <div className='-ml-12 cursor-pointer dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-        <FontAwesomeIcon icon={faTimes} className='hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
+        <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
      </div>
      )}
  </div>
--- a/themes/Hexo/components/SideRight.js
+++ b/themes/Hexo/components/SideRight.js
@@ -4,8 +4,6 @@ import BLOG from '@/blog.config'
 import Card from './Card'
 import MenuButtonGroup from './MenuButtonGroup'
 import SearchInput from './SearchInput'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChartArea, faTh } from '@fortawesome/free-solid-svg-icons'
 import CategoryGroup from './CategoryGroup'
 import LatestPostsGroup from './LatestPostsGroup'
 import TagGroups from './TagGroups'
@@ -51,7 +49,7 @@ export default function SideRight (props) {
      </Card>
      <Card>
        <div className='ml-2 mb-3 font-sans'>
-          <FontAwesomeIcon icon={faChartArea} /> 统计
+          <i className='fas fa-chart-area' /> 统计
        </div>
        <div className='text-xs font-sans font-light justify-center mx-7'>
          <div className='inline'>
@@ -78,7 +76,7 @@ export default function SideRight (props) {
      {showCategory && (
        <Card>
          <div className='ml-2 mb-1 font-sans'>
-            <FontAwesomeIcon icon={faTh} /> 分类
+            <i className='fas fa-th'/> 分类
          </div>
          <CategoryGroup
            currentCategory={currentCategory}
@@ -96,7 +94,7 @@ export default function SideRight (props) {
      </Card>}

      {post && post.toc && (
-        <Card className='sticky top-4'>
+        <Card className='sticky top-12'>
          <Catalog toc={post.toc} />
        </Card>
      )}
--- a/themes/Hexo/components/SocialButton.js
+++ b/themes/Hexo/components/SocialButton.js
@@ -1,7 +1,4 @@
 import BLOG from '@/blog.config'
-import { faGithub, faTelegram, faTwitter, faWeibo } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faRss } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'

 /**
@@ -13,22 +10,22 @@ const SocialButton = () => {
  return <div className='w-full justify-center flex-wrap flex'>
    <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 '>
      {BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
-        <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-github'/>
      </a>}
      {BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
-        <FontAwesomeIcon icon={faTwitter} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-twitter'/>
      </a>}
      {BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
-        <FontAwesomeIcon icon={faTelegram} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-telegram'/>
      </a>}
      {BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
-        <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fab fa-weibo'/>
      </a>}
      {BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
-        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-envelope'/>
      </a>}
      <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
+        <i className='transform hover:scale-125 duration-150 fas fa-rss'/>
      </a>
    </div>
  </div>
--- a/themes/Hexo/components/TagGroups.js
+++ b/themes/Hexo/components/TagGroups.js
@@ -1,5 +1,3 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import TagItemMini from './TagItemMini'

 /**
@@ -13,7 +11,7 @@ const TagGroups = ({ tags, currentTag }) => {
  if (!tags) return <></>
  return (
    <div id='tags-group' className='dark:border-gray-600 space-y-2'>
-      <div className='font-light text-xs ml-2 mb-2'><FontAwesomeIcon icon={faTag} className='mr-1' />标签</div>
+      <div className='font-light text-xs ml-2 mb-2'><i className='mr-1 fas fa-tag' />标签</div>
      <div className='px-4'>
      {
        tags.map(tag => {
--- a/themes/Hexo/components/TagItemMini.js
+++ b/themes/Hexo/components/TagItemMini.js
@@ -1,5 +1,3 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'

 const TagItemMini = ({ tag, selected = false }) => {
@@ -9,7 +7,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       ${selected
      ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-blue-900'
      : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-blue-800`}` }>
-    <div className='font-light dark:text-gray-400'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+    <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
    </a>
  </Link>
 }
--- a/themes/Hexo/components/TocDrawerButton.js
+++ b/themes/Hexo/components/TocDrawerButton.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faListOl } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import CONFIG_HEXO from '../config_hexo'

@@ -17,7 +15,7 @@ const TocDrawerButton = (props) => {
  }
  const { locale } = useGlobal()
  return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
-    <FontAwesomeIcon icon={faListOl}/>
+    <i className='fas fa-list-ol'/>
  </div>)
 }

--- a/themes/Hexo/components/TopNav.js
+++ b/themes/Hexo/components/TopNav.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faBars, faTag, faThList, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import throttle from 'lodash.throttle'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
@@ -60,10 +58,10 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
    { categories && (
        <section className='mt-8'>
          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
            <Link href={'/category'} passHref>
              <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
              </a>
            </Link>
          </div>
@@ -74,10 +72,10 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
    { tags && (
        <section className='mt-4'>
          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTag} className='mr-2'/>{locale.COMMON.TAGS}</div>
+            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
            <Link href={'/tag'} passHref>
              <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
+                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
              </a>
            </Link>
          </div>
@@ -101,7 +99,7 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
        {/* 右侧功能 */}
        <div className='mr-1 flex lg:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
          <div onClick={toggleMenuOpen} className='w-8 cursor-pointer'>
-          { isOpen ? <FontAwesomeIcon icon={faTimes} size={'lg'}/> : <FontAwesomeIcon icon={faBars} size={'lg'}/> }
+          { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
          </div>
        </div>
      </div>
--- a/themes/index.js
+++ b/themes/index.js
@@ -3,7 +3,7 @@
 */

 // export * from './Empty' //  空主题
-export * from './NEXT'
+// export * from './NEXT'
 // export * from './Fukasawa'
-// export * from './Hexo'
+export * from './Hexo'
 // export * from './Medium'