feat: change all Link component to SmartLink

Close #3512

themes/example/components/BlogItem.js

@@ -2,7 +2,7 @@ import LazyImage from '@/components/LazyImage'
 import NotionIcon from '@/components/NotionIcon'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 /**
@@ -20,14 +20,14 @@ const BlogItem = ({ post }) => {
       className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
       <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
         <h2 className='mb-4'>
-          <Link
+          <SmartLink
             href={post?.href}
             className='text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline'>
             {siteConfig('POST_TITLE_ICON') && (
               <NotionIcon icon={post.pageIcon} />
             )}
             {post?.title}
-          </Link>
+          </SmartLink>
         </h2>
 
         <div className='mb-4 text-sm text-gray-700 dark:text-gray-300'>
@@ -40,11 +40,11 @@ const BlogItem = ({ post }) => {
           {post.category && (
             <>
               <span className='font-bold mx-1'> | </span>
-              <Link
+              <SmartLink
                 href={`/category/${post.category}`}
                 className='text-gray-700 dark:text-gray-300 hover:underline'>
                 {post.category}
-              </Link>
+              </SmartLink>
             </>
           )}
           {/* <span className="font-bold mx-1"> | </span> */}
@@ -68,12 +68,12 @@ const BlogItem = ({ post }) => {
       {/* 图片封面 */}
       {showPageCover && (
         <div className='md:w-5/12 w-full h-44 overflow-hidden p-1'>
-          <Link href={post?.href} passHref legacyBehavior>
+          <SmartLink href={post?.href} passHref legacyBehavior>
             <LazyImage
               src={post?.pageCoverThumbnail}
               className='w-full bg-cover hover:scale-110 duration-200'
             />
-          </Link>
+          </SmartLink>
         </div>
       )}
     </article>

themes/example/components/BlogListArchive.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 博客归档列表；仅归档页面使用
@@ -21,11 +21,11 @@ export default function BlogListArchive({ archiveTitle, archivePosts }) {
               className='border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500'>
               <div id={post?.publishDay}>
                 <span className='text-gray-400'>{post?.publishDay}</span> &nbsp;
-                <Link
+                <SmartLink
                   href={post?.href}
                   className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>
                   {post.title}
-                </Link>
+                </SmartLink>
               </div>
             </li>
           )

themes/example/components/BlogListPage.js

@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useRouter } from 'next/router'
 import CONFIG from '../config'
 import BlogItem from './BlogItem'
@@ -37,7 +37,7 @@ export const BlogListPage = props => {
       </div>
 
       <div className='flex justify-between text-xs'>
-        <Link
+        <SmartLink
           href={{
             pathname:
               currentPage - 1 === 1
@@ -47,15 +47,15 @@ export const BlogListPage = props => {
           }}
           className={`${showPrev ? 'bg-black dark:bg-hexo-black-gray' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.PREV}
-        </Link>
-        <Link
+        </SmartLink>
+        <SmartLink
           href={{
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
           className={`${showNext ? 'bg-black dark:bg-hexo-black-gray ' : 'bg-gray pointer-events-none invisible'} text-white no-underline py-2 px-3 rounded`}>
           {locale.PAGINATION.NEXT}
-        </Link>
+        </SmartLink>
       </div>
     </div>
   )

themes/example/components/Header.js

@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { MenuList } from './MenuList'
 
 /**
@@ -11,11 +11,11 @@ export const Header = props => {
   return (
     <header className='w-full px-6 bg-white  dark:bg-black relative z-20'>
       <div className='mx-auto max-w-4xl md:flex justify-between items-center'>
-        <Link
+        <SmartLink
           href='/'
           className='logo py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center'>
           {siteConfig('TITLE')}
-        </Link>
+        </SmartLink>
         <div className='w-full md:w-auto text-center md:text-right'>
           {/* 右侧文字 */}
         </div>

themes/example/components/MenuItemDrop.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 
 /**
@@ -17,10 +17,10 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
         <div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
-          <Link href={link?.href} target={link?.target}>
+          <SmartLink href={link?.href} target={link?.target}>
             {link?.icon && <i className={link?.icon} />} {link?.name}
             {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-          </Link>
+          </SmartLink>
         </div>
       )}
 
@@ -41,12 +41,12 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-                <Link href={sLink.href} target={link?.target}>
+                <SmartLink href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap font-extralight'>
                     {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
                   </span>
-                </Link>
+                </SmartLink>
               </li>
             )
           })}

themes/example/components/PostMeta.js

@@ -1,6 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import { formatDateFmt } from '@/lib/utils/formatDate'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 /**
  * 文章详情的元信息
  * 标题、作者、分类、标签、创建日期等等。
@@ -14,25 +14,25 @@ export const PostMeta = props => {
       <div>
         {post?.type !== 'Page' && (
           <>
-            <Link
+            <SmartLink
               href={`/category/${post?.category}`}
               passHref
               className='cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed'>
               <i className='mr-1 fas fa-folder-open' />
               {post?.category}
-            </Link>
+            </SmartLink>
             <span className='mr-2'>|</span>
           </>
         )}
 
         {post?.type !== 'Page' && (
           <>
-            <Link
+            <SmartLink
               href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}
               passHref
               className='pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed'>
               {post?.publishDay}
-            </Link>
+            </SmartLink>
             <span className='mr-2'>|</span>
             <span className='mx-2 text-gray-400 dark:text-gray-500'>
               {locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedDay}

themes/example/components/RecentCommentListForExample.js

@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { RecentComments } from '@waline/client'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useEffect, useState } from 'react'
 
 /**
@@ -44,14 +44,14 @@ const RecentCommentListForExample = props => {
               dangerouslySetInnerHTML={{ __html: comment.comment }}
             />
             <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'>
-              <Link
+              <SmartLink
                 href={{
                   pathname: comment.url,
                   hash: comment.objectId,
                   query: { target: 'comment' }
                 }}>
                 --{comment.nick}
-              </Link>
+              </SmartLink>
             </div>
           </div>
         ))}

themes/example/components/SideBar.js

@@ -2,7 +2,7 @@ import Live2D from '@/components/Live2D'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import dynamic from 'next/dynamic'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 import Announcement from './Announcement'
 import Catalog from './Catalog'
@@ -53,7 +53,7 @@ export const SideBar = props => {
           <ul className='list-reset leading-normal'>
             {categoryOptions?.map(category => {
               return (
-                <Link
+                <SmartLink
                   key={category.name}
                   href={`/category/${category.name}`}
                   passHref
@@ -66,7 +66,7 @@ export const SideBar = props => {
                       {category.name}({category.count})
                     </a>
                   </li>
-                </Link>
+                </SmartLink>
               )
             })}
           </ul>
@@ -83,7 +83,7 @@ export const SideBar = props => {
           <ul className='list-reset leading-normal'>
             {latestPosts?.map(p => {
               return (
-                <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
+                <SmartLink key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
                   <li>
                     {' '}
                     <a
@@ -92,7 +92,7 @@ export const SideBar = props => {
                       {p.title}
                     </a>
                   </li>
-                </Link>
+                </SmartLink>
               )
             })}
           </ul>