feat: change all Link component to SmartLink

Close #3512

themes/game/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/game/components/BlogPost.js

@@ -2,7 +2,7 @@ import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 const BlogPost = ({ post }) => {
   const { NOTION_CONFIG } = useGlobal()
@@ -10,7 +10,7 @@ const BlogPost = ({ post }) => {
     siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post?.blockMap
 
   return (
-    <Link href={post?.href}>
+    <SmartLink href={post?.href}>
       <article key={post.id} className='mb-6 md:mb-8'>
         <header className='flex flex-col justify-between md:flex-row md:items-baseline'>
           <h2 className='text-lg md:text-xl font-medium mb-2 cursor-pointer text-black dark:text-gray-100'>
@@ -37,7 +37,7 @@ const BlogPost = ({ post }) => {
           )}
         </main>
       </article>
-    </Link>
+    </SmartLink>
   )
 }
 

themes/game/components/ExampleRecentComments.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { RecentComments } from '@waline/client'
 
 /**
@@ -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/game/components/GameEmbed.js

@@ -2,7 +2,7 @@
 import { Draggable } from '@/components/Draggable'
 import { siteConfig } from '@/lib/config'
 import { deepClone } from '@/lib/utils'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useEffect, useState } from 'react'
 import DownloadButton from './DownloadButton'
 import FullScreenButton from './FullScreenButton'
@@ -100,12 +100,12 @@ export default function GameEmbed({ post, siteInfo }) {
         <div
           style={{ left: '0px', top: '1rem' }}
           className='text-white fixed xl:hidden group space-x-1 flex items-center z-20 pr-3 pl-1 bg-[#202030] rounded-r-2xl  shadow-lg '>
-          <Link
+          <SmartLink
             href='/'
             className='px-1 py-3 hover:scale-125 duration-200 transition-all'
             passHref>
             <i className='fas fa-chevron-left' />
-          </Link>{' '}
+          </SmartLink>{' '}
           <span
             className='font-serif px-1'
             onClick={() => {

themes/game/components/GameListIndexCombine.js

@@ -3,7 +3,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
 import { deepClone } from '@/lib/utils'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 import CONFIG from '../config'
 
@@ -142,7 +142,7 @@ const GameItem = ({ item, isLargeCard }) => {
 
   const video = item?.ext?.video
   return (
-    <Link
+    <SmartLink
       title={title}
       href={`${item?.href}`}
       className={`card-single ${isLargeCard ? 'h-80 ' : 'h-full text-xs'} w-full transition-all duration-200 shadow-md md:hover:scale-105 md:hover:shadow-lg relative rounded-lg overflow-hidden flex justify-center items-center
@@ -177,6 +177,6 @@ const GameItem = ({ item, isLargeCard }) => {
         alt={title}
         fill='full'
       />
-    </Link>
+    </SmartLink>
   )
 }

themes/game/components/GameListNormal.js

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { deepClone } from '@/lib/utils'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 
 /**
@@ -45,7 +45,7 @@ const GameItem = ({ item }) => {
   const video = item?.ext?.video
 
   return (
-    <Link
+    <SmartLink
       href={`${item?.href}`}
       onMouseOver={() => {
         setShowType('video')
@@ -77,6 +77,6 @@ const GameItem = ({ item }) => {
         src={img}
         alt={title}
       />
-    </Link>
+    </SmartLink>
   )
 }

themes/game/components/GameListRealate.js

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { deepClone } from '@/lib/utils'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import { useState } from 'react'
 
 /**
@@ -46,7 +46,7 @@ const GameItem = ({ item }) => {
   const video = item?.ext?.video
 
   return (
-    <Link
+    <SmartLink
       href={`${item?.href}`}
       onMouseOver={() => {
         setShowType('video')
@@ -78,6 +78,6 @@ const GameItem = ({ item }) => {
         src={img}
         alt={title}
       />
-    </Link>
+    </SmartLink>
   )
 }

themes/game/components/GroupCategory.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 function GroupCategory({ currentCategory, categoryOptions }) {
   if (!categoryOptions) {
@@ -7,16 +7,16 @@ function GroupCategory({ currentCategory, categoryOptions }) {
 
   return (
     <div className='flex items-center'>
-      <Link className='mx-2' href='/category'>
+      <SmartLink className='mx-2' href='/category'>
         <i className='fas fa-bars' />
-      </Link>
+      </SmartLink>
       <div
         id='category-list'
         className='dark:border-gray-600 flex flex-wrap py-1'>
         {categoryOptions.map(category => {
           const selected = currentCategory === category.name
           return (
-            <Link
+            <SmartLink
               key={category.name}
               href={`/category/${category.name}`}
               passHref
@@ -32,7 +32,7 @@ function GroupCategory({ currentCategory, categoryOptions }) {
               {/* <span className='text-xs flex items-start pl-2 h-full'>
                 {category.count}
               </span> */}
-            </Link>
+            </SmartLink>
           )
         })}
       </div>

themes/game/components/GroupTag.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -12,9 +12,9 @@ function GroupTag({ tagOptions, currentTag }) {
   if (!tagOptions) return <></>
   return (
     <div className='flex items-center'>
-      <Link href='/tag'>
+      <SmartLink href='/tag'>
         <i className='fas fa-tags p-2' />
-      </Link>
+      </SmartLink>
       <div id='tags-group' className='flex flex-wrap p-1 gap-2'>
         {tagOptions?.slice(0, 20)?.map(tag => {
           const selected = tag.name === currentTag

themes/game/components/Logo.js

@@ -1,10 +1,10 @@
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /* eslint-disable @next/next/no-html-link-for-pages */
 export default function Logo({ siteInfo }) {
   return (
-    <Link
+    <SmartLink
       passHref
       href='/'
       className='logo rounded cursor-pointer flex flex-col items-center'>
@@ -16,6 +16,6 @@ export default function Logo({ siteInfo }) {
           {siteConfig('BIO')}
         </h2>
       </div>
-    </Link>
+    </SmartLink>
   )
 }

themes/game/components/LogoMini.js

@@ -1,11 +1,11 @@
 import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 /* eslint-disable @next/next/no-html-link-for-pages */
 export default function LogoMini() {
   return (
-    <Link href='/' className='logo rounded cursor-pointer flex items-center text-xl text-white font-bold font-serif'>
+    <SmartLink href='/' className='logo rounded cursor-pointer flex items-center text-xl text-white font-bold font-serif'>
       {siteConfig('TITLE')?.charAt(0)}
-    </Link>
+    </SmartLink>
   )
 }

themes/game/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-4 py-2 text-left dark:bg-hexo-black-gray dark:border-black'
         onClick={toggleShow}>
         {!hasSubMenu && (
-          <Link
+          <SmartLink
             href={link?.href}
             target={link?.target}
             className='font-extralight  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
@@ -71,9 +71,9 @@ export const MenuItemCollapse = props => {
               <div
                 key={index}
                 className='font-extralight dark:bg-black text-left px-10 justify-start  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='text-xs'>{sLink.title}</span>
-                </Link>
+                </SmartLink>
               </div>
             )
           })}

themes/game/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 }) => {
@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
         onMouseOut={() => changeShow(false)}>
         {!hasSubMenu && (
           <div className='dark:text-gray-50 nav hover:scale-105 transition-transform duration-200'>
-            <Link
+            <SmartLink
               href={link?.href}
               className='flex flex-nowrap'
               target={link?.target}>
@@ -25,7 +25,7 @@ export const MenuItemDrop = ({ link }) => {
                 {link?.icon && <i className={link?.icon} />}
               </div>
               {link?.name}
-            </Link>
+            </SmartLink>
           </div>
         )}
 
@@ -47,12 +47,12 @@ export const MenuItemDrop = ({ link }) => {
                 <div
                   key={index}
                   className='text-gray-700 dark:text-gray-200  tracking-widest transition-all duration-200 '>
-                  <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>
                 </div>
               )
             })}

themes/game/components/PaginationSimple.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'
 
 /**
@@ -21,7 +21,7 @@ const PaginationSimple = ({ page, showNext }) => {
 
   return (
     <div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
-      <Link
+      <SmartLink
         href={{
           pathname:
             currentPage === 2
@@ -35,8 +35,8 @@ const PaginationSimple = ({ page, showNext }) => {
           currentPage === 1 ? 'invisible' : 'visible'
         } text-center w-full duration-200 px-4 py-2 hover:border-black dark:border-hexo-black-gray border-b-2 hover:font-bold`}>
         ←{locale.PAGINATION.PREV}
-      </Link>
-      <Link
+      </SmartLink>
+      <SmartLink
         href={{
           pathname: `${pagePrefix}/page/${currentPage + 1}`,
           query: router.query.s ? { s: router.query.s } : {}
@@ -47,7 +47,7 @@ const PaginationSimple = ({ page, showNext }) => {
           showNext ? 'visible' : 'invisible'
         } text-center w-full duration-200 px-4 py-2 hover:border-black dark:border-hexo-black-gray border-b-2 hover:font-bold`}>
         {locale.PAGINATION.NEXT}→
-      </Link>
+      </SmartLink>
     </div>
   )
 }

themes/game/components/PostInfo.js

@@ -1,5 +1,5 @@
 import NotionIcon from '@/components/NotionIcon'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import TagItem from './TagItem'
 import { siteConfig } from '@/lib/config'
 
@@ -15,12 +15,12 @@ export default function PostInfo(props) {
         <div>
           {post?.type !== 'Page' && (
             <>
-              <Link
+              <SmartLink
                 href={`/category/${post?.category}`}
                 passHref
                 className='cursor-pointer text-xs font-bold hover:underline mr-2'>
                 {post?.category}
-              </Link>
+              </SmartLink>
             </>
           )}
         </div>

themes/game/components/SideBar.js

@@ -1,7 +1,7 @@
 import { siteConfig } from '@/lib/config'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 import dynamic from 'next/dynamic'
 const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 
@@ -18,13 +18,13 @@ export const SideBar = (props) => {
                     <ul className="list-reset leading-normal">
                         {categories?.map(category => {
                           return (
-                              <Link
+                              <SmartLink
                                   key={category.name}
                                   href={`/category/${category.name}`}
                                   passHref
                                   legacyBehavior>
                                     <li>  <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
-                                </Link>
+                                </SmartLink>
                           );
                         })}
                     </ul>
@@ -39,9 +39,9 @@ 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 href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
-                                </Link>
+                                </SmartLink>
                           );
                         })}
                     </ul>

themes/game/components/TagItem.js

@@ -1,11 +1,11 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 const TagItem = ({ tag }) => (
-  <Link href={`/tag/${encodeURIComponent(tag)}`}>
+  <SmartLink href={`/tag/${encodeURIComponent(tag)}`}>
     <p className='cursor-pointer hover:bg-gray-50 dark:hover:bg-hexo-black-gray mr-1 rounded-full px-2 py-1 border leading-none text-sm dark:border-gray-600'>
       {tag}
     </p>
-  </Link>
+  </SmartLink>
 )
 
 export default TagItem

themes/game/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)}`}
       className={` rounded hover:text-white hover:bg-green-500 text-black dark:text-white dark:bg-gray-800 py-0.5 px-1 `}
@@ -14,7 +14,7 @@ const TagItemMini = ({ tag, selected = false }) => {
           {tag.count ? `${tag.count}` : ''}
         </span>
       </span>
-    </Link>
+    </SmartLink>
   )
 }
 

themes/game/components/Tags.js

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import SmartLink from '@/components/SmartLink'
 
 const Tags = props => {
   const { tagOptions, tag } = props
@@ -19,14 +19,14 @@ const Tags = props => {
                   : 'bg-gray-100 border-gray-100 text-gray-400 dark:bg-night dark:border-gray-800'
               }`}
             >
-              <Link
+              <SmartLink
                 key={tag.id}
                 href={selected ? '/search' : `/tag/${encodeURIComponent(tag.name)}`}
                 className="px-4 py-2 block">
 
                 {`${tag.name} (${tag.count})`}
 
-              </Link>
+              </SmartLink>
             </li>
           )
         })}