fixed 增加相册模式

content/album.md

@@ -0,0 +1,8 @@
+---
+title: "光影"
+date: 2024-01-29
+layout: "album"
+menu: "main"
+slug: "album"
+draft: false
+---

data/album.yml

@@ -0,0 +1,5 @@
+
+- title: "青梅酒不错"
+  image: "/album/青梅酒.jpg"
+  date: "2026-01-29"
+  description: "青梅酒还不错"

hugo.toml

@@ -156,31 +156,36 @@ hasCJKLanguage = true
 # ==============================================================================
 
 [[menu.main]]
-  name = "优世界"
+  name = "首页"
   pageRef = "/"
   weight = 10
 
 [[menu.main]]
-  name = "about"
+  name = "关于"
   url = "/about.html"
   weight = 20
 
 [[menu.main]]
-  name = "comment"
-  url = "/comment.html"
-  weight = 20
+  name = "光影"
+  url = "/album.html"
+  weight = 25
 
 [[menu.main]]
-  name = "links"
-  url = "/links.html"
-  weight = 20
-
-[[menu.main]]
-  name = "circles"
+  name = "友圈"
   url = "/circles.html"
   weight = 30
 
 [[menu.main]]
-  name = "archives"
+  name = "留言"
+  url = "/comment.html"
+  weight = 40
+
+[[menu.main]]
+  name = "归档"
   url = "/archives.html"
-  weight = 20
+  weight = 50
+
+[[menu.main]]
+  name = "友链"
+  url = "/links.html"
+  weight = 60

themes/Ying/assets/css/main.css

@@ -3709,6 +3709,141 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
     to { opacity: 1; transform: translateX(0); }
 }
 
+/* Album / Light and Shadow Page Styles - Waterfall Flow Refined */
+.album-content {
+    column-count: 4;
+    column-gap: 5px; /* Tighter gap */
+    margin-top: 20px;
+}
+
+.album-item {
+    position: relative;
+    width: 100%;
+    margin-bottom: 5px; /* Tighter vertical gap */
+    break-inside: avoid;
+    border-radius: 2px; /* Sharper corners */
+    background: #f0f0f0;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    overflow: hidden;
+    backface-visibility: hidden;
+    opacity: 0; /* Start hidden for fade-in */
+    animation: fadeIn 0.6s ease forwards; /* Fade in animation */
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.album-img-box {
+    width: 100%;
+    position: relative;
+    font-size: 0;
+}
+
+.album-img-box img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.5s ease;
+}
+
+.album-item:hover .album-img-box img {
+    transform: scale(1.05); /* Subtler zoom */
+}
+
+/* Date Badge - Top Left */
+.album-date-badge {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(2px);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 0.7rem;
+    pointer-events: none;
+    z-index: 2;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+}
+
+/* Title Info - Bottom Overlay */
+.album-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 30px 8px 8px;
+    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
+    color: #fff;
+    opacity: 0; /* Default hidden */
+    transform: translateY(0); /* No movement, just fade */
+    transition: opacity 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    pointer-events: none;
+}
+
+.album-item:hover .album-info {
+    opacity: 1;
+}
+
+.album-title {
+    font-size: 0.85rem;
+    font-weight: 400;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+    margin: 0;
+    line-height: 1.2;
+}
+
+/* Dark Mode Adjustments */
+[data-theme="dark"] .album-item {
+    background: #1a1a1a;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .album-content {
+        column-count: 3;
+    }
+}
+
+@media (max-width: 768px) {
+    .album-content {
+        column-count: 2;
+        column-gap: 4px;
+    }
+    
+    .album-item {
+        margin-bottom: 4px;
+    }
+    
+    .album-info {
+        opacity: 1; /* Always show text on mobile */
+        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
+        padding: 20px 6px 6px;
+    }
+    
+    .album-title {
+        font-size: 0.8rem;
+    }
+    
+    .album-date-badge {
+        top: 4px;
+        left: 4px;
+        font-size: 0.65rem;
+        padding: 1px 4px;
+    }
+
+    /* Hide specific elements on mobile */
+    .mobile-hidden {
+        display: none !important;
+    }
+}
+
 
 
 

themes/Ying/layouts/_default/album.html

@@ -0,0 +1,19 @@
+{{ define "main" }}
+<div id="pjax-container">
+    <div class="post-content" itemprop="articleBody">
+        <div class="album-content">
+            {{ range site.Data.album }}
+            <div class="album-item">
+                <div class="album-img-box">
+                    <img src="{{ .image }}" loading="lazy">
+                    {{ if .date }}<span class="album-date-badge">{{ .date }}</span>{{ end }}
+                    <div class="album-info">
+                        <span class="album-title">{{ .title }}</span>
+                    </div>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}

themes/Ying/layouts/partials/header.html

@@ -26,12 +26,9 @@
             </div>
             <nav class="nav">
                 <ul class="flat">
-                    <li class="active"><a href="/">首页</a></li>
-                    <li class="active"><a href="/about.html">关于</a></li>
-                    <li class="active"><a href="/circles.html">友圈</a></li>
-                    <li class="active"><a href="/comment.html">留言</a></li>
-                    <li class="active"><a href="/archives.html">归档</a></li>
-                    <li class="active"><a href="/links.html">友链</a></li>
+                    {{ range site.Menus.main }}
+                    <li class="active {{ if eq .Name "光影" }}mobile-hidden{{ end }}"><a href="{{ .URL }}">{{ .Name }}</a></li>
+                    {{ end }}
                 </ul>
             </nav>
         </div>