From 70f57f4742825abef07d33a72a8d4b149eb038b6 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Mon, 24 Mar 2025 13:02:23 +0800
Subject: feat: add card section and card shortcode

Former-commit-id: 416d8329d1fc766aeb9281ed6c209422e5aab03d
---
 assets/css/components/_shortcodes.scss | 38 ++++++++++++++++++++++++++++++++++
 content/cards/_index.md                |  3 +++
 hugo.yaml                              |  3 +++
 layouts/cards/section.html             | 28 +++++++++++++++++++++++++
 layouts/cards/single.html              | 26 +++++++++++++++++++++++
 layouts/shortcodes/card.html           | 29 ++++++++++++++++++++++++++
 6 files changed, 127 insertions(+)
 create mode 100644 content/cards/_index.md
 create mode 100644 layouts/cards/section.html
 create mode 100644 layouts/cards/single.html
 create mode 100644 layouts/shortcodes/card.html

diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index 92ed9fbf..3ad7387a 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -200,3 +200,41 @@ a.blog-link img {
 .sidenote-content {
     font-size: 1rem
 }
+
+/* card */
+
+.card {
+    border: 1px solid rgba(0,0,0,0.05);
+    border-radius: 2px;
+    padding: 1rem;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    margin: 1rem 0;
+
+    position: relative;
+    .card-corner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%);
+        clip-path: polygon(100% 0, 0 0, 100% 100%);
+    }
+}
+
+.card-tags {
+    margin: 0;
+    font-size: 1rem;
+    a {
+        text-decoration: none
+    }
+}
+
+.card-title {
+    margin: 0;
+}
+
+.card-content {
+    font-size: 1.05rem;
+}
diff --git a/content/cards/_index.md b/content/cards/_index.md
new file mode 100644
index 00000000..584af1b8
--- /dev/null
+++ b/content/cards/_index.md
@@ -0,0 +1,3 @@
+---
+title: 卡片
+---
diff --git a/hugo.yaml b/hugo.yaml
index 83379053..2a7e33a9 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -21,6 +21,9 @@ languages:
       - name: 分类
         link: /categories/
         target: _self
+      - name: 卡片
+        link: /cards/
+        target: _self
       - name: 链接
         link: /links/
         target: _self
diff --git a/layouts/cards/section.html b/layouts/cards/section.html
new file mode 100644
index 00000000..fa0362d3
--- /dev/null
+++ b/layouts/cards/section.html
@@ -0,0 +1,28 @@
+{{ partial "snippets/document-start.html" . }}
+    <article class="card-list">
+      {{ partial "header.html" . }}
+      <div id="cards-section">
+        {{ partial "components/pagefind.html" . }}
+        {{- range .Pages }}
+        <div class="card markdown-body">
+            <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">
+                        {{- range .Params.tags }}
+                            <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
+                        {{- end }}
+                    </p>
+                {{- end }}
+            </div>
+
+            <div class="card-content">
+                {{ .Summary }}
+            </div>
+        </div>
+        {{- end }}
+      </div>
+    </article>
+{{ partial "snippets/document-end.html" . }}
diff --git a/layouts/cards/single.html b/layouts/cards/single.html
new file mode 100644
index 00000000..b80f46c1
--- /dev/null
+++ b/layouts/cards/single.html
@@ -0,0 +1,26 @@
+{{ partial "snippets/document-start.html" . }}
+    <article
+        class="card-page {{ .Site.Language.LanguageName }}"
+        id="article"
+    >
+        {{ partial "components/breadcrumbs.html" . }}
+        <div id="post-content" class="post-content markdown-body">
+            <div class="card">
+                <a href="{{ .Permalink }}" class="card-corner"></a> <!-- 右上角折角 -->
+                <div class="card-header">
+                    <h3 class="card-title">{{ .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>
+        </div>
+    </article>
+{{ partial "snippets/document-end.html" . }}
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
new file mode 100644
index 00000000..a860b72c
--- /dev/null
+++ b/layouts/shortcodes/card.html
@@ -0,0 +1,29 @@
+{{- $card := .Site.GetPage (printf "cards/%s" (.Get 0)) -}}
+{{- $hideHeader := .Get 1 | default "false" | lower -}}
+
+{{- if $card }}
+    <div class="card">
+        <a href="{{ $card.Permalink }}" class="card-corner"></a> <!-- 右上角折角 -->
+
+        {{- if ne $hideHeader "true" }}
+            <div class="card-header">
+                <h3 class="card-title">{{ $card.Title }}</h3>
+                {{- if $card.Params.tags }}
+                    <p class="card-tags">
+                        {{- range $card.Params.tags }}
+                            <a href="{{ "/tags/" | relURL }}{{ . | urlize }}" class="card-tag">#{{ . }}</a>
+                        {{- end }}
+                    </p>
+                {{- end }}
+            </div>
+        {{- end }}
+
+        <div class="card-content">
+            {{- with $card.Content }}
+                {{ . }}
+            {{- end }}
+        </div>
+    </div>
+{{- else }}
+    <p style="color: red;">⚠️ 无法找到卡片: {{ .Get 0 }}</p>
+{{- end }}
-- 
cgit v1.2.3