提交

themes/medium/components/ArticleAround.js

@@ -9,16 +9,24 @@ export default function ArticleAround ({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
-  return <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
-    <Link href={`/${prev.slug}`} passHref>
-      <a className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+  return (
+    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
         <i className='mr-1 fas fa-angle-double-left' />{prev.title}
-      </a>
-    </Link>
-    <Link href={`/${next.slug}`} passHref>
-      <a className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+        {next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
-      </a>
-    </Link>
-  </section>
+
+      </Link>
+    </section>
+  );
 }

themes/medium/components/ArticleDetail.js

@@ -18,59 +18,61 @@ export const ArticleDetail = props => {
     post?.date?.start_date || post?.createdTime,
     locale.LOCALE
   )
-  return <div id='container'>
+  return (
+      <div id='container'>
 
-        {/* title */}
-        <h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>
+            {/* title */}
+            <h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>
 
-        {/* meta */}
-        <section className="py-2 items-center text-sm font-sans px-1">
-            <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
-                <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
-                <span className='mx-1'>|</span>
-                <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
-                <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
-                    <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
-                </div>
-            </div>
-            <Link href="/about" passHref>
-                <div className='flex pt-2'>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
-
-                    <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
-                        {BLOG.AUTHOR}
+            {/* meta */}
+            <section className="py-2 items-center text-sm font-sans px-1">
+                <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
+                    <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
+                    <span className='mx-1'>|</span>
+                    <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2'/>{post.lastEditedTime}</span>
+                    <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
+                        <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
                     </div>
                 </div>
-            </Link>
-        </section>
-        {/* Notion文章主体 */}
-        <section id="notion-article" className="px-1 max-w-5xl">
-            {post && (<NotionPage post={post} />)}
-        </section>
+                <Link href="/about" passHref legacyBehavior>
+                    <div className='flex pt-2'>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
 
-        <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
-            {/* 文章内嵌广告 */}
-            <ins
-                className="adsbygoogle"
-                style={{ display: 'block', textAlign: 'center' }}
-                data-adtest="on"
-                data-ad-layout="in-article"
-                data-ad-format="fluid"
-                data-ad-client="ca-pub-2708419466378217"
-                data-ad-slot="3806269138"
-            />
-        </section>
+                        <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
+                            {BLOG.AUTHOR}
+                        </div>
+                    </div>
+                </Link>
+            </section>
+            {/* Notion文章主体 */}
+            <section id="notion-article" className="px-1 max-w-5xl">
+                {post && (<NotionPage post={post} />)}
+            </section>
 
-        <section>
-            <div className='flex justify-between'>
-                {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} />)}
+            <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
+                {/* 文章内嵌广告 */}
+                <ins
+                    className="adsbygoogle"
+                    style={{ display: 'block', textAlign: 'center' }}
+                    data-adtest="on"
+                    data-ad-layout="in-article"
+                    data-ad-format="fluid"
+                    data-ad-client="ca-pub-2708419466378217"
+                    data-ad-slot="3806269138"
+                />
+            </section>
+
+            <section>
+                <div className='flex justify-between'>
+                    {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>
                 </div>
-            </div>
-            {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
-            <Comment frontMatter={post} />
-        </section>
-    </div>
+                {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+                <Comment frontMatter={post} />
+            </section>
+        </div>
+  );
 }

themes/medium/components/BlogPostCard.js

@@ -16,14 +16,15 @@ const BlogPostCard = ({ post, showSummary }) => {
       className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
     >
       <div className="lg:py-8 py-4 flex flex-col w-full">
-        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
-          <a
-            className={
-              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
-            }
-          >
-            {post.title}
-          </a>
+        <Link
+          href={`${BLOG.SUB_PATH}/${post.slug}`}
+          passHref
+          className={
+            'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
+          }>
+
+          {post.title}
+
         </Link>
 
         <div
@@ -54,11 +55,14 @@ const BlogPostCard = ({ post, showSummary }) => {
             <NotionPage post={post} />
             <div className="pointer-events-none border-t pt-8 border-dashed">
               <div className="w-full justify-start flex">
-                <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
-                  <a className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
-                    {locale.COMMON.ARTICLE_DETAIL}
-                    <i className="ml-1 fas fa-angle-right" />
-                  </a>
+                <Link
+                  href={`${BLOG.SUB_PATH}/${post.slug}`}
+                  passHref
+                  className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
+
+                  {locale.COMMON.ARTICLE_DETAIL}
+                  <i className="ml-1 fas fa-angle-right" />
+
                 </Link>
               </div>
             </div>
@@ -66,7 +70,7 @@ const BlogPostCard = ({ post, showSummary }) => {
         )}
       </div>
     </div>
-  )
+  );
 }
 
 export default BlogPostCard

themes/medium/components/BottomMenuBar.js

@@ -6,12 +6,12 @@ export default function BottomMenuBar ({ className }) {
   return (
     <div className={'sticky bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
       <div className='flex justify-between h-full shadow-card'>
-        <Link href='/' passHref>
+        <Link href='/' passHref legacyBehavior>
           <div className='flex w-full items-center justify-center cursor-pointer'>
             <i className='fas fa-home' />
           </div>
         </Link>
-        <Link href='/search' passHref>
+        <Link href='/search' passHref legacyBehavior>
           <div className='flex w-full items-center justify-center cursor-pointer'>
             <i className='fas fa-search'/>
           </div>
@@ -21,5 +21,5 @@ export default function BottomMenuBar ({ className }) {
         </div>
       </div>
     </div>
-  )
+  );
 }

themes/medium/components/CategoryItem.js

@@ -1,13 +1,18 @@
 import Link from 'next/link'
 
 export default function CategoryItem ({ selected, category, categoryCount }) {
-  return <Link href={`/category/${category}`} passHref>
-    <a className={(selected
-      ? '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'}>
+  return (
+    <Link
+      href={`/category/${category}`}
+      passHref
+      className={(selected
+        ? '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><i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category} {categoryCount && `(${categoryCount})`}
       </div>
-    </a>
-  </Link>
+
+    </Link>
+  );
 }

themes/medium/components/GroupMenu.js

@@ -20,24 +20,32 @@ function GroupMenu ({ customNav }) {
     links = links.concat(customNav)
   }
 
-  return <nav id='nav' className='font-sans text-md'>
-      {links.map(link => {
-        if (link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === 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 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
-              (selected ? 'text-black' : ' ')} >
-              <div className='my-auto items-center justify-center flex '>
-                <div className={ 'hover:text-black'}>{link.name}</div>
-              </div>
-              {link.slot}
-            </a>
-          </Link>
-        } else {
-          return null
-        }
-      })}
-    </nav>
+  return (
+    <nav id='nav' className='font-sans text-md'>
+        {links.map(link => {
+          if (link.show) {
+            const selected = (router.pathname === link.to) || (router.asPath === link.to)
+            return (
+              <Link
+                key={`${link.to}`}
+                title={link.to}
+                href={link.to}
+                className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                    (selected ? 'text-black' : ' ')}>
+
+                <div className='my-auto items-center justify-center flex '>
+                  <div className={ 'hover:text-black'}>{link.name}</div>
+                </div>
+                {link.slot}
+
+              </Link>
+            );
+          } else {
+            return null
+          }
+        })}
+      </nav>
+  );
 }
 
 export default GroupMenu

themes/medium/components/LeftMenuBar.js

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

themes/medium/components/LogoBar.js

@@ -2,9 +2,11 @@ import Link from 'next/link'
 
 export default function LogoBar (props) {
   const { siteInfo } = props
-  return <div id='top-wrapper' className='w-full flex items-center font-sans'>
-        <Link href='/'>
-          <a className='text-md md:text-xl dark:text-gray-200'>{siteInfo?.title}</a>
-        </Link>
-  </div>
+  return (
+    <div id='top-wrapper' className='w-full flex items-center font-sans'>
+          <Link href='/' className='text-md md:text-xl dark:text-gray-200'>
+            {siteInfo?.title}
+          </Link>
+    </div>
+  );
 }

themes/medium/components/PaginationSimple.js

@@ -27,15 +27,12 @@ const PaginationSimple = ({ page, totalPage }) => {
           query: router.query.s ? { s: router.query.s } : {}
         }}
         passHref
-      >
-        <a
-          rel="prev"
-          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>
+        rel="prev"
+        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}
+
       </Link>
       <Link
         href={{
@@ -43,18 +40,15 @@ const PaginationSimple = ({ page, totalPage }) => {
           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-green-500 border-b-2 hover:font-bold`}
-        >
-          {locale.PAGINATION.NEXT} →
-        </a>
+        rel="next"
+        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}→
       </Link>
     </div>
-  )
+  );
 }
 
 export default PaginationSimple

themes/medium/components/TagItemMini.js

@@ -1,15 +1,21 @@
 import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
-  return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
-    <a className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
-      mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
-       ${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 && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-    </a>
-  </Link>
+  return (
+    <Link
+      key={tag}
+      href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
+      passHref
+      className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
+        mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white
+         ${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 && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+
+    </Link>
+  );
 }
 
 export default TagItemMini

themes/medium/components/TopNavBar.js

@@ -32,46 +32,55 @@ export default function TopNavBar(props) {
     changeShow(!isOpen)
   }
 
-  return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-        {/* 折叠菜单 */}
-        <Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
-            <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-7 lg:hidden '>
-                <GroupMenu {...props} />
-            </div>
-        </Collapse>
-
-        <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
-
-            {/* 图标Logo */}
-            <LogoBar {...props} />
-
-            {/* 右侧功能 */}
-            <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                <div onClick={toggleMenuOpen} className='cursor-pointer'>
-                    {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+  return (
+      <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+            {/* 折叠菜单 */}
+            <Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
+                <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-7 lg:hidden '>
+                    <GroupMenu {...props} />
                 </div>
-            </div>
+            </Collapse>
+
+            <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+
+                {/* 图标Logo */}
+                <LogoBar {...props} />
+
+                {/* 右侧功能 */}
+                <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                    </div>
+                </div>
+
+                {/* 顶部菜单 */}
+                <div className='hidden md:flex'>
+                    {navs && navs.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}
+                                target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
+                                className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+                                    (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
 
-            {/* 顶部菜单 */}
-            <div className='hidden md:flex'>
-                {navs && navs.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 target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-                                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                                 <div className='items-center justify-center flex '>
                                     <i className={link.icon} />
                                     <div className='ml-2 whitespace-nowrap'>{link.name}</div>
                                 </div>
                                 {link.slot}
-                            </a>
-                        </Link>
-                  } else {
-                    return null
-                  }
-                })}
+
+                            </Link>
+                        );
+                      } else {
+                        return null
+                      }
+                    })}
+                </div>
             </div>
         </div>
-    </div>
+  );
 }