From 340364f31a96d1a2d0f94fc6199fd536d1a5effe Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 6 Sep 2025 15:36:21 +0800
Subject: [PATCH] feat(article-link): use semantic HTML

---
 layouts/partials/article-link/_shortcode.html | 12 +++----
 .../partials/article-link/card-related.html   | 32 ++++++++++---------
 layouts/partials/article-link/card.html       | 32 ++++++++++---------
 layouts/partials/article-link/simple.html     | 12 +++----
 4 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html
index 36e9450e..50381dcc 100644
--- a/layouts/partials/article-link/_shortcode.html
+++ b/layouts/partials/article-link/_shortcode.html
@@ -62,16 +62,16 @@
 {{ end }}
 
 
-<div class="{{ $articleClasses }}">
+<article class="{{ $articleClasses }}">
   {{ with $featuredURL }}
     <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
   {{ end }}
   <div class="{{ $articleInnerClasses }}">
-    <div class="items-center text-start text-xl font-semibold">
+    <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
         class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
-        <div>
+        <h2>
           {{ $target.Title | emojify }}
           {{ if $target.Params.externalUrl }}
             <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
@@ -79,7 +79,7 @@
               <span class="ltr:hidden">&#8598;</span>
             </span>
           {{ end }}
-        </div>
+        </h2>
       </a>
       {{ if and $target.Draft site.Params.article.showDraftLabel }}
         <div class="ms-2">
@@ -89,7 +89,7 @@
       {{ if templates.Exists "partials/extend-article-link.html" }}
         {{ partial "extend-article-link.html" $target }}
       {{ end }}
-    </div>
+    </header>
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" $target }}
     </div>
@@ -113,4 +113,4 @@
       </div>
     {{ end }}
   </div>
-</div>
+</article>
diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html
index 5510d4af..f333c223 100644
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -31,7 +31,7 @@
 {{ end }}
 
 
-<div
+<article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
     <div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div>
@@ -42,19 +42,21 @@
     </span>
   {{ end }}
   <div class="px-6 py-4">
-    <a
-      {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
-      class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
-      <div>
-        {{ .Title | emojify }}
-        {{ if .Params.externalUrl }}
-          <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
-            <span class="rtl:hidden">&#8599;</span>
-            <span class="ltr:hidden">&#8598;</span>
-          </span>
-        {{ end }}
-      </div>
-    </a>
+    <header>
+      <a
+        {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
+        class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        <h2>
+          {{ .Title | emojify }}
+          {{ if .Params.externalUrl }}
+            <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          {{ end }}
+        </h2>
+      </a>
+    </header>
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" . }}
     </div>
@@ -63,4 +65,4 @@
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>
-</div>
+</article>
diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html
index c0927192..6f9e9ba9 100644
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -35,7 +35,7 @@
 {{ end }}
 
 
-<div
+<article
   class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   {{ with $featuredURL }}
     <div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div>
@@ -46,19 +46,21 @@
     </span>
   {{ end }}
   <div class="px-6 py-4">
-    <a
-      {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
-      class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
-      <div>
-        {{ .Title | emojify }}
-        {{ if .Params.externalUrl }}
-          <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
-            <span class="rtl:hidden">&#8599;</span>
-            <span class="ltr:hidden">&#8598;</span>
-          </span>
-        {{ end }}
-      </div>
-    </a>
+    <header>
+      <a
+        {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
+        class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        <h2>
+          {{ .Title | emojify }}
+          {{ if .Params.externalUrl }}
+            <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
+              <span class="rtl:hidden">&#8599;</span>
+              <span class="ltr:hidden">&#8598;</span>
+            </span>
+          {{ end }}
+        </h2>
+      </a>
+    </header>
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" . }}
     </div>
@@ -67,4 +69,4 @@
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>
-</div>
+</article>
diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html
index ce087db9..54b7c3b0 100644
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -62,16 +62,16 @@
 {{ end }}
 
 
-<div class="{{ $articleClasses }}">
+<article class="{{ $articleClasses }}">
   {{ with $featuredURL }}
     <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
   {{ end }}
   <div class="{{ $articleInnerClasses }}">
-    <div class="items-center text-start text-xl font-semibold">
+    <header class="items-center text-start text-xl font-semibold">
       <a
         {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
         class="not-prose before:absolute before:inset-0 decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
-        <div>
+        <h2>
           {{ .Title | emojify }}
           {{ if .Params.externalUrl }}
             <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
@@ -79,7 +79,7 @@
               <span class="ltr:hidden">&#8598;</span>
             </span>
           {{ end }}
-        </div>
+          </h2>
       </a>
       {{ if and .Draft .Site.Params.article.showDraftLabel }}
         <div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
@@ -87,7 +87,7 @@
       {{ if templates.Exists "partials/extend-article-link.html" }}
         {{ partial "extend-article-link.html" . }}
       {{ end }}
-    </div>
+    </header>
     <div class="text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" . }}
     </div>
@@ -96,4 +96,4 @@
     {{ end }}
   </div>
   <div class="px-6 pt-4 pb-2"></div>
-</div>
+</article>