增加左侧栏菜单

ZebinGao · ZebinGao · commit 8b1f929073cd · 2026-03-31T16:52:31.000+08:00
diff --git a/source/smallgame/trick/index.html b/source/smallgame/trick/index.html
@@ -4,7 +4,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>神秘礼物</title>
+    <meta charset="UTF-8"> <title>神秘礼物</title>
 </head>
 <body>
 
@@ -15,7 +15,7 @@ <h1>这里什么都没有...真的吗？</h1>
         alert("节日快乐 4月1日的英雄 ")
 
 alert("谢某人祝您节日快乐！")
-
+        
 alert("哈哈，上当了吗？")
 
 alert("别难过了~~~")
diff --git a/themes/Zebin-Theme/_config.yml b/themes/Zebin-Theme/_config.yml
@@ -1,2 +1,22 @@
 # 主题配置文件
-avatar: /img/avatar.png
+avatar: /img/avatar.png
+
+# 主题菜单配置
+menu:
+  首页: /
+  归档: /archives
+  友链: /links
+  关于: /about
+  番茄钟定时器: /pomodoro
+  2048小游戏: /smallgame/2048
+  谢益辉的恶作剧: /smallgame/trick
+
+# 为每个菜单项分配一个图标
+menu_icons:
+  首页: 🏠
+  归档: 🗂️
+  友链: 🤝
+  关于: 🙋‍♂️
+  番茄钟定时器: 🍅
+  2048小游戏: 🎮
+  谢益辉的恶作剧: 🤡
diff --git a/themes/Zebin-Theme/layout/layout.ejs b/themes/Zebin-Theme/layout/layout.ejs
@@ -17,10 +17,12 @@
             </div>
             
             <nav class="site-nav">
-                <a href="/"><span>🏠</span> 首页</a>
-                <a href="/archives"><span>🗂️</span> 归档</a>
-                <a href="/links"><span>🤝</span> 友链</a>
-                <a href="/about"><span>🙋‍♂️</span> 关于</a>
+                <% for (var name in theme.menu) { %>
+                    <a href="<%- url_for(theme.menu[name]) %>">
+                        <span><%- theme.menu_icons[name] || '📄' %></span> 
+                        <%- name %>
+                    </a>
+                <% } %>
             </nav>
             
             <div class="social-links">
diff --git a/themes/Zebin-Theme/source/css/style.css b/themes/Zebin-Theme/source/css/style.css
@@ -11,9 +11,9 @@ body {
 .main-container {
     display: grid;
     /* 划重点：左栏 240px，中间自适应剩下的空间，右栏 240px */
-    grid-template-columns: 240px 1fr 240px; 
+    grid-template-columns: 200px 1fr 220px; 
     gap: 30px; /* 三栏之间的间距 */
-    max-width: 1200px; /* 网站最大宽度 */
+    max-width: 1350px; /* 网站最大宽度 */
     margin: 40px auto; /* 上下留白，左右居中 */
     padding: 0 20px;
     align-items: start; /* 让左右侧边栏能在顶部对齐 */
@@ -41,7 +41,8 @@ body {
 .content-mid {
     background: #fff;
     border-radius: 12px;
-    padding: 40px;
+    /* 原来是 padding: 40px; 可以改成上下 40px，左右 30px */
+    padding: 40px 30px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.05);
     min-height: 80vh; /* 保证高度足够好看 */
 }
@@ -165,18 +166,30 @@ body {
 .site-nav {
     display: flex;
     flex-direction: column;
-    margin-top: 20px;
-    gap: 8px;
+    margin-top: 15px; /* 稍微缩小顶部间距 */
+    gap: 4px;        /* 缩小项与项之间的间距，防止列表过长溢出容器 */
 }
+
 .site-nav a {
     display: flex;
     align-items: center;
-    padding: 10px 15px;
+    padding: 8px 15px; /* 缩小上下内边距 */
     color: #555;
     text-decoration: none;
     border-radius: 8px;
     transition: all 0.3s ease;
-    font-size: 0.95rem;
+    font-size: 0.9rem; /* 稍微调小一点字号，看起来更精致 */
+}
+
+/* 如果菜单实在太多，可以让侧边栏内部产生滚动条 */
+.sidebar-left {
+    max-height: calc(100vh - 80px); /* 限制高度为屏幕高度减去边距 */
+    overflow-y: auto;               /* 内容多时自动出现滚动条 */
+}
+
+/* 隐藏侧边栏那条丑陋的滚动条，但保留滚动功能 */
+.sidebar-left::-webkit-scrollbar {
+    width: 0px;
 }
 .site-nav a span {
     margin-right: 12px;
