From 154e559b13f87cd220fa3dfdca3ab5a3c072a61d Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Mon, 7 Apr 2025 15:35:28 +0800
Subject: feat: latest card section in index page

Former-commit-id: fb7259d515305b6e4b5262d132ef06b31300c8db
---
 assets/css/components/_card.scss     | 13 +++++
 assets/css/components/_postlist.scss | 24 +++++++++
 i18n/en.yml                          |  1 +
 i18n/zh.yml                          |  1 +
 layouts/index.html                   | 96 +++++++++++++++++++++++++-----------
 5 files changed, 105 insertions(+), 30 deletions(-)

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 9dd10d32..43a25ca4 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -82,3 +82,16 @@
         }
     }
 }
+
+#latest-cards {
+    .latest-cards-container {
+        display: flex;
+        width: 100%;
+        overflow-x: auto;
+        gap: 1rem;
+        .card {
+            flex-shrink: 0;
+            width: 50%;
+        }
+    }
+}
diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index f2f5c212..87a68026 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -1,3 +1,11 @@
+.index-section-title {
+    font-size: 1.1rem;
+    margin-bottom: 0;
+    font-weight: normal;
+}
+
+/* Post List Styles */
+
 .posts-list {
     display: flex;
     flex-direction: column;
@@ -110,3 +118,19 @@
         display: inline-block;
     }
 }
+
+/* Card List Styles */
+
+#latest-cards {
+    margin: 1rem 0;
+    .latest-cards-container {
+        display: flex;
+        width: 100%;
+        overflow-x: auto;
+        gap: 1rem;
+        .card {
+            flex-shrink: 0;
+            width: 50%;
+        }
+    }
+}
diff --git a/i18n/en.yml b/i18n/en.yml
index cb40236c..e8b32709 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -14,3 +14,4 @@ postNav:
   latest: 'Latest'
   categories: 'Categories'
   tags: 'Tags'
+cards: Cards
diff --git a/i18n/zh.yml b/i18n/zh.yml
index f8e4a3ca..6c66fe75 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -14,3 +14,4 @@ postNav:
   latest: '最新'
   categories: '分类'
   tags: '标签'
+cards: 最近在学
diff --git a/layouts/index.html b/layouts/index.html
index 99323bee..3a7a29ba 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,41 +1,77 @@
 {{ define "main" }}
-    <article class="posts">
+    <article class="index">
       {{ partial "header.html" . }}
       {{ partial "components/postnav.html" . }}
-      <div class="posts-list">
-          {{ $firstPost := true }} <!-- 初始化标记 -->
-          {{ range first 8 (where site.RegularPages "Type" "in" site.Params.mainSections) }}
-          <div class="posts-item"
-              style="view-transition-name: post-{{ .File.UniqueID }}">
-              <header>
-                  <div class="posts-item-meta">
-                      <time>
-                          {{ .Date.Format "Jan 2" }}
-                      </time>
-                      <h3{{ if $firstPost }} style="margin-bottom: 0"{{ end }}>
-                          <a href="{{ .Permalink }}">{{ .Title }}</a>
+
+      <!-- Latest Posts -->
+      <section id="latest-posts">
+          <div class="posts-list">
+              {{ $firstPost := true }} <!-- 初始化标记 -->
+              {{ range first 8 (where site.RegularPages "Type" "in" site.Params.mainSections) }}
+              <div class="posts-item"
+                  style="view-transition-name: post-{{ .File.UniqueID }}">
+                  <header>
+                      <div class="posts-item-meta">
+                          <time>
+                              {{ .Date.Format "Jan 2" }}
+                          </time>
+                          <h3{{ if $firstPost }} style="margin-bottom: 0"{{ end }}>
+                              <a href="{{ .Permalink }}">{{ .Title }}</a>
+                          </h3>
+                      </div>
+                      {{ with .Params.categories }}
+                      <div class="posts-item-category">
+                          <a href="/categories/{{ . }}" style="padding: 0.1rem 0.3rem;">
+                              {{ . }}
+                          </a>
+                      </div>
+                      {{ end }}
+                  </header>
+                  <!-- 如果是第一篇文章，则显示摘要 -->
+                  {{ if $firstPost }}
+                      <div class="markdown-body posts-item-summary"
+                          style="view-transition-name: post-content-{{ .File.UniqueID }}">
+                          {{ .Summary }}
+                      </div>
+                      {{ $firstPost = false }} <!-- 更新为非第一篇 -->
+                  {{ end }}
+              </div>
+              {{ end }}
+          </div>
+          <a href="/posts">查看所有</a>
+      </section>
+
+      {{ if eq .Site.Language.Lang "zh" }}
+      <!-- Latest Cards -->
+      <section id="latest-cards">
+          <h2 class="index-section-title">{{ T "cards" }}</h2>
+          <div class="latest-cards-container">
+              {{- $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 }}" 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>
-                  {{ with .Params.categories }}
-                  <div class="posts-item-category">
-                      <a href="/categories/{{ . }}" style="padding: 0.1rem 0.3rem;">
-                          {{ . }}
-                      </a>
-                  </div>
-                  {{ end }}
-              </header>
-              <!-- 如果是第一篇文章，则显示摘要 -->
-              {{ if $firstPost }}
-                  <div class="markdown-body posts-item-summary"
-                      style="view-transition-name: post-content-{{ .File.UniqueID }}">
+
+                  <div class="card-content markdown-body">
                       {{ .Summary }}
                   </div>
-                  {{ $firstPost = false }} <!-- 更新为非第一篇 -->
-              {{ end }}
+              </div>
+              {{- end }}
           </div>
-          {{ end }}
-      </div>
-      <a href="/posts">查看所有</a>
+      </section>
+      {{ end }}
     </article>
 {{ partial "footer.html" . }}
 {{ end }}
-- 
cgit v1.2.3