Medium 主题：调整Fontawesome

themes/Medium/LayoutBase.js

@@ -29,8 +29,8 @@ const LayoutBase = props => {
 
         <div className='w-full'>
           {/* 移动端顶部菜单 */}
-          <TopNavBar />
-          <div className='px-5 max-w-5xl justify-center mx-auto'>
+          <TopNavBar {...props}/>
+          <div className='px-5 max-w-5xl justify-center mx-auto min-h-screen'>
             {slotTop}
             {children}
           </div>

themes/Medium/LayoutCategory.js

@@ -1,11 +1,9 @@
 import LayoutBase from './LayoutBase'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTh } from '@fortawesome/free-solid-svg-icons'
 
 export const LayoutCategory = (props) => {
   const { category } = props
-  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><FontAwesomeIcon icon={faTh} className='mr-2'/>分类：</div>{category}</div>
+  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><i className='mr-2 fas fa-th'/>分类：</div>{category}</div>
 
   return <LayoutBase {...props} slotTop={slotTop}>
     <BlogPostListScroll {...props} />

themes/Medium/LayoutSlug.js

@@ -23,8 +23,6 @@ import mediumZoom from 'medium-zoom'
 import React, { useEffect, useRef } from 'react'
 import ArticleAround from './components/ArticleAround'
 import Catalog from './components/Catalog'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEye } from '@fortawesome/free-solid-svg-icons'
 import CategoryItem from './components/CategoryItem'
 import TagItemMini from './components/TagItemMini'
 import CONFIG_MEDIUM from './config_medium'
@@ -104,7 +102,7 @@ export const LayoutSlug = props => {
         </Link>
         <div className="text-gray-500">{date}</div>
         <div className="hidden busuanzi_container_page_pv text-gray-500 font-light mr-2">
-          <FontAwesomeIcon icon={faEye} className="ml-3 mr-0.5" />
+          <i className="ml-3 mr-0.5 fas fa-eye" />
           &nbsp;
           <span className="mr-2 busuanzi_value_page_pv" />
         </div>
@@ -139,7 +137,7 @@ export const LayoutSlug = props => {
       </section>
       <section>
         <div className='flex justify-between'>
-        { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && <CategoryItem category={post.category}/>}
+        { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category}/>}
         <div>
         { CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
         </div>

themes/Medium/LayoutTag.js

@@ -1,11 +1,9 @@
 import LayoutBase from './LayoutBase'
 import BlogPostListScroll from './components/BlogPostListScroll'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTag } from '@fortawesome/free-solid-svg-icons'
 
 export const LayoutTag = (props) => {
   const { tag } = props
-  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><FontAwesomeIcon icon={faTag} className='mr-2'/>标签：</div>{tag}</div>
+  const slotTop = <div className='flex items-center font-sans p-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
 
   return <LayoutBase {...props} slotTop={slotTop}>
     <BlogPostListScroll {...props} />

themes/Medium/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-12 flex items-center justify-between space-x-5 my-4'>
     <Link href={`/article/${prev.slug}`} passHref>
       <a className='text-sm cursor-pointer justify-start items-center flex hover:underline 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-end items-center flex hover:underline 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/Medium/components/BlogPostCard.js

@@ -1,7 +1,5 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x'
@@ -17,7 +15,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
-            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'}>
+            <a className={'cursor-pointer font-bold font-sans hover:underline text-3xl flex justify-start leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
               {post.title}
             </a>
           </Link>
@@ -52,7 +50,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                   <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
                       <a className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform  text-red-500 cursor-pointer'>
                         {locale.COMMON.ARTICLE_DETAIL}
-                        <FontAwesomeIcon className='ml-1' icon={faAngleRight} /></a>
+                        <i className='ml-1 fas fa-angle-right'/></a>
 
                    </Link>
                 </div>

themes/Medium/components/BottomMenuBar.js

@@ -1,5 +1,3 @@
-import { faHome, faSearch } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import React from 'react'
 import JumpToTopButton from '@/themes/Medium/components/JumpToTopButton'
@@ -10,12 +8,12 @@ export default function BottomMenuBar ({ className }) {
       <div className='flex justify-between h-full shadow-card'>
         <Link href='/' passHref>
           <div className='flex w-full items-center justify-center cursor-pointer'>
-            <FontAwesomeIcon icon={faHome} />
+            <i className='fas fa-home' />
           </div>
         </Link>
         <Link href='/search' passHref>
           <div className='flex w-full items-center justify-center cursor-pointer'>
-            <FontAwesomeIcon icon={faSearch} />
+            <i className='fas fa-search'/>
           </div>
         </Link>
         <div className='flex w-full items-center justify-center cursor-pointer'>

themes/Medium/components/CategoryGroup.js

@@ -1,5 +1,3 @@
-import { faTh } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import CategoryItem from './CategoryItem'
 
@@ -8,7 +6,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
     return <></>
   }
   return <div id='category-list' className='pt-4'>
-    <div className='mb-2'><FontAwesomeIcon icon={faTh} className='mr-2' />分类</div>
+    <div className='mb-2'><i className='mr-2 fas fa-th' />分类</div>
     <div className='flex flex-wrap'>
       {Object.keys(categories).map(category => {
         const selected = currentCategory === category

themes/Medium/components/CategoryItem.js

@@ -1,15 +1,12 @@
 import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFolderOpen, faFolder } from '@fortawesome/free-solid-svg-icons'
 
 export default function CategoryItem ({ selected, category, categoryCount }) {
   return <Link href={`/category/${category}`} passHref>
     <a className={(selected
-      ? 'hover:text-white dark:hover:text-white bg-gray-600 text-white '
-      : 'dark:text-gray-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-gray-600') +
+      ? 'hover:text-white dark:hover:text-white bg-green-600 text-white '
+      : 'dark:text-green-400 text-gray-500 hover:text-white dark:hover:text-white hover:bg-green-600') +
     ' flex text-sm items-center duration-300 cursor-pointer py-1 font-light px-2 whitespace-nowrap'}>
-      <div><FontAwesomeIcon icon={selected ? faFolderOpen : faFolder}
-                            className={'mr-2'} />{category} {categoryCount && (categoryCount)}
+      <div><i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category} {categoryCount && (categoryCount)}
       </div>
     </a>
   </Link>

themes/Medium/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>

themes/Medium/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_MEDIUM from '../config_medium'
 
@@ -19,7 +17,7 @@ const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   const { locale } = useGlobal()
   return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
         <div 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>)

themes/Medium/components/LeftMenuBar.js

@@ -1,6 +1,4 @@
 import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHome } from '@fortawesome/free-solid-svg-icons'
 import React from 'react'
 
 export default function LeftMenuBar () {
@@ -8,7 +6,7 @@ export default function LeftMenuBar () {
     <section>
       <Link href='/'>
         <div className='text-center cursor-pointer  hover:text-black'>
-          <FontAwesomeIcon icon={faHome} size='lg' color='gray' />
+          <i className='fas fa-home text-gray-500'/>
         </div>
       </Link>
     </section>

themes/Medium/components/PaginationSimple.js

@@ -23,7 +23,7 @@ const PaginationSimple = ({ page, totalPage }) => {
         } } passHref >
         <a
           rel='prev'
-          className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
         >
           ← {locale.PAGINATION.PREV}
         </a>
@@ -31,7 +31,7 @@ const PaginationSimple = ({ page, totalPage }) => {
       <Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
         <a
           rel='next'
-          className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
+          className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
         >
           {locale.PAGINATION.NEXT} →
         </a>

themes/Medium/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, className }) => {
   const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
@@ -55,12 +53,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
 
     <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='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
       </div>
       )}
   </div>

themes/Medium/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'
 
 /**
@@ -12,22 +9,22 @@ import React from 'react'
 const SocialButton = () => {
   return <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 flex-wrap flex justify-center '>
       {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='fab fa-github transform hover:scale-125 duration-150 hover:text-green-600'/>
       </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='fab fa-twitter transform hover:scale-125 duration-150 hover:text-green-600'/>
       </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='fab fa-telegram transform hover:scale-125 duration-150 hover:text-green-600'/>
       </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='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
       </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='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>}
       <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
-        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
+        <i className='fas fa-rss transform hover:scale-125 duration-150 hover:text-green-600'/>
       </a>
     </div>
 }

themes/Medium/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 py-4'>
-      <div className='mb-2'><FontAwesomeIcon icon={faTag} className='mr-2' />标签</div>
+      <div className='mb-2'><i className='mr-2 fas fa-tag' />标签</div>
       <div className='space-y-2'>
       {
         tags.map(tag => {

themes/Medium/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/Medium/components/TopNavBar.js

@@ -1,9 +1,40 @@
 import LogoBar from '@/themes/Medium/components/LogoBar'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+/**
+ * 顶部导航栏 + 菜单
+ * @param {} param0
+ * @returns
+ */
+export default function TopNavBar (props) {
+  const { className, customNav } = props
+  const router = useRouter()
 
-export default function TopNavBar ({ className }) {
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white px-5 items-center'>
+    <div className='flex w-full h-12 shadow bg-white px-5 items-between'>
       <LogoBar />
+
+      {/* 顶部菜单 */}
+      <div className='flex'>
+        {customNav && customNav.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} >
+            <a className={'px-5 duration-300 text-base justify-between hover:text-green-600 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                (selected ? 'bg-green-600 text-white' : ' ')} >
+                <div className='items-center justify-center flex '>
+                  <i className={link.icon} />
+                  <div className='ml-4 whitespace-nowrap'>{link.name}</div>
+                </div>
+                {link.slot}
+              </a>
+            </Link>
+          } else {
+            return null
+          }
+        })}
+      </div>
     </div>
   </div>
 }

themes/index.js

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