refactor: reuse card items

5 files changed, 32 insertions, 66 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 491604b6..8e03cc1d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -25,6 +25,10 @@
 
     .card-title {
         margin: 0;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
     }
 
     .card-content {
diff --git a/layouts/cards/section.html b/layouts/cards/section.html
index 7e24facc..4ec8f4ee 100644
--- a/layouts/cards/section.html
+++ b/layouts/cards/section.html
@@ -5,25 +5,7 @@
             {{- $cards := .Site.GetPage "section" "cards" }}  <!-- 获取 "cards" 部分的内容 -->
             {{- $paginator := .Paginate $cards.Pages 10 }}  <!-- 对该部分内容进行分页 -->
             {{- range $paginator.Pages }}
-            <div class="card"
-                style="view-transition-name: card-{{ .File.UniqueID }}">
-                <div class="card-header">
-                    <h3 class="card-title">
-                        <a href="{{ .Permalink }}" class="card-title-link">{{ .Title }}</a>
-                    </h3>
-                    {{- if .Params.tags }}
-                        <p class="card-tags markdown-body">
-                            {{- range .Params.tags }}
-                                <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
-                            {{- end }}
-                        </p>
-                    {{- end }}
-                </div>
-
-                <div class="card-content markdown-body">
-                    {{ .Summary }}
-                </div>
-            </div>
+                {{ partial "items/card" (dict "context" . "summary" true) }}
             {{- end }}
         </div>
 
diff --git a/layouts/cards/single.html b/layouts/cards/single.html
index d75d1ffa..846f985b 100644
--- a/layouts/cards/single.html
+++ b/layouts/cards/single.html
@@ -7,28 +7,7 @@
                 style="view-transition-name: title-image"
             />
         </a>
-        <div class="card markdown-body post-content"
-            style="view-transition-name: card-{{ .File.UniqueID }}">
-            <div class="card-header">
-                <h3 class="card-title"
-                    data-pagefind-meta="title"
-                    data-pagefind-sort="date[data-date], weight[data-weight]"
-                    data-date="{{ .Date.Format "2006-01-02" }}"
-                    data-weight="5">
-                        {{ .Title }}
-                </h3>
-                {{- if .Params.tags }}
-                    <p class="card-tags">
-                        {{- range .Params.tags }}
-                            <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
-                        {{- end }}
-                    </p>
-                {{- end }}
-            </div>
-            <div class="card-content">
-                {{ .Content }}
-            </div>
-        </div>
+        {{ partial "items/card" (dict "context" .) }}
 
         {{- /* 查询引用了这个卡片的文章 */ -}}
         {{- $currentCard := .File.BaseFileName -}}  <!-- 获取当前卡片的文件名 -->
diff --git a/layouts/index.html b/layouts/index.html
index 1074574f..cc1042fd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -13,9 +13,7 @@
                   <header>
                       <div class="posts-item-meta">
                           <p class="font-mono">
-                              <time>
-                                  {{ .Date.Format "Jan 2" }},
-                              </time>
+                              <time>{{ .Date.Format "January 2" }},</time>
                               <span>in <a href="/{{ .Section }}/">{{ .Section }}</a></span>
                           </p>
                           <h2 class="posts-item-title"
@@ -67,28 +65,7 @@
               {{- $cards := .Site.GetPage "section" "cards" }}  <!-- 获取 "cards" 部分的内容 -->
               {{- $paginator := .Paginate $cards.Pages 4 }}  <!-- 对该部分内容进行分页 -->
               {{- range $paginator.Pages }}
-              <div class="card"
-                  style="view-transition-name: card-{{ .File.UniqueID }}">
-                  <div class="card-header">
-                      <h3 class="card-title">
-                          <a
-                              href="{{ .Permalink }}"
-                              data-umami-event="🏠 Click card link from index"
-                              class="card-title-link">{{ .Title }}</a>
-                      </h3>
-                      {{- if .Params.tags }}
-                          <p class="card-tags markdown-body">
-                              {{- range .Params.tags }}
-                                  <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
-                              {{- end }}
-                          </p>
-                      {{- end }}
-                  </div>
-
-                  <div class="card-content markdown-body">
-                      {{ .Summary }}
-                  </div>
-              </div>
+                {{ partial "items/card" (dict "context" . "summary" true) }}
               {{- end }}
           </div>
           <div style="margin: 1rem 0">
diff --git a/layouts/partials/items/card.html b/layouts/partials/items/card.html
new file mode 100644
index 00000000..011d78fa
--- /dev/null
+++ b/layouts/partials/items/card.html
@@ -0,0 +1,24 @@
+{{ $ctx := .context }}
+{{ $showSummary := .summary }}
+<div class="card markdown-body post-content"
+    style="view-transition-name: card-{{ $ctx.File.UniqueID }}">
+    <div class="card-header">
+        <h3 class="card-title"
+            data-pagefind-meta="title"
+            data-pagefind-sort="date[data-date], weight[data-weight]"
+            data-date="{{ .Date.Format "2006-01-02" }}"
+            data-weight="5">
+                <a href="{{ $ctx.RelPermalink }}">{{ $ctx.Title }}</a>
+        </h3>
+        {{- if $ctx.Params.tags }}
+            <p class="card-tags">
+                {{- range $ctx.Params.tags }}
+                    <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
+                {{- end }}
+            </p>
+        {{- end }}
+    </div>
+    <div class="card-content">
+        {{ if $showSummary }}{{ $ctx.Summary }}{{ else }}{{ $ctx.Content }}{{ end }}
+    </div>
+</div>