feat: change all Link component to SmartLink

Close #3512

themes/simple/components/ArticleAround.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 上一篇，下一篇文章
@@ -11,22 +11,22 @@ export default function ArticleAround({ prev, next }) {
   }
   return (
         <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
-            {prev && <Link
+            {prev && <SmartLink
                 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}
 
-            </Link>}
-            {next && <Link
+            </SmartLink>}
+            {next && <SmartLink
                 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' />
 
-            </Link>}
+            </SmartLink>}
         </section>
   )
 }

themes/simple/components/ArticleInfo.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
@@ -28,17 +28,17 @@ export default function ArticleInfo (props) {
                         <span> <i className="fa-regular fa-user"></i> <a href={siteConfig('SIMPLE_AUTHOR_LINK', null, CONFIG)}>{siteConfig('AUTHOR')}</a></span>
                         <span> <i className="fa-regular fa-clock"></i> {post?.publishDay}</span>
                         {post?.category && <span>  <i className="fa-regular fa-folder"></i> <a href={`/category/${post?.category}`} className="hover:text-red-400 transition-all duration-200">{post?.category}</a></span>}
-                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <Link href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
+                        {post?.tags && post?.tags?.length > 0 && post?.tags.map(t => <span key={t}> / <SmartLink href={`/tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></SmartLink></span>)}
                     </div>)}
 
                 {post?.type !== 'Page' && (<div className=''>
                     <span>{locale.COMMON.POST_TIME}:
-                        <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>
                     <span className='mr-2'>|</span>
                     <span className='mx-2  dark:text-gray-500'>

themes/simple/components/BlogArchiveItem.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 归档分组文章
@@ -21,12 +21,12 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
               <div id={post?.publishDay}>
                 <span className='text-gray-400'>{post.date?.start_date}</span>{' '}
                 &nbsp;
-                <Link
+                <SmartLink
                   href={post?.href}
                   passHref
                   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/simple/components/BlogItem.js

@@ -5,7 +5,7 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { formatDateFmt } from '@/lib/utils/formatDate'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 export const BlogItem = props => {
@@ -26,26 +26,26 @@ export const BlogItem = props => {
           {/* 图片封面 */}
           {showPageCover && (
             <div className='overflow-hidden mr-2 w-56 h-full'>
-              <Link href={post.href} passHref legacyBehavior>
+              <SmartLink href={post.href} passHref legacyBehavior>
                 <LazyImage
                   src={post?.pageCoverThumbnail}
                   className='w-56 h-full object-cover object-center group-hover:scale-110 duration-500'
                 />
-              </Link>
+              </SmartLink>
             </div>
           )}
         </div>
 
         <article className='article-info'>
           <h2 className='mb-2'>
-            <Link
+            <SmartLink
               href={post.href}
               className='blog-item-title font-bold text-black text-2xl menu-link'>
               {siteConfig('POST_TITLE_ICON') && (
                 <NotionIcon icon={post.pageIcon} />
               )}
               {post.title}
-            </Link>
+            </SmartLink>
           </h2>
 
           {/* 文章信息 */}
@@ -60,12 +60,12 @@ export const BlogItem = props => {
                 </a>
               </span>
               <span>
-                <Link
+                <SmartLink
                   className='p-1 hover:text-red-400 transition-all duration-200'
                   href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
                   <i className='fa-regular fa-clock' />{' '}
                   {post.date?.start_date || post.createdTime}
-                </Link>
+                </SmartLink>
               </span>
               <span>
                 <TwikooCommentCount post={post} />
@@ -74,23 +74,23 @@ export const BlogItem = props => {
 
             <div>
               {post.category && (
-                <Link href={`/category/${post.category}`} className='p-1'>
+                <SmartLink href={`/category/${post.category}`} className='p-1'>
                   {' '}
                   <span className='hover:text-red-400 transition-all duration-200'>
                     <i className='fa-regular fa-folder mr-0.5' />
                     {post.category}
                   </span>
-                </Link>
+                </SmartLink>
               )}
               {post?.tags &&
                 post?.tags?.length > 0 &&
                 post?.tags.map(t => (
-                  <Link
+                  <SmartLink
                     key={t}
                     href={`/tag/${t}`}
                     className=' hover:text-red-400 transition-all duration-200'>
                     <span> /{t}</span>
-                  </Link>
+                  </SmartLink>
                 ))}
             </div>
           </header>
@@ -113,12 +113,12 @@ export const BlogItem = props => {
       </div>
 
       <div className='block'>
-        <Link
+        <SmartLink
           href={post.href}
           className='inline-block rounded-sm text-blue-600 dark:text-blue-300  text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
           Continue Reading{' '}
           <i className='fa-solid fa-angle-right align-middle'></i>
-        </Link>
+        </SmartLink>
       </div>
     </div>
   )

themes/simple/components/BlogListPage.js

@@ -1,7 +1,7 @@
 import { AdSlot } from '@/components/GoogleAdsense'
 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'
@@ -49,7 +49,7 @@ export default function BlogListPage(props) {
       </div>
 
       <div className='flex justify-between text-xs mt-1'>
-        <Link
+        <SmartLink
           href={{
             pathname:
               currentPage - 1 === 1
@@ -59,15 +59,15 @@ export default function BlogListPage(props) {
           }}
           className={`${showPrev ? 'text-blue-600 border-b border-blue-400 visible ' : ' invisible bg-gray pointer-events-none '} no-underline pb-1 px-3`}>
           NEWER POSTS <i className='fa-solid fa-arrow-left'></i>
-        </Link>
-        <Link
+        </SmartLink>
+        <SmartLink
           href={{
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
           }}
           className={`${showNext ? 'text-blue-600 border-b border-blue-400 visible' : ' invisible bg-gray pointer-events-none '} no-underline pb-1 px-3`}>
           OLDER POSTS <i className='fa-solid fa-arrow-right'></i>
-        </Link>
+        </SmartLink>
       </div>
     </div>
   )

themes/simple/components/ExampleRecentComments.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { RecentComments } from '@waline/client'
 import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
@@ -26,7 +26,7 @@ const ExampleRecentComments = (props) => {
         {!onLoading && comments && comments.length === 0 && <div>No Comments</div>}
         {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2'>
             <div className='dark:text-gray-300 text-gray-600 text-xs waline-recent-content wl-content' 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 href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
+            <div className='dark:text-gray-400 text-gray-400  text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><SmartLink href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</SmartLink></div>
         </div>)}
 
   </>

themes/simple/components/Header.js

@@ -1,6 +1,6 @@
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 import SocialButton from './SocialButton'
 
@@ -14,7 +14,7 @@ export default function Header(props) {
   return (
     <header className='text-center justify-between items-center px-6 bg-white h-80 dark:bg-black relative z-10'>
       <div className='float-none inline-block py-12'>
-        <Link href='/'>
+        <SmartLink href='/'>
           {/* 可使用一张单图作为logo */}
           <div className='flex space-x-6 justify-center'>
             <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer justify-center items-center flex'>
@@ -40,7 +40,7 @@ export default function Header(props) {
               />
             </div>
           </div>
-        </Link>
+        </SmartLink>
 
         <div className='flex justify-center'>
           <SocialButton />

themes/simple/components/MenuItemCollapse.js

@@ -1,5 +1,5 @@
 import Collapse from '@/components/Collapse'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 
 /**
@@ -32,7 +32,7 @@ export const MenuItemCollapse = props => {
         className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black'
         onClick={toggleShow}>
         {!hasSubMenu && (
-          <Link
+          <SmartLink
             href={link?.href}
             target={link?.target}
             className='items-center flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
@@ -44,7 +44,7 @@ export const MenuItemCollapse = props => {
               )}
               {link?.name}
             </span>
-          </Link>
+          </SmartLink>
         )}
         {hasSubMenu && (
           <div
@@ -72,7 +72,7 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='dark:bg-black text-left px-10 justify-start text-blue-600 dark:text-blue-300 bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800 py-3 pr-6'>
-                <Link href={sLink.href} target={link?.target}>
+                <SmartLink href={sLink.href} target={link?.target}>
                   <span className='ml-4 text-sm'>
                     {sLink?.icon && (
                       <span className='mr-2 w-4'>
@@ -81,7 +81,7 @@ export const MenuItemCollapse = props => {
                     )}
                     {sLink.title}
                   </span>
-                </Link>
+                </SmartLink>
               </div>
             )
           })}

themes/simple/components/MenuItemDrop.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 
 export const MenuItemDrop = ({ link }) => {
@@ -14,7 +14,7 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOver={() => changeShow(true)}
       onMouseOut={() => changeShow(false)}>
       {!hasSubMenu && (
-        <Link
+        <SmartLink
           href={link?.href}
           target={link?.target}
           className=' menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
@@ -25,7 +25,7 @@ export const MenuItemDrop = ({ link }) => {
           )}
           {link?.name}
           {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-        </Link>
+        </SmartLink>
       )}
 
       {hasSubMenu && (
@@ -52,12 +52,12 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='not:last-child:border-b-0 border-b text-blue-600 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800  py-3 pr-6 pl-2'>
-                <Link href={sLink.href} target={link?.target}>
+                <SmartLink href={sLink.href} target={link?.target}>
                   <span className='text-sm text-nowrap'>
                     {sLink?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                     {sLink.title}
                   </span>
-                </Link>
+                </SmartLink>
               </li>
             )
           })}

themes/simple/components/RecommendPosts.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useGlobal } from '@/lib/global'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
@@ -18,11 +18,11 @@ const RecommendPosts = ({ recommendPosts }) => {
         <ul className="font-light text-sm">
           {recommendPosts.map(post => (
             <li className="py-1" key={post.id}>
-              <Link href={`/${post.slug}`} className="cursor-pointer hover:underline">
+              <SmartLink href={`/${post.slug}`} className="cursor-pointer hover:underline">
 
                 {post.title}
 
-              </Link>
+              </SmartLink>
             </li>
           ))}
         </ul>