feat: change all Link component to SmartLink

Close #3512

themes/typography/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/typography/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,33 +28,33 @@ export default function ArticleInfo(props) {
             <div className='space-x-2'>
               <span className='text-sm'>
                 发布于
-                <Link
+                <SmartLink
                   className='p-1 hover:text-red-400 transition-all duration-200'
                   href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
                   {post.date?.start_date || post.createdTime}
-                </Link>
+                </SmartLink>
               </span>
             </div>
 
             <div className='text-sm'>
               {/* {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>

themes/typography/components/BlogArchiveItem.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 归档分组文章
@@ -19,12 +19,12 @@ export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
               key={post.id}
               className='p-1 pl-0 text-base items-center mb-3'>
               <div id={post?.publishDay} className='flex justify-between'>
-                <Link
+                <SmartLink
                   href={post?.href}
                   passHref
                   className='dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden cursor-pointer text-[#111827] font-bold'>
                   {post.title}
-                </Link>
+                </SmartLink>
                 <span className='text-gray-400'>{post.date?.start_date}</span>
               </div>
             </li>

themes/typography/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 => {
@@ -23,26 +23,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='text-xl underline decoration-2 font-bold text-[var(--primary-color)] dark:text-white dark:hover:bg-white dark:hover:text-[var(--primary-color)]  duration-200 transition-all rounded-sm'>
               {siteConfig('POST_TITLE_ICON') && (
                 <NotionIcon icon={post.pageIcon} />
               )}
               {post.title}
-            </Link>
+            </SmartLink>
           </h2>
 
           {/* 文章信息 */}
@@ -50,33 +50,33 @@ export const BlogItem = props => {
             <div className='space-x-2'>
               <span className='text-sm'>
                 发布于
-                <Link
+                <SmartLink
                   className='p-1 hover:text-red-400 transition-all duration-200'
                   href={`/archive#${formatDateFmt(post?.publishDate, 'yyyy-MM')}`}>
                   {post.date?.start_date || post.createdTime}
-                </Link>
+                </SmartLink>
               </span>
             </div>
 
             <div className='text-sm'>
               {/* {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>

themes/typography/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/typography/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/typography/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/typography/components/MenuItemDrop.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
@@ -18,12 +18,12 @@ export const MenuItemDrop = ({ link }) => {
   return (
     <div className='menu-item'>
       {!hasSubMenu && (
-        <Link
+        <SmartLink
           href={link?.href}
           target={link?.target}
           className='dark:hover:text-[var(--primary-color)] dark:hover:bg-white menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)]  dark:text-gray-200 tracking-widest pb-1 font-bold'>
           {link?.name}
-        </Link>
+        </SmartLink>
       )
       }
 
@@ -57,12 +57,12 @@ export const MenuItemDrop = ({ link }) => {
                   <li
                     key={index}
                     className='dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 pb-3'>
-                    <Link href={sLink.href} target={link?.target}>
+                    <SmartLink href={sLink.href} target={link?.target}>
                       <span className='dark:hover:text-[var(--primary-color)] dark:hover:bg-white menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)]  dark:text-gray-200 tracking-widest pb-1 font-bold'>
                         {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
                         {sLink.title}
                       </span>
-                    </Link>
+                    </SmartLink>
                   </li>
                 )
               })}

themes/typography/components/NavBar.js

@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useSimpleGlobal } from '..'
 import { MenuList } from './MenuList'
 import SocialButton from './SocialButton'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 菜单导航
@@ -15,7 +15,7 @@ export default function NavBar(props) {
   return (
     <div className='flex flex-col justify-between md:mt-20 md:h-[70vh]'>
       <header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 dark:md:border-white dark:text-white md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] dark:hover:bg-white hover:text-white dark:hover:text-[var(--primary-color)] ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4 mb-2'>
-        <Link href='/'>
+        <SmartLink href='/'>
           <div className='flex flex-col-reverse md:flex-col items-center md:items-start'>
             <div className='font-bold text-4xl text-center' id='blog-name'>
               {siteConfig('TYPOGRAPHY_BLOG_NAME')}
@@ -24,7 +24,7 @@ export default function NavBar(props) {
               {siteConfig('TYPOGRAPHY_BLOG_NAME_EN')}
             </div>
           </div>
-        </Link>
+        </SmartLink>
       </header>
       <nav className='md:pt-0  z-20   flex-shrink-0'>
         <div id='nav-bar-inner' className='text-sm md:text-md'>

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