feat(article-link): use semantic HTML

This commit is contained in:
ZhenShuo Leo
2025-09-06 15:36:21 +08:00
parent 5bab41062a
commit 340364f31a
4 changed files with 46 additions and 42 deletions
@@ -62,16 +62,16 @@
{{ end }} {{ end }}
<div class="{{ $articleClasses }}"> <article class="{{ $articleClasses }}">
{{ with $featuredURL }} {{ with $featuredURL }}
<div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div> <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
{{ end }} {{ end }}
<div class="{{ $articleInnerClasses }}"> <div class="{{ $articleInnerClasses }}">
<div class="items-center text-start text-xl font-semibold"> <header class="items-center text-start text-xl font-semibold">
<a <a
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} {{ 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"> 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 }} {{ $target.Title | emojify }}
{{ if $target.Params.externalUrl }} {{ if $target.Params.externalUrl }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <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 class="ltr:hidden">&#8598;</span>
</span> </span>
{{ end }} {{ end }}
</div> </h2>
</a> </a>
{{ if and $target.Draft site.Params.article.showDraftLabel }} {{ if and $target.Draft site.Params.article.showDraftLabel }}
<div class="ms-2"> <div class="ms-2">
@@ -89,7 +89,7 @@
{{ if templates.Exists "partials/extend-article-link.html" }} {{ if templates.Exists "partials/extend-article-link.html" }}
{{ partial "extend-article-link.html" $target }} {{ partial "extend-article-link.html" $target }}
{{ end }} {{ end }}
</div> </header>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" $target }} {{ partial "article-meta/basic.html" $target }}
</div> </div>
@@ -113,4 +113,4 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
</div> </article>
+17 -15
View File
@@ -31,7 +31,7 @@
{{ end }} {{ 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"> 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 }} {{ with $featuredURL }}
<div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div> <div class="thumbnail_card_related nozoom w-full" style="background-image:url({{ . }});"></div>
@@ -42,19 +42,21 @@
</span> </span>
{{ end }} {{ end }}
<div class="px-6 py-4"> <div class="px-6 py-4">
<a <header>
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} <a
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"> {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
<div> 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">
{{ .Title | emojify }} <h2>
{{ if .Params.externalUrl }} {{ .Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> {{ if .Params.externalUrl }}
<span class="rtl:hidden">&#8599;</span> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="ltr:hidden">&#8598;</span> <span class="rtl:hidden">&#8599;</span>
</span> <span class="ltr:hidden">&#8598;</span>
{{ end }} </span>
</div> {{ end }}
</a> </h2>
</a>
</header>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }} {{ partial "article-meta/basic.html" . }}
</div> </div>
@@ -63,4 +65,4 @@
{{ end }} {{ end }}
</div> </div>
<div class="px-6 pt-4 pb-2"></div> <div class="px-6 pt-4 pb-2"></div>
</div> </article>
+17 -15
View File
@@ -35,7 +35,7 @@
{{ end }} {{ 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"> 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 }} {{ with $featuredURL }}
<div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div> <div class="thumbnail_card nozoom w-full" style="background-image:url({{ . }});"></div>
@@ -46,19 +46,21 @@
</span> </span>
{{ end }} {{ end }}
<div class="px-6 py-4"> <div class="px-6 py-4">
<a <header>
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} <a
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"> {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
<div> 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">
{{ .Title | emojify }} <h2>
{{ if .Params.externalUrl }} {{ .Title | emojify }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> {{ if .Params.externalUrl }}
<span class="rtl:hidden">&#8599;</span> <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
<span class="ltr:hidden">&#8598;</span> <span class="rtl:hidden">&#8599;</span>
</span> <span class="ltr:hidden">&#8598;</span>
{{ end }} </span>
</div> {{ end }}
</a> </h2>
</a>
</header>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }} {{ partial "article-meta/basic.html" . }}
</div> </div>
@@ -67,4 +69,4 @@
{{ end }} {{ end }}
</div> </div>
<div class="px-6 pt-4 pb-2"></div> <div class="px-6 pt-4 pb-2"></div>
</div> </article>
+6 -6
View File
@@ -62,16 +62,16 @@
{{ end }} {{ end }}
<div class="{{ $articleClasses }}"> <article class="{{ $articleClasses }}">
{{ with $featuredURL }} {{ with $featuredURL }}
<div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div> <div class="{{ $articleImageClasses }}" style="background-image:url({{ . }});"></div>
{{ end }} {{ end }}
<div class="{{ $articleInnerClasses }}"> <div class="{{ $articleInnerClasses }}">
<div class="items-center text-start text-xl font-semibold"> <header class="items-center text-start text-xl font-semibold">
<a <a
{{ partial "article-link/_external-link.html" . | safeHTMLAttr }} {{ 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"> 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 }} {{ .Title | emojify }}
{{ if .Params.externalUrl }} {{ if .Params.externalUrl }}
<span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"> <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 class="ltr:hidden">&#8598;</span>
</span> </span>
{{ end }} {{ end }}
</div> </h2>
</a> </a>
{{ if and .Draft .Site.Params.article.showDraftLabel }} {{ if and .Draft .Site.Params.article.showDraftLabel }}
<div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div> <div class="ms-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</div>
@@ -87,7 +87,7 @@
{{ if templates.Exists "partials/extend-article-link.html" }} {{ if templates.Exists "partials/extend-article-link.html" }}
{{ partial "extend-article-link.html" . }} {{ partial "extend-article-link.html" . }}
{{ end }} {{ end }}
</div> </header>
<div class="text-sm text-neutral-500 dark:text-neutral-400"> <div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ partial "article-meta/basic.html" . }} {{ partial "article-meta/basic.html" . }}
</div> </div>
@@ -96,4 +96,4 @@
{{ end }} {{ end }}
</div> </div>
<div class="px-6 pt-4 pb-2"></div> <div class="px-6 pt-4 pb-2"></div>
</div> </article>