Link内嵌改为a标签

components/BlogAround.js

@@ -10,14 +10,14 @@ import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-s
 export default function BlogAround ({ prev, next }) {
   return <section className='text-gray-800 mb-8 lg:mb-32 border-t dark:text-gray-300 px-5 flex flex-wrap lg:flex-nowrap lg:space-x-10 justify-between py-2'>
     <Link href={`/article/${prev.slug}`} passHref>
-      <div className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
+      <a className='text-sm py-3 text-blue-500 hover:underline cursor-pointer'>
         <FontAwesomeIcon icon={faAngleDoubleLeft} className='mr-1' />{prev.title}
-        </div>
+      </a>
     </Link>
     <Link href={`/article/${next.slug}`} passHref>
-      <div className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
+      <a className='text-sm flex py-3 text-blue-500 hover:underline cursor-pointer'>{next.title}
         <FontAwesomeIcon icon={faAngleDoubleRight} className='ml-1 my-1' />
-      </div>
+      </a>
     </Link>
   </section>
 }

components/BlogPostCard.js

@@ -19,20 +19,20 @@ const BlogPostCard = ({ post, tags }) => {
       <div className='p-8 col-span-3'>
         <div>
           <Link href={`/category/${post.category}`} passHref>
-            <span className='cursor-pointer dark:text-gray-200  font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
+            <a className='cursor-pointer dark:text-gray-200  font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
               <FontAwesomeIcon icon={faFolder} className='mr-1' />{post.category}
-            </span>
+            </a>
           </Link>
           <span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>
           <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-            <span className='mt-2  font-light text-gray-500 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
+            <a className='mt-2  font-light text-gray-500 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</a>
           </Link>
         </div>
 
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <p className='cursor-pointer my-3 text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
+          <a className='cursor-pointer my-3 text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
             {post.title}
-          </p>
+          </a>
         </Link>
 
         <p className='mt-2 text-gray-600 dark:text-gray-300 text-sm font-light'>{post.summary}</p>

components/CategoryGroup.js

@@ -5,15 +5,16 @@ import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   return <div className='mt-3'>
-    <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
+    <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900 flex flex-wrap'>
       {Object.keys(categories).map(category => {
         const selected = currentCategory === category
         return <Link key={category} href={`/category/${category}`} passHref>
-          <div className={(selected
+          <a className={(selected
             ? 'bg-gray-200 dark:bg-black text-black dark:text-white'
             : 'dark:text-gray-400 text-gray-500') +
             ' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer pt-2 font-light'}>
-            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})</div>
+            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
+            </a>
         </Link>
       })}
     </div>

components/LatestPostsGroup.js

@@ -31,7 +31,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex font-light justify-between'}>
+            <a className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex font-light justify-between'}>
               <div className={ 'text-xs py-1 flex w-40 overflow-x-hidden whitespace-nowrap overflow-hidden ' +
                 'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
                   (selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
@@ -41,7 +41,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
               <div className='text-gray-500 text-xs py-1'>
                 {formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
               </div>
-            </div>
+            </a>
           </Link>
         )
       })}

components/SideBar.js

@@ -54,9 +54,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
           <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
             <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
-              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+              <a className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
-              </div>
+              </a>
             </Link>
           </div>
           <CategoryGroup currentCategory={currentCategory} categories={categories} />
@@ -69,9 +69,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
           <div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
             <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
-              <div className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+              <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
                 {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
-              </div>
+              </a>
             </Link>
           </div>
           <div className='px-5 pt-2'>

components/TagItemMini.js

@@ -4,13 +4,13 @@ import Link from 'next/link'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return <Link key={tag} href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`} passHref>
-    <div className={`cursor-pointer inline-block rounded hover:bg-blue-500 hover:text-white duration-200
+    <a className={`cursor-pointer inline-block rounded hover:bg-blue-500 hover:text-white duration-200
       mr-2 my-1 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 dark:text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background `}` }>
     <div>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
-    </div>
+    </a>
   </Link>
 }
 

pages/article/[slug].js

@@ -67,15 +67,15 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
           <hr className='mt-4' />
           <section className='flex-nowrap flex  mt-1 dark:text-white font-light'>
             <Link href={`/category/${post.category}`} passHref>
-              <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
+              <a className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
                 <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
-              </div>
+              </a>
             </Link>
             {post.type[0] !== 'Page' && (
               <Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
-                <div className='pl-1 cursor-pointer hover:text-gray-700  dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10'>
+                <a className='pl-1 cursor-pointer hover:text-gray-700  dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10'>
                 {date}
-                </div>
+                </a>
               </Link>
             )}