Fukasawa: Fontawesome改造

themes/Fukasawa/LayoutBase.js

@@ -20,17 +20,13 @@ const LayoutBase = (props) => {
   const {
     children,
     headerSlot,
-    tags,
-    meta,
-    currentCategory,
-    currentTag,
-    categories
+    meta
   } = props
   return (<>
     <CommonHead meta={meta} />
     <TopNav {...props}/>
     <div className='flex'>
-      <AsideLeft tags={tags} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
+      <AsideLeft {...props}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
         <div className='2xl:max-w-6xl md:max-w-3xl w-full'>
           <div> {headerSlot} </div>

themes/Fukasawa/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 LayoutBase from './LayoutBase'
 
@@ -16,14 +14,14 @@ export const LayoutCategoryIndex = (props) => {
   return <LayoutBase {...props} meta={meta}>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
       <div className='dark:text-gray-200 mb-5'>
-        <FontAwesomeIcon icon={faTh} className='mr-4' />{locale.COMMON.CATEGORY}:
+        <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
       </div>
       <div id='category-list' className='duration-200 flex flex-wrap'>
         {Object.keys(categories).map(category => {
           return <Link key={category} href={`/category/${category}`} passHref>
             <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'}>
-              <FontAwesomeIcon icon={faFolder} className='mr-4' />{category}({categories[category]})
+              <i className='mr-4 fas fa-folder' />{category}({categories[category]})
             </div>
           </Link>
         })}

themes/Fukasawa/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 TagItem from './components/TagItem'
 import LayoutBase from './LayoutBase'
 
@@ -16,7 +14,7 @@ export const LayoutTagIndex = (props) => {
 
   return <LayoutBase {...props} meta={meta}>
     <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
-      <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTag} className='mr-4'/>{locale.COMMON.TAGS}:</div>
+      <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag'/>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         { tags.map(tag => {
           return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div>

themes/Fukasawa/components/ArticleAround.js

@@ -1,6 +1,4 @@
 import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * 上一篇，下一篇文章
@@ -14,12 +12,12 @@ export default function ArticleAround ({ prev, next }) {
   return <section className='text-gray-800 h-28 flex items-center justify-between space-x-5 my-4'>
     <Link href={`/article/${prev.slug}`} passHref>
       <a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-gray-400 bg-opacity-40 hover:bg-gray-700 hover:text-white duration-300'>
-        <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
       </a>
     </Link>
     <Link href={`/article/${next.slug}`} passHref>
       <a className='text-sm  cursor-pointer justify-center items-center flex w-full h-full bg-gray-400 bg-opacity-40 hover:bg-gray-700 hover:text-white duration-300'>{next.title}
-        <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
       </a>
     </Link>
   </section>

themes/Fukasawa/components/ArticleDetail.js

@@ -1,8 +1,6 @@
 import Comment from '@/components/Comment'
 import formatDate from '@/lib/formatDate'
 import { useGlobal } from '@/lib/global'
-import { faEye, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import mediumZoom from 'medium-zoom'
 import Link from 'next/link'
 import 'prismjs'
@@ -64,7 +62,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
             <div>
               <Link href={`/category/${post.category}`} passHref>
                 <a className="cursor-pointer text-md mr-2 hover:text-black 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>
@@ -83,7 +81,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
               </>)}
 
               <div className="hidden busuanzi_container_page_pv font-light mr-2">
-                <FontAwesomeIcon icon={faEye} className='mr-1'/>
+                <i className='mr-1 fas fa-eye'/>
                 &nbsp;
                 <span className="mr-2 busuanzi_value_page_pv"/>
                 <span className='mr-2'>|</span>

themes/Fukasawa/components/AsideLeft.js

@@ -6,14 +6,15 @@ import GroupTag from './GroupTag'
 import SearchInput from './SearchInput'
 import SiteInfo from './SiteInfo'
 
-function AsideLeft ({ tags, currentTag, categories, currentCategory }) {
+function AsideLeft (props) {
+  const { tags, currentTag, categories, currentCategory } = props
   return <div className='w-72 bg-white min-h-screen px-10 py-14 hidden lg:block'>
 
     <Logo />
 
     <section className='flex flex-col text-gray-600'>
       <hr className='w-12 my-8' />
-      <GroupMenu/>
+      <GroupMenu {...props}/>
     </section>
 
     <section className='flex flex-col text-gray-600'>

themes/Fukasawa/components/GroupCategory.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'
 
@@ -17,7 +15,7 @@ function GroupCategory ({ currentCategory, categories }) {
             ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
             : 'dark:text-gray-400 text-gray-500 hover:text-white hover:bg-gray-500 dark:hover:text-white') +
             '  text-sm w-full items-center duration-300 px-2  cursor-pointer py-1 font-light'}>
-            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
+            <i className={`${selected ? 'text-white fa-folder-open' : 'fa-folder text-gray-400'} fas mr-2`} />{category}({categories[category]})
             </a>
         </Link>
       })}

themes/Fukasawa/components/GroupMenu.js

@@ -4,22 +4,26 @@ import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import CONFIG_FUKA from '../config_fuka'
 
-function GroupMenu () {
+function GroupMenu ({ customNav }) {
   const { locale } = useGlobal()
   const router = useRouter()
 
-  const links = [
-    { id: 0, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
-    { id: 2, name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
-    { id: 3, name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE },
-    { id: 4, name: locale.NAV.ABOUT, to: '/about', show: CONFIG_FUKA.MENU_ABOUT }
+  let links = [
+    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_FUKA.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_FUKA.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_FUKA.MENU_ARCHIVE }
   ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
   return <nav id='nav' className='font-sans text-sm'>
       {links.map(link => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
-          return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
+          return <Link key={`${link.to}`} title={link.to} href={link.to} >
           <a className={'py-0.5 duration-500 justify-between text-gray-500 hover:text-black cursor-pointer flex flex-nowrap items-center ' +
               (selected ? 'text-black' : ' ')} >
               <div className='my-auto items-center justify-center flex '>

themes/Fukasawa/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:bg-gray-600 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:bg-gray-600 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>

themes/Fukasawa/components/SiteInfo.js

@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import { faEye, faShieldAlt, faUsers } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function SiteInfo ({ title }) {
   const d = new Date()
@@ -14,10 +12,10 @@ function SiteInfo ({ title }) {
 
                 <span>Powered by  <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-500 dark:text-gray-300'>NotionNext</a>.</span><br /></span>
 
-            {BLOG.BEI_AN && <><FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
+            {BLOG.BEI_AN && <><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>
-            <span className='pl-2 hidden busuanzi_container_site_uv'> <FontAwesomeIcon icon={faUsers} /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
+            <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>
             <br />
             <h1>{title}</h1>
         </footer>

themes/Fukasawa/components/TagItem.js

@@ -1,5 +1,3 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 import { useGlobal } from '@/lib/global'
@@ -16,7 +14,7 @@ const TagItem = ({ tag, selected }) => {
       duration-200 mr-1 my-1 px-2 py-1 text-sm whitespace-nowrap 
        hover:bg-gray-200 dark:hover:bg-gray-800 `}>
       <div className='text-gray-600 dark:text-gray-300 dark:hover:text-white'>
-        {selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
+        {selected && <i className='mr-1 fas fa-tag'/>} {`${tag.name} `} {tag.count ? `(${tag.count})` : ''}
       </div>
     </li>
   </Link>

themes/Fukasawa/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-gray-900'
       : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-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 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </a>
   </Link>
 }

themes/Fukasawa/components/TopNav.js

@@ -1,5 +1,3 @@
-import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
 import Collapse from './Collapse'
 import GroupMenu from './GroupMenu'
@@ -10,7 +8,7 @@ import Logo from './Logo'
  * @param {*} param0
  * @returns
  */
-const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) => {
+const TopNav = (props) => {
   const [isOpen, changeShow] = useState(false)
 
   const toggleMenuOpen = () => {
@@ -23,23 +21,21 @@ const TopNav = ({ tags, currentTag, categories, currentCategory, postCount }) =>
     <div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500'}>
       <Collapse isOpen={isOpen}>
         <div className='bg-white py-1 px-5'>
-          <GroupMenu/>
+          <GroupMenu {...props}/>
           </div>
       </Collapse>
       <div className='w-full flex justify-between items-center p-4 bg-white'>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
-        <Logo/>
-
+          <Logo/>
         </div>
-
         <div className='flex'>
         </div>
 
         {/* 右侧功能 */}
         <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
           <div onClick={toggleMenuOpen} className='w-18 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>

themes/index.js

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