blob: d7d6530b5b2d349cec79faec326577b7d537f9ea (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
{{ $articleType := .Params.type | default "life" }}
{{ $typeConfig := .Site.Params.articleTypes }}
{{ $typeData := index $typeConfig $articleType }}
{{ $excerpt := .Params.excerpt | default .Description | default .Summary }}
{{ $imageURL := "" }}
{{ $useDefaultThumbnail := false }}
{{ if .Params.image }}
{{ $resource := .Resources.GetMatch .Params.image }}
{{ if $resource }}
{{ $imageURL = $resource.RelPermalink }}
{{ else }}
{{ $imageURL = .Params.image }}
{{ end }}
{{ else }}
{{ $useDefaultThumbnail = true }}
{{ end }}
<article class="card group bg-bg">
<!-- Thumbnail -->
{{ if or $imageURL $useDefaultThumbnail }}
<a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
{{ if $useDefaultThumbnail }}
<picture>
<source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
<img
src="/images/default_thumbnail_dark.png"
alt="{{ .Title }}"
class="card-image group-hover:scale-105 transition-transform duration-200"
loading="lazy"
/>
</picture>
{{ else }}
<img
src="{{ $imageURL }}"
alt="{{ .Title }}"
class="card-image group-hover:scale-105 transition-transform duration-200"
loading="lazy"
/>
{{ end }}
<!-- Type badge pill overlay -->
{{ if $typeData }}
<div
class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
>
{{ i18n $articleType }}
</div>
{{ end }}
</a>
{{ end }}
<!-- Content -->
<div class="card-body">
<!-- Pinned badge -->
{{ if .Params.pinned }}
<div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
📌 PINNED
</div>
{{ end }}
<!-- Title -->
<h3 class="text-xl font-semibold">
<a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
{{ .Title }}
</a>
</h3>
<!-- Metadata -->
<div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
<time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
{{ .PublishDate.Format "Jan 2, 2006" }}
</time>
</div>
<!-- Excerpt -->
{{ if $excerpt }}
<p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
{{ $excerpt | plainify }}
</p>
{{ end }}
<!-- CTA Button -->
<a
href="{{ .RelPermalink }}"
class="btn btn-sm mt-2"
>
{{ i18n "readMore" }}
<i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
</a>
</div>
</article>
|
