feat: change all Link component to SmartLink

Close #3512

themes/commerce/components/ArticleAdjacent.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 /**
@@ -12,22 +12,22 @@ export default function ArticleAdjacent ({ prev, next }) {
   }
   return (
     <section className='pt-8 text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
-      <Link
+      <SmartLink
         href={`/${prev.slug}`}
         passHref
         className='py-1  cursor-pointer hover:underline justify-start items-center dark:text-white flex w-full h-full duration-200'>
 
         <i className='mr-1 fas fa-angle-left' />{prev.title}
 
-      </Link>
-      <Link
+      </SmartLink>
+      <SmartLink
         href={`/${next.slug}`}
         passHref
         className='py-1 cursor-pointer hover:underline justify-end items-center dark:text-white flex w-full h-full duration-200'>
         {next.title}
         <i className='ml-1 my-1 fas fa-angle-right' />
 
-      </Link>
+      </SmartLink>
     </section>
   )
 }

themes/commerce/components/ArticleCopyright.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
@@ -24,9 +24,9 @@ export default function ArticleCopyright() {
       <ul className='overflow-x-auto whitespace-nowrap text-sm dark:bg-gray-900 bg-gray-100 p-5 leading-8 border-l-2 border-red-500'>
         <li>
           <strong className='mr-2'>{locale.COMMON.AUTHOR}:</strong>
-          <Link href={'/about'} className='hover:underline'>
+          <SmartLink href={'/about'} className='hover:underline'>
             {siteConfig('AUTHOR')}
-          </Link>
+          </SmartLink>
         </li>
         <li>
           <strong className='mr-2'>{locale.COMMON.URL}:</strong>

themes/commerce/components/ArticleRecommend.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
@@ -35,7 +35,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                     : siteInfo?.pageCover
 
                   return (
-                    (<Link
+                    (<SmartLink
                             key={post.id}
                             title={post.title}
                             href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
@@ -51,7 +51,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                                 <LazyImage src={headerImage} className='absolute top-0 w-full h-full object-cover object-center group-hover:scale-110 group-hover:brightness-50 transform duration-200' />
                             </div>
 
-                        </Link>)
+                        </SmartLink>)
                   )
                 })}
             </div>

themes/commerce/components/BlogPostArchive.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { siteConfig } from '@/lib/config'
 
 /**
@@ -29,14 +29,14 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
               <div id={post?.publishDay}>
                 <span className="text-gray-400">{post.date?.start_date}</span>{' '}
                 &nbsp;
-                <Link
+                <SmartLink
                   href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
                   passHref
                   className="dark:text-gray-400  dark:hover:text-red-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
 
                   {post.title}
 
-                </Link>
+                </SmartLink>
               </div>
             </li>
           ))}

themes/commerce/components/BlogPostCardInfo.js

@@ -1,5 +1,5 @@
 import NotionPage from '@/components/NotionPage'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import TagItemMini from './TagItemMini'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
 import { siteConfig } from '@/lib/config'
@@ -14,7 +14,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
   return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
        <div>
          {/* 标题 */}
-         <Link
+         <SmartLink
             href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
             passHref
             className={`line-clamp-2 replace cursor-pointer text-2xl ${showPreview ? 'text-center' : ''
@@ -22,14 +22,14 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
 
             <span className='menu-link '>{post.title}</span>
 
-        </Link>
+        </SmartLink>
 
         {/* 分类 */}
         { post?.category && <div
             className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
                 } flex-wrap dark:text-gray-500 text-gray-400 `}
         >
-            <Link
+            <SmartLink
                 href={`/category/${post.category}`}
                 passHref
                 className="cursor-pointer font-light text-sm menu-link hover:text-red-700 dark:hover:text-red-400 transform">
@@ -37,7 +37,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
                 <i className="mr-1 far fa-folder" />
                 {post.category}
 
-            </Link>
+            </SmartLink>
 
             <TwikooCommentCount className='text-sm hover:text-red-700 dark:hover:text-red-400' post={post}/>
         </div>}
@@ -70,7 +70,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
          {/* 日期标签 */}
          <div className="text-gray-400 justify-between flex">
             {/* 日期 */}
-            <Link
+            <SmartLink
                 href={`/archive#${formatDate(post?.publishDate, 'yyyy-MM')}`}
                 passHref
                 className="font-light menu-link cursor-pointer text-sm leading-4 mr-3">
@@ -78,7 +78,7 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
                 <i className="far fa-calendar-alt mr-1" />
                 {post?.publishDay || post.lastEditedDay}
 
-            </Link>
+            </SmartLink>
 
             <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
                 <div>

themes/commerce/components/CategoryGroup.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   if (!categories) {
@@ -9,7 +9,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
       {categories.map(category => {
         const selected = currentCategory === category.name
         return (
-          <Link
+          <SmartLink
             key={category.name}
             href={`/category/${category.name}`}
             passHref
@@ -20,7 +20,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
 
             <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
 
-          </Link>
+          </SmartLink>
         );
       })}
     </div>

themes/commerce/components/Footer.js

@@ -2,7 +2,7 @@ import { BeiAnGongAn } from '@/components/BeiAnGongAn'
 import BeiAnSite from '@/components/BeiAnSite'
 import CopyRightDate from '@/components/CopyRightDate'
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 /**
@@ -40,13 +40,13 @@ const Footer = props => {
                 className={'flex flex-col space-y-2 text-start'}>
                 {categoryOptions?.map(category => {
                   return (
-                    <Link
+                    <SmartLink
                       key={`${category.name}`}
                       title={`${category.name}`}
                       href={`/category/${category.name}`}
                       passHref>
                       {category.name}
-                    </Link>
+                    </SmartLink>
                   )
                 })}
               </nav>
@@ -62,13 +62,13 @@ const Footer = props => {
                 className={'flex flex-col space-y-2 text-start'}>
                 {customMenu?.map(menu => {
                   return (
-                    <Link
+                    <SmartLink
                       key={`${menu.name}`}
                       title={`${menu.name}`}
                       href={`${menu.href}`}
                       passHref>
                       {menu.name}
-                    </Link>
+                    </SmartLink>
                   )
                 })}
               </nav>

themes/commerce/components/HexoRecentComments.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
 import Card from '@/themes/hexo/components/Card'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { RecentComments } from '@waline/client'
 
 /**
@@ -36,7 +36,7 @@ const HexoRecentComments = (props) => {
             {!onLoading && comments && comments.length > 0 && comments.map((comment) => <div key={comment.objectId} className='pb-2 pl-1'>
                 <div className='dark:text-gray-200 text-sm 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 pr-2'>
-                    <Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link>
+                    <SmartLink href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</SmartLink>
                 </div>
             </div>)}
 

themes/commerce/components/LatestPostsGroup.js

@@ -2,7 +2,7 @@ import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
 import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useRouter } from 'next/router'
 
 /**
@@ -33,7 +33,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
           const headerImage = post?.pageCoverThumbnail ? post.pageCoverThumbnail : siteInfo?.pageCover
 
           return (
-            (<Link
+            (<SmartLink
                     key={post.id}
                     title={post.title}
                     href={`${siteConfig('SUB_PATH', '')}/${post.slug}`}
@@ -56,7 +56,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                         </div>
                     </div>
 
-                </Link>)
+                </SmartLink>)
           )
         })}
     </>

themes/commerce/components/LogoBar.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 // import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage';
 
@@ -11,9 +11,9 @@ export default function LogoBar (props) {
   const { siteInfo } = props
   return (
     <div id='top-wrapper' className='w-full flex items-center'>
-          <Link href='/' className='text-md md:text-xl dark:text-gray-200 r'>
+          <SmartLink href='/' className='text-md md:text-xl dark:text-gray-200 r'>
             <LazyImage className='h-12 mr-3' src={siteInfo?.icon}/>
-          </Link>
+          </SmartLink>
           {/* <div>{siteConfig('TITLE')}</div> */}
     </div>
   );

themes/commerce/components/MenuGroupCard.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 const MenuGroupCard = props => {
@@ -45,7 +45,7 @@ const MenuGroupCard = props => {
       {links.map(link => {
         if (link.show) {
           return (
-            <Link
+            <SmartLink
               key={`${link.slug}`}
               title={link.name}
               href={link.href}
@@ -57,7 +57,7 @@ const MenuGroupCard = props => {
                 <div className='text-center'>{link.name}</div>
                 <div className='text-center font-semibold'>{link.slot}</div>
               </div>
-            </Link>
+            </SmartLink>
           )
         } else {
           return null

themes/commerce/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 dark:bg-hexo-black-gray'
         onClick={toggleShow}>
         {!hasSubMenu && (
-          <Link
+          <SmartLink
             href={link?.href}
             target={link?.target}
             className='hover:text-[#D2232A] font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
@@ -40,7 +40,7 @@ export const MenuItemCollapse = props => {
               {link?.icon && <i className={link.icon + ' mr-4'} />}
               {link?.name}
             </span>
-          </Link>
+          </SmartLink>
         )}
         {hasSubMenu && (
           <div
@@ -64,12 +64,12 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
-                <Link href={sLink.href} target={link?.target}>
+                <SmartLink href={sLink.href} target={link?.target}>
                   <span className='text-sm ml-4 whitespace-nowrap'>
                     {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
                     {sLink.title}
                   </span>
-                </Link>
+                </SmartLink>
               </div>
             )
           })}

themes/commerce/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'
 
@@ -22,13 +22,13 @@ export const MenuItemDrop = ({ link }) => {
       onMouseOut={() => changeShow(false)}
       className='h-full'>
       {!hasSubMenu && (
-        <Link
+        <SmartLink
           href={link?.href}
           target={link?.target}
           className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1`}>
           {link?.icon && <i className={link?.icon} />} <div>{link?.name}</div>
           {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
-        </Link>
+        </SmartLink>
       )}
 
       {hasSubMenu && (
@@ -50,12 +50,12 @@ export const MenuItemDrop = ({ link }) => {
               <li
                 key={index}
                 className='cursor-pointer hover:bg-red-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 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/commerce/components/NavButtonGroup.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 首页导航大按钮组件
@@ -15,14 +15,14 @@ const NavButtonGroup = (props) => {
     <nav id='home-nav-button' className={'w-full z-10 md:h-72 md:mt-6 xl:mt-32 px-5 py-2 mt-8 flex flex-wrap md:max-w-6xl space-y-2 md:space-y-0 md:flex justify-center max-h-80 overflow-auto'}>
       {categoryOptions?.map(category => {
         return (
-          <Link
+          <SmartLink
             key={`${category.name}`}
             title={`${category.name}`}
             href={`/category/${category.name}`}
             passHref
             className='text-center shadow-text w-full sm:w-4/5 md:mx-6 md:w-40 md:h-14 lg:h-20 h-14 justify-center items-center flex border-2 cursor-pointer rounded-lg glassmorphism hover:bg-white hover:text-black duration-200 hover:scale-105 transform'>
                {category.name}
-            </Link>
+            </SmartLink>
         )
       })}
     </nav>

themes/commerce/components/PaginationNumber.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useRouter } from 'next/router'
 
 /**
@@ -18,7 +18,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   return (
     <div className="mt-10 mb-5  flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
         {/* 上一页 */}
-        <Link
+        <SmartLink
           href={{
             pathname: currentPage === 2
               ? `${pagePrefix}/`
@@ -30,12 +30,12 @@ const PaginationNumber = ({ page, totalPage }) => {
 
           <i className="fas fa-angle-left" />
 
-        </Link>
+        </SmartLink>
 
         {pages}
 
         {/* 下一页 */}
-        <Link
+        <SmartLink
           href={{
             pathname: `${pagePrefix}/page/${currentPage + 1}`,
             query: router.query.s ? { s: router.query.s } : {}
@@ -45,14 +45,14 @@ const PaginationNumber = ({ page, totalPage }) => {
 
           <i className="fas fa-angle-right" />
 
-        </Link>
+        </SmartLink>
     </div>
   )
 }
 
 function getPageElement(page, currentPage, pagePrefix) {
   return (
-    (<Link
+    (<SmartLink
       href={page === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${page}`}
       key={page}
       passHref
@@ -65,7 +65,7 @@ function getPageElement(page, currentPage, pagePrefix) {
 
       {page}
 
-    </Link>)
+    </SmartLink>)
   )
 }
 

themes/commerce/components/PostHeader.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import NotionIcon from '@/components/NotionIcon'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
@@ -19,11 +19,11 @@ export default function PostHeader({ post }) {
         <div className='mt-10'>
             <div className='mb-3 flex justify-center'>
               {post.category && <>
-                <Link href={`/category/${post.category}`} passHref legacyBehavior>
+                <SmartLink href={`/category/${post.category}`} passHref legacyBehavior>
                   <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium hover:underline duration-200 shadow-text-md text-white">
                     {post.category}
                   </div>
-                </Link>
+                </SmartLink>
               </>}
             </div>
 

themes/commerce/components/ProductCard.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 import { siteConfig } from '@/lib/config'
 import LazyImage from '@/components/LazyImage'
@@ -19,11 +19,11 @@ const ProductCard = ({ index, post, siteInfo }) => {
             <div key={post.id} className={'group flex flex-col space-y-2 justify-between  border dark:border-black bg-white dark:bg-hexo-black-gray'}>
 
                 {/* 图片封面 */}
-                <Link href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
+                <SmartLink href={`${siteConfig('SUB_PATH', '')}/${post.slug}`} passHref legacyBehavior>
                     <div className="overflow-hidden m-2">
                         <LazyImage priority={index === 1} src={post?.pageCoverThumbnail} className='h-auto aspect-square w-full object-cover object-center group-hover:scale-110 duration-500' />
                     </div>
-                </Link>
+                </SmartLink>
 
                 <div className='text-center'>{post.title}</div>
 

themes/commerce/components/ProductCategories.js

@@ -1,5 +1,5 @@
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import CONFIG from '../config'
 
 export default function ProductCategories(props) {
@@ -21,14 +21,14 @@ export default function ProductCategories(props) {
           className={'flex flex-col space-y-2 text-start'}>
           {categoryOptions?.map(category => {
             return (
-              <Link
+              <SmartLink
                 key={`${category.name}`}
                 title={`${category.name}`}
                 href={`/category/${category.name}`}
                 className='hover:text-[#D2232A]'
                 passHref>
                 {category.name}
-              </Link>
+              </SmartLink>
             )
           })}
         </nav>

themes/commerce/components/SearchNav.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useEffect, useRef } from 'react'
 import Card from './Card'
 import SearchInput from './SearchInput'
@@ -31,7 +31,7 @@ export default function SearchNav(props) {
             <div id="category-list" className="duration-200 flex flex-wrap mx-8">
                 {categoryOptions?.map(category => {
                   return (
-                      <Link
+                      <SmartLink
                           key={category.name}
                           href={`/category/${category.name}`}
                           passHref
@@ -44,7 +44,7 @@ export default function SearchNav(props) {
                               <i className="mr-4 fas fa-folder" />
                               {category.name}({category.count})
                           </div>
-                      </Link>
+                      </SmartLink>
                   )
                 })}
             </div>

themes/commerce/components/SlotBar.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /**
  * 博客列表上方嵌入条
@@ -10,10 +10,10 @@ export default function SlotBar(props) {
 
   if (tag) {
     return <div className="cursor-pointer px-3 py-2 mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">
-              <Link key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
+              <SmartLink key={tag} href={`/tag/${encodeURIComponent(tag)}`} passHref
                   className={'cursor-pointer inline-block rounded duration-200 mr-2 py-0.5 px-1 text-xl whitespace-nowrap '}>
                   <div className='border-b-2 border-[#D2232A] font-light dark:text-gray-400 dark:hover:text-white'> #{tag} </div>
-              </Link>
+              </SmartLink>
           </div>
   } else if (category) {
     return <div className="cursor-pointer text-lg px-5  mb-4 font-light hover:text-red-700 dark:hover:text-red-400 transform dark:text-white">

themes/commerce/components/TagItemMini.js

@@ -1,8 +1,8 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 const TagItemMini = ({ tag, selected = false }) => {
   return (
-    <Link
+    <SmartLink
       key={tag}
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
@@ -14,7 +14,7 @@ const TagItemMini = ({ tag, selected = false }) => {
 
       <div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
 
-    </Link>
+    </SmartLink>
   );
 }