feat(theme): new header in index page

5 files changed, 153 insertions, 5 deletions

diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
index 61a88aae..ab49a877 100644
--- a/assets/css/components/_pages.scss
+++ b/assets/css/components/_pages.scss
@@ -69,6 +69,60 @@
   color: var(--secondary-text-color)
 }
 
+/* post series */
+
+#posts-header {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+
+    #post-series {
+        #post-series-list {
+            display: flex;
+            gap: 1rem;
+            margin: 1rem;
+            .post-series-item {
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+                transition: .3s;
+                cursor: pointer;
+
+                @include bordered;
+
+                .post-series-cover {
+                    img {
+                        display: block;
+                        width: 8rem;
+                    }
+                }
+                .post-series-text {
+                    background-color: var(--block-background-color);
+                    h3 {
+                        margin: 0;
+                        text-align: center;
+                    }
+                }
+
+                &:hover {
+                    text-decoration: none;
+                    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2);
+                    transform: translateY(-.5rem)
+                }
+            }
+        }
+    }
+
+    #posts-recommendation {
+        #posts-recommendation-links {
+            display: flex;
+            flex-direction: column;
+            gap: .5rem
+        }
+    }
+}
+
+
+
 /* post */
 
 .post-header {
diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss
index 8d29ea32..1e694bd8 100644
--- a/assets/css/components/_reset.scss
+++ b/assets/css/components/_reset.scss
@@ -30,3 +30,30 @@ a:hover {
 ul {
   list-style-type: square;
 }
+
+button {
+    border: none;
+    outline: none;
+    color: var(--text-color);
+    font-size: 1rem;
+    font-family: var(--serif-font-family);
+    cursor: pointer
+}
+
+.button {
+    display: block;
+    background-color: var(--block-background-color);
+    width: 100%;
+    padding: .5rem;
+    font-size: 1rem;
+    text-align: center;
+    box-sizing: border-box;
+    @include bordered;
+
+    &a {
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
index 11eded55..bf7fe601 100644
--- a/assets/css/components/_variables.scss
+++ b/assets/css/components/_variables.scss
@@ -15,11 +15,6 @@
   --serif-font-family:  "Noto Serif SC", serif;
   --content-font-size: 20px;
 
-  /* waline */
-  --waline-font-size: 20px;
-  --waline-border-color: var(--border-color);
-  --waline-bg-color: var(--background-color);
-
   --page-width: 700px;
 }
 
@@ -42,3 +37,12 @@
     --link-color: #277BD9;
   }
 }
+
+@mixin bordered {
+    border-radius: .5rem;
+    border: 1px solid var(--border-color);
+}
+
+@mixin shadowed {
+
+}
diff --git a/hugo.yaml b/hugo.yaml
index 22770b69..4f63bcd0 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -41,6 +41,19 @@ params:
     - name: 链接
       link: /links/
       target: _self
+  series:
+    - name: 人类恶疾
+      link: /categories/人类恶疾/
+      cover: https://image.guhub.cn/uPic/2025/01/%E4%BA%BA%E7%B1%BB%E6%81%B6%E7%96%BE.jpeg
+      description: 尝试以非专业的病理视角分析人类行为
+    - name: 塔罗牌漫谈
+      link: /categories/塔罗牌漫谈/
+      cover: https://image.guhub.cn/uPic/2025/01/%E5%A1%94%E7%BD%97%E7%89%8C%E6%BC%AB%E8%B0%88%E5%B0%81%E9%9D%A2.jpeg
+      description: 随便聊聊牌意
+    - name: 稻草人周刊
+      link: /categories/稻草人周刊/
+      cover: https://image.guhub.cn/uPic/2025/01/%E7%A8%BB%E8%8D%89%E4%BA%BA%E5%91%A8%E5%88%8A.jpeg
+      description: 个人化的信息整合，每周一更新
 services:
   rss:
     limit: 10
diff --git a/layouts/index.html b/layouts/index.html
index eddfebb9..6db229d0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,56 @@
 {{ partial "snippets/document-start.html" . }}
     <article class="posts">
       {{ partial "header.html" . }}
+
+
+      <header id="posts-header">
+          <div id="post-series">
+              <h1>专栏</h1>
+              <div id="post-series-list">
+                  {{ range .Site.Params.series }}
+                    <a class="post-series-item"
+                        href="{{ .link }}"
+                        title="{{ .description }}"
+                        data-umami-event="Click series link from index"
+                    >
+                        <div class="post-series-cover">
+                            <img src="{{ .cover }}" />
+                        </div>
+                        <div class="post-series-text">
+                            <h3>{{ .name }}</h3>
+                        </div>
+                    </a>
+                  {{ end }}
+              </div>
+          </div>
+          <div id="posts-recommendation">
+              <h1>欢迎</h1>
+              <script>
+                const posts = [
+                  {{ range site.RegularPages }}
+                  "{{ .RelPermalink }}",
+                  {{ end }}
+                ];
+
+                function getRandomPost() {
+                  const randomPostLink = document.getElementById("random-post-link")
+                  const randomIndex = Math.floor(Math.random() * posts.length);
+                  randomPostLink.href = posts[randomIndex];
+                }
+                getRandomPost()
+              </script>
+              <div id="posts-recommendation-links">
+                  <a class="button" id="random-post-link"
+                      onclick="getRandomPost()"
+                  >🎲 随机文章</a>
+                  <a class="button" href="https://www.travellings.cn/go.html"
+                      target="_blank">🚇 开往</a>
+                  <a class="button" href="https://www.guhub.cn/"
+                      target="_blank">🏠 我的主页</a>
+              </div>
+          </div>
+      </header>
+
       <div id="posts-list">
         {{ $currentYear := now.Format "2006" }}  <!-- 获取当前年份 -->