feat: 超链接统一增加 label 属性

wujieli0207 · May 6, 2024 · 6f3f131 · 6f3f131
1 parent 070996c
commit 6f3f131
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 11 deletions.
diff --git a/app/Main.tsx b/app/Main.tsx
@@ -50,6 +50,7 @@ export default function Home({ posts }: { posts: CoreContent<Blog>[] }) {
                           <h2 className="text-2xl font-bold leading-8 tracking-tight">
                             <Link
                               href={`/blog/${slug}`}
+                              title={title}
                               className="text-gray-900 dark:text-gray-100"
                             >
                               {title}
@@ -70,6 +71,7 @@ export default function Home({ posts }: { posts: CoreContent<Blog>[] }) {
                           href={`/blog/${slug}`}
                           className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                           aria-label={`Read more: "${title}"`}
+                          title={`Read more: "${title}"`}
                         >
                           Read more &rarr;
                         </Link>
@@ -88,6 +90,7 @@ export default function Home({ posts }: { posts: CoreContent<Blog>[] }) {
             href="/blog"
             className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
             aria-label="All posts"
+            title="All posts"
           >
             All Posts &rarr;
           </Link>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -15,6 +15,7 @@ export default function NotFound() {
         <p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
         <Link
           href="/"
+          title="Back to homepage"
           className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500"
         >
           Back to homepage

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ title, description, imgSrc, href }) => (
     >
       {imgSrc &&
         (href ? (
-          <Link href={href} aria-label={`Link to ${title}`}>
+          <Link href={href} title={`Link to ${title}`} aria-label={`Link to ${title}`}>
             <Image
               alt={title}
               src={imgSrc}
@@ -31,7 +31,7 @@ const Card = ({ title, description, imgSrc, href }) => (
       <div className="p-6">
         <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
           {href ? (
-            <Link href={href} aria-label={`Link to ${title}`}>
+            <Link href={href} title={title} aria-label={`Link to ${title}`}>
               {title}
             </Link>
           ) : (
@@ -44,6 +44,7 @@ const Card = ({ title, description, imgSrc, href }) => (
             href={href}
             className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
             aria-label={`Link to ${title}`}
+            title={`Link to ${title}`}
           >
             Learn more &rarr;
           </Link>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -21,7 +21,9 @@ export default function Footer() {
           <div>{` • `}</div>
           <div>{`© ${new Date().getFullYear()}`}</div>
           <div>{` • `}</div>
-          <Link href="/">{siteMetadata.title}</Link>
+          <Link href="/" title={siteMetadata.title}>
+            {siteMetadata.title}
+          </Link>
         </div>
         <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">岁月神偷，不忘初心</div>
       </div>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -10,7 +10,7 @@ const Header = () => {
   return (
     <header className="flex items-center justify-between py-10">
       <div>
-        <Link href="/" aria-label={siteMetadata.headerTitle}>
+        <Link href="/" aria-label={siteMetadata.headerTitle} title={siteMetadata.headerTitle}>
           <div className="flex items-center justify-between">
             <div className="mr-3">
               <Logo />
@@ -29,6 +29,7 @@ const Header = () => {
           .map((link) => (
             <Link
               key={link.title}
+              title={link.title}
               href={link.href}
               className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
             >

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
@@ -61,6 +61,7 @@ const MobileNav = () => {
             <div key={link.title} className="px-12 py-4">
               <Link
                 href={link.href}
+                title={link.title}
                 className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
                 onClick={onToggleNav}
               >

diff --git a/components/Tag.tsx b/components/Tag.tsx
@@ -10,6 +10,7 @@ const Tag = ({ text, className }: Props) => {
   return (
     <Link
       href={`/blog/tag/${formatTag(text)}`}
+      title={text.split(' ').join('-')}
       className={`mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 ${className}`}
     >
       {text.split(' ').join('-')}

diff --git a/components/social-icons/index.tsx b/components/social-icons/index.tsx
@@ -40,6 +40,7 @@ const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
       target="_blank"
       rel="noopener noreferrer"
       href={href}
+      title={kind}
     >
       <span className="sr-only">{kind}</span>
       <SocialSvg

diff --git a/layouts/ListLayout.tsx b/layouts/ListLayout.tsx
@@ -37,6 +37,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
         {prevPage && (
           <Link
             href={currentPage - 1 === 1 ? `/${basePath}/` : `/${basePath}/page/${currentPage - 1}`}
+            title="Previous"
             rel="prev"
           >
             Previous
@@ -51,7 +52,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
           </button>
         )}
         {nextPage && (
-          <Link href={`/${basePath}/page/${currentPage + 1}`} rel="next">
+          <Link href={`/${basePath}/page/${currentPage + 1}`} title="Next" rel="next">
             Next
           </Link>
         )}
@@ -126,7 +127,11 @@ export default function ListLayout({
                   <div className="space-y-3 xl:col-span-3">
                     <div>
                       <h3 className="text-2xl font-bold leading-8 tracking-tight">
-                        <Link href={`/${path}`} className="text-gray-900 dark:text-gray-100">
+                        <Link
+                          href={`/${path}`}
+                          title={title}
+                          className="text-gray-900 dark:text-gray-100"
+                        >
                           {title}
                         </Link>
                       </h3>

diff --git a/layouts/ListLayoutWithTags.tsx b/layouts/ListLayoutWithTags.tsx
@@ -128,7 +128,11 @@ export default function ListLayoutWithTags({ posts, title, filterTag }: ListLayo
                     <div className="space-y-3">
                       <div>
                         <h2 className="text-2xl font-bold leading-8 tracking-tight">
-                          <Link href={`/${path}`} className="text-gray-900 dark:text-gray-100">
+                          <Link
+                            href={`/${path}`}
+                            title={title}
+                            className="text-gray-900 dark:text-gray-100"
+                          >
                             {title}
                           </Link>
                         </h2>

diff --git a/layouts/PostBanner.tsx b/layouts/PostBanner.tsx
@@ -53,6 +53,7 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
                     href={`/${prev.path}`}
                     className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                     aria-label={`Previous post: ${prev.title}`}
+                    title={`Previous post: ${prev.title}`}
                   >
                     &larr; {prev.title}
                   </Link>
@@ -64,6 +65,7 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
                     href={`/${next.path}`}
                     className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                     aria-label={`Next post: ${next.title}`}
+                    title={`Next post: ${next.title}`}
                   >
                     {next.title} &rarr;
                   </Link>

diff --git a/layouts/PostLayout.tsx b/layouts/PostLayout.tsx
@@ -94,11 +94,13 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
           <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
             <div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
             <div className="pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300">
-              <Link href={discussUrl(path)} rel="nofollow">
+              <Link href={discussUrl(path)} title="Discuss on Twitter" rel="nofollow">
                 Discuss on Twitter
               </Link>
               {` • `}
-              <Link href={editUrl(filePath)}>View on GitHub</Link>
+              <Link href={editUrl(filePath)} title="View on GitHub">
+                View on GitHub
+              </Link>
             </div>
             {siteMetadata.comments && (
               <div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
@@ -117,7 +119,9 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                         Previous
                       </h2>
                       <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-                        <Link href={`/${prev.path}`}>{prev.title}</Link>
+                        <Link href={`/${prev.path}`} title={prev.title}>
+                          {prev.title}
+                        </Link>
                       </div>
                     </div>
                   )}
@@ -127,7 +131,9 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                         Next
                       </h2>
                       <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-                        <Link href={`/${next.path}`}>{next.title}</Link>
+                        <Link href={`/${next.path}`} title={next.title}>
+                          {next.title}
+                        </Link>
                       </div>
                     </div>
                   )}
@@ -139,6 +145,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                 href={`/${basePath}`}
                 className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                 aria-label="Back to the blog"
+                title="Back to the blog"
               >
                 &larr; Back to the blog
               </Link>

diff --git a/layouts/PostSimple.tsx b/layouts/PostSimple.tsx
@@ -56,6 +56,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
                       href={`/${prev.path}`}
                       className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                       aria-label={`Previous post: ${prev.title}`}
+                      title={`Previous post: ${prev.title}`}
                     >
                       &larr; {prev.title}
                     </Link>
@@ -67,6 +68,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
                       href={`/${next.path}`}
                       className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                       aria-label={`Next post: ${next.title}`}
+                      title={`Next post: ${next.title}`}
                     >
                       {next.title} &rarr;
                     </Link>