refactor: 更新 nextjs 13 后按照新规范修改 Link 标签的使用"

Mereithhh · Feb 25, 2023 · b453665 · b453665
1 parent 141a064
commit b453665
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 93 deletions.
diff --git a/packages/website/components/ArticleList/index.tsx b/packages/website/components/ArticleList/index.tsx
@@ -1,6 +1,6 @@
 import { Article } from "../../types/article";
 import dayjs from "dayjs";
-import Link from "../Link";
+import Link from "next/link";
 import { getTarget } from "../Link/tools";
 export default function (props: {
   articles: Article[];
@@ -15,14 +15,9 @@ export default function (props: {
           <Link
             href={`/post/${article.id}`}
             key={article.id}
-            newTab={props.openArticleLinksInNewWindow}
+            target={getTarget(props.openArticleLinksInNewWindow)}
           >
-            <a
-              className="dark:border-dark-2  dark:hover:border-nav-dark-light flex items-center border-b pb-1 border-dashed cursor-pointer group border-gray-200 hover:border-gray-400 "
-              key={article.id}
-              target={getTarget(props.openArticleLinksInNewWindow)}
-              href={`/post/${article.id}`}
-            >
+            <div className="dark:border-dark-2  dark:hover:border-nav-dark-light flex items-center border-b pb-1 border-dashed cursor-pointer group border-gray-200 hover:border-gray-400 ">
               <div className="text-gray-400 flex-grow-0 flex-shrink-0 text-sm  group-hover:text-gray-600 dark:text-dark-400 dark:group-hover:text-dark-light">
                 {props.showYear
                   ? dayjs(article.createdAt).format("YYYY-MM-DD")
@@ -31,7 +26,7 @@ export default function (props: {
               <div className="ml-2 md:ml-4 text-base flex-grow flex-shrink overflow-hidden text-gray-600 group-hover:text-gray-800 dark:text-dark dark:group-hover:text-dark">
                 {article.title}
               </div>
-            </a>
+            </div>
           </Link>
         );
       })}

diff --git a/packages/website/components/AuthorCard/index.tsx b/packages/website/components/AuthorCard/index.tsx
@@ -37,9 +37,8 @@ export default function (props: { option: AuthorCardProps }) {
     if (el) {
       const headroom = new Headroom(el, {
         classes: {
-          initial: `side-bar${
-            props.option.showSubMenu == "true" ? "" : " no-submenu"
-          }`,
+          initial: `side-bar${props.option.showSubMenu == "true" ? "" : " no-submenu"
+            }`,
           pinned: "side-bar-pinned",
           unpinned: "side-bar-unpinned",
           top: "side-bar-top",
@@ -69,34 +68,34 @@ export default function (props: { option: AuthorCardProps }) {
           </div>
           <div className="flex">
             <Link href="/timeline">
-              <a className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark ">
+              <div className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark ">
                 <div className="group-hover:text-gray-900 font-bold group-hover:font-black dark:group-hover:text-dark-hover">
                   {props.option.postNum}
                 </div>
                 <div className="group-hover:text-gray-900 group-hover:font-normal text-gray-500 dark:text-dark-light dark:group-hover:text-dark-hover">
                   日志
                 </div>
-              </a>
+              </div>
             </Link>
             <Link href="/category">
-              <a className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark">
+              <div className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark">
                 <div className="group-hover:text-gray-900 font-bold group-hover:font-black dark:group-hover:text-dark-hover">
                   {props.option.catelogNum}
                 </div>
                 <div className="group-hover:text-gray-900 group-hover:font-normal text-gray-500 dark:text-dark-light dark:group-hover:text-dark-hover">
                   分类
                 </div>
-              </a>
+              </div>
             </Link>
             <Link href="/tag">
-              <a className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark">
+              <div className="group flex flex-col justify-center items-center text-gray-600 text-sm px-1 dark:text-dark">
                 <div className="group-hover:text-gray-900 font-bold group-hover:font-black dark:group-hover:text-dark-hover">
                   {props.option.tagNum}
                 </div>
                 <div className=" group-hover:text-gray-900 group-hover:font-normal text-gray-500 dark:text-dark-light dark:group-hover:text-dark-hover">
                   标签
                 </div>
-              </a>
+              </div>
             </Link>
           </div>
         </div>

diff --git a/packages/website/components/Link/index.tsx b/packages/website/components/Link/index.tsx
diff --git a/packages/website/components/NavBar/index.tsx b/packages/website/components/NavBar/index.tsx
@@ -183,7 +183,7 @@ export default function (props: {
                     className="flex items-center h-full md:px-2 hover:text-gray-900 dark:hover:text-dark-hover transform hover:scale-110 cursor-pointer transition-all"
                   >
                     <Link href={`/category/${encodeQuerystring(catelog)}`}>
-                      <a>{catelog}</a>
+                      <div>{catelog}</div>
                     </Link>
                   </li>
                 );

diff --git a/packages/website/components/NavBar/item.tsx b/packages/website/components/NavBar/item.tsx
@@ -40,7 +40,7 @@ function LinkItemAtom(props: {
         className={props.cls ? props.cls : cls}
       >
         <Link href={item.value}>
-          <a className={props.clsA ? props.clsA : clsA}>{item.name}</a>
+          <div className={props.clsA ? props.clsA : clsA}>{item.name}</div>
         </Link>
       </li>
     );

diff --git a/packages/website/components/NavBarMobile/index.tsx b/packages/website/components/NavBarMobile/index.tsx
@@ -32,9 +32,9 @@ export default function (props: {
           key={item.id}
         >
           <Link href={item.value}>
-            <a className={`w-full inline-block  ${isSub ? "px-8" : "px-4"}`}>
+            <div className={`w-full inline-block  ${isSub ? "px-8" : "px-4"}`}>
               {item.name}
-            </a>
+            </div>
           </Link>
         </li>
       );

diff --git a/packages/website/components/PageNav/render.tsx b/packages/website/components/PageNav/render.tsx
@@ -17,16 +17,15 @@ const renderLink = (item: PageItem, isCur: boolean) => {
       href={item.href}
       key={`LinkItem-${item.page}-${item.type}-${item.href}`}
     >
-      <a
+      <div
         style={commonStyle}
-        className={`${commonCls} ${btnCls}  ${
-          isCur
-            ? "bg-gray-200 dark:bg-dark-hover dark:pg-text-dark-hover"
-            : "dark:bg-dark-1 dark:pg-text-dark "
-        }`}
+        className={`${commonCls} ${btnCls}  ${isCur
+          ? "bg-gray-200 dark:bg-dark-hover dark:pg-text-dark-hover"
+          : "dark:bg-dark-1 dark:pg-text-dark "
+          }`}
       >
         {item.page}
-      </a>
+      </div>
     </Link>
   );
 };
@@ -35,14 +34,14 @@ const renderBtn = (item: PageItem, disable: boolean, isNext: boolean) => {
     <Link
       href={item.href}
       key={`pagenav-btn-${item.page}-${item.href}-${isNext}`}
-      // className="justify-center items-center "
+    // className="justify-center items-center "
     >
-      <a
+      <div
         style={commonStyle}
         className={`${commonCls} dark:bg-dark-1 dark:pg-text-dark  ${btnCls}`}
       >
         {isNext ? "›" : "‹"}
-      </a>
+      </div>
     </Link>
   );
 };
@@ -52,9 +51,9 @@ const renderMore = (item: PageItem, isNext: boolean) => {
       href={item.href}
       key={`pagenav-more-${item.page}-${item.href}-${isNext}`}
     >
-      <a style={commonStyle} className={`dark:pg-text-dark ${commonCls}`}>
+      <div style={commonStyle} className={`dark:pg-text-dark ${commonCls}`}>
         •••
-      </a>
+      </div>
     </Link>
   );
 };

diff --git a/packages/website/components/PostCard/bottom.tsx b/packages/website/components/PostCard/bottom.tsx
@@ -1,4 +1,4 @@
-import Link from "../Link";
+import Link from "next/link";
 import { useMemo } from "react";
 import { encodeQuerystring } from "../../utils/encode";
 import { getTarget } from "../Link/tools";
@@ -25,13 +25,11 @@ export function PostBottom(props: {
             <div key={`article-tag-${tag}`}>
               <Link
                 href={`/tag/${encodeQuerystring(tag)}`}
-                newTab={props.openArticleLinksInNewWindow}
+                target={getTarget(props.openArticleLinksInNewWindow)}
               >
-                <a
-                  target={getTarget(props.openArticleLinksInNewWindow)}
-                  href={`/tag/${encodeQuerystring(tag)}`}
+                <div
                   className=" border-b border-white hover:border-gray-500 dark:border-dark dark:hover:border-gray-300 dark:hover:text-gray-300"
-                >{`${tag}`}</a>
+                >{`${tag}`}</div>
               </Link>
             </div>
           ))}
@@ -43,29 +41,25 @@ export function PostBottom(props: {
           {props.pre?.id && (
             <Link
               href={`/post/${props.pre?.id}`}
-              newTab={props.openArticleLinksInNewWindow}
+              target={getTarget(props.openArticleLinksInNewWindow)}
             >
-              <a
+              <div
                 style={{ whiteSpace: "break-spaces" }}
-                href={`/post/${props.pre?.id}`}
-                target={getTarget(props.openArticleLinksInNewWindow)}
                 className="dark:text-dark dark:border-dark dark-border-hover border-b pb border-dashed hover:border-gray-800 border-white hover:text-gray-800"
-              >{`< ${props.pre?.title}`}</a>
+              >{`< ${props.pre?.title}`}</div>
             </Link>
           )}
         </div>
         <div className="" style={{ maxWidth: "50%" }}>
           {props.next?.id && (
             <Link
               href={`/post/${props.next?.id}`}
-              newTab={props.openArticleLinksInNewWindow}
+              target={getTarget(props.openArticleLinksInNewWindow)}
             >
-              <a
+              <div
                 style={{ whiteSpace: "break-spaces" }}
-                href={`/post/${props.next?.id}`}
-                target={getTarget(props.openArticleLinksInNewWindow)}
                 className="dark:text-dark dark:border-dark  dark-border-hover border-b pb border-dashed hover:border-gray-800 border-white hover:text-gray-800"
-              >{`${props.next?.title} >`}</a>
+              >{`${props.next?.title} >`}</div>
             </Link>
           )}
         </div>

diff --git a/packages/website/components/PostCard/index.tsx b/packages/website/components/PostCard/index.tsx
@@ -1,4 +1,4 @@
-import Link from "../Link";
+import Link from "next/link";
 import { useMemo, useState } from "react";
 import AlertCard from "../AlertCard";
 import CopyRight from "../CopyRight";
@@ -132,15 +132,13 @@ export default function (props: {
           <div className="w-full flex justify-center mt-4 ">
             <Link
               href={`/post/${props.id}`}
-              newTab={props.openArticleLinksInNewWindow}
+              target={getTarget(props.openArticleLinksInNewWindow)}
             >
-              <a
-                href={`/post/${props.id}`}
-                target={getTarget(props.openArticleLinksInNewWindow)}
+              <div
                 className=" dark:bg-dark dark:hover:bg-dark-light dark:hover:text-dark-r dark:border-dark dark:text-dark hover:bg-gray-800 hover:text-gray-50 border-2 border-gray-800 text-sm md:text-base text-gray-700 px-2 py-1 transition-all rounded"
               >
                 阅读全文
-              </a>
+              </div>
             </Link>
           </div>
         )}

diff --git a/packages/website/components/PostCard/title.tsx b/packages/website/components/PostCard/title.tsx
@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import Link from "../Link";
+import Link from "next/link";
 import { useMemo } from "react";
 import { encodeQuerystring } from "../../utils/encode";
 import PostViewer from "../PostViewer";
@@ -20,16 +20,13 @@ export function Title(props: {
   return (
     <div className="flex justify-center">
       {props.type != "about" ? (
-        <Link href={`/post/${props.id}`} newTab={newTab}>
-          <a
-            target={getTarget(newTab)}
-            href={`/post/${props.id}`}
-            className={`text-lg block font-medium px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 md:text-${
-              props.type == "overview" ? "xl" : "2xl"
-            } ua ua-link`}
+        <Link href={`/post/${props.id}`} target={getTarget(newTab)}>
+          <div
+            className={`text-lg block font-medium px-5  text-center mb-2 mt-2 dark:text-dark text-gray-700 md:text-${props.type == "overview" ? "xl" : "2xl"
+              } ua ua-link`}
           >
             {props.title}
-          </a>
+          </div>
         </Link>
       ) : (
         <div
@@ -108,13 +105,11 @@ export function SubTitle(props: {
           </span>
           <Link
             href={`/category/${encodeQuerystring(props.catelog)}`}
-            newTab={props.openArticleLinksInNewWindow}
+            target={getTarget(props.openArticleLinksInNewWindow)}
           >
-            <a
-              href={`/category/${encodeQuerystring(props.catelog)}`}
-              target={getTarget(props.openArticleLinksInNewWindow)}
+            <div
               className="cursor-pointer group-hover:text-gray-900 dark:group-hover:text-dark-hover hover:font-medium "
-            >{`${props.catelog}`}</a>
+            >{`${props.catelog}`}</div>
           </Link>
         </span>
       )}

diff --git a/packages/website/pages/404.tsx b/packages/website/pages/404.tsx
@@ -22,9 +22,9 @@ export default function (props: { name?: string }) {
             {`此${props?.name ? props.name : "页面"}不存在`}
           </div>
           <Link href="/">
-            <a className="mt-4 ua ua-link text-base text-gray-600 dark:text-dark">
+            <div className="mt-4 ua ua-link text-base text-gray-600 dark:text-dark">
               返回主页
-            </a>
+            </div>
           </Link>
         </div>
       </div>

diff --git a/packages/website/pages/tag.tsx b/packages/website/pages/tag.tsx
@@ -1,4 +1,4 @@
-import Link from "../components/Link";
+import Link from "next/link";
 import AuthorCard, { AuthorCardProps } from "../components/AuthorCard";
 import Layout from "../components/Layout";
 import { encodeQuerystring } from "../utils/encode";
@@ -28,15 +28,14 @@ const TagPage = (props: TagPageProps) => {
             <Link
               href={`/tag/${encodeQuerystring(tag)}`}
               key={`tag-${tag}`}
-              newTab={props.layoutProps.openArticleLinksInNewWindow == "true"}
+              target={getTarget(
+                props.layoutProps.openArticleLinksInNewWindow == "true"
+              )}
+
             >
-              <a
-                href={`/tag/${encodeQuerystring(tag)}`}
-                target={getTarget(
-                  props.layoutProps.openArticleLinksInNewWindow == "true"
-                )}
+              <div
                 className="my-2 text-gray-500 block hover:text-gray-900 dark:hover:text-dark-hover transform hover:scale-110 transition-all mr-5 dark:text-dark-400 "
-              >{`${tag}`}</a>
+              >{`${tag}`}</div>
             </Link>
           ))}
         </div>