v0.4.0: 重做图库为瀑布流+分组导航，修复豆瓣 500 与瞬间样式，友链卡片重排+申请弹窗，标签云间距，移除关于模板

.gitignore

@@ -27,3 +27,4 @@ dist-ssr
 .gradle
 build
 templates
+.workbuddy/

README.md

@@ -40,7 +40,6 @@
 
 | 模板名  | 模板文件                  | 说明                    |
 | ---- | --------------------- | --------------------- |
-| 关于   | `page_about.html`     | 关于页，头像 / 简介 / 社交链接可配置 |
 | 留言板  | `page_guestbook.html` | 以评论区作为留言板的单页          |
 | 微信读书 | `weread.html`         | 微信读书书架展示，依赖微信读书插件     |
 | 豆瓣页面 | `douban.html`         | 豆瓣记录页，依赖豆瓣插件          |
@@ -129,7 +128,7 @@ pnpm check
 │   ├── error/           # 404 与通用错误页
 │   ├── css/main.css     # 全部样式（双主题变量、响应式、正文排版）
 │   ├── js/              # main.ts 全站脚本 / post.ts 文章脚本 / lightbox.ts 灯箱
-│   ├── index.html post.html page.html page_about.html
+│   ├── index.html post.html page.html
 │   ├── archives.html category.html tag.html categories.html tags.html author.html
 │   ├── moments.html moment.html photos.html important-dates.html
 │   ├── weread.html douban.html links.html links-subscribe.html page_guestbook.html

i18n/default.properties

@@ -30,9 +30,6 @@ error.404.message=Sorry, the page you visited does not exist or has been deleted
 error.back.home=Back to home
 error.back.prev=Go back
 footer.theme=Theme by {0}
-about.social.github=GitHub
-about.social.twitter=Twitter
-about.social.email=Email
 post.words={0} words
 post.reading_time=About {0} min
 archive.stats.words=Total words
@@ -47,7 +44,5 @@ stats.comments={0} comments
 stats.visits={0} visits
 stats.words={0} words
 douban.plugin_required=Douban plugin (plugin-douban) not detected. Please install and enable it, then set your Douban ID in the plugin settings.
-photos.photo_count={0} photos
-photos.back=Back to all albums
 moment.back_to_list=Back to moments
 moment.tags=Tags

i18n/zh_CN.properties

@@ -30,9 +30,6 @@ error.404.message=抱歉，您访问的页面不存在或已被删除。
 error.back.home=返回首页
 error.back.prev=返回上页
 footer.theme=Theme by {0}
-about.social.github=GitHub
-about.social.twitter=Twitter
-about.social.email=邮箱
 post.words={0} 字
 post.reading_time=约 {0} 分钟
 archive.stats.words=总字数
@@ -47,7 +44,5 @@ stats.comments={0} 条评论
 stats.visits={0} 次访问
 stats.words={0} 字
 douban.plugin_required=未检测到豆瓣插件（plugin-douban），请安装并启用后在插件设置中填写豆瓣 ID。
-photos.photo_count={0} 张照片
-photos.back=返回全部相册
 moment.back_to_list=返回瞬间列表
 moment.tags=标签

settings.yaml

@@ -60,34 +60,6 @@ spec:
           label: 首页展示置顶文章
           value: true
           help: 在首页顶部以大标题样式展示最新的一篇置顶文章（需在文章设置中开启置顶）
-    - group: about
-      label: 关于页面
-      formSchema:
-        - $formkit: attachment
-          name: avatar
-          label: 博主头像
-          value: ""
-          help: 关于页面展示的头像，留空则使用站点 Logo
-        - $formkit: textarea
-          name: bio
-          label: 个人简介
-          value: "一个热爱生活、热爱技术的普通人"
-          help: 关于页面头像下方显示的简介
-        - $formkit: text
-          name: github_url
-          label: GitHub 链接
-          value: ""
-          placeholder: https://github.com/yourname
-        - $formkit: text
-          name: twitter_url
-          label: Twitter 链接
-          value: ""
-          placeholder: https://x.com/yourname
-        - $formkit: text
-          name: contact_email
-          label: 联系邮箱
-          value: ""
-          placeholder: mail@example.com
     - group: seo
       label: SEO
       formSchema:
@@ -158,34 +130,3 @@ spec:
           name: show_words
           label: 全站总字数（需 extra-api 插件）
           value: true
-    - group: photos
-      label: 图库
-      formSchema:
-        - $formkit: checkbox
-          name: preview_default
-          label: 相册默认开启预览模式
-          value: true
-          help: 进入相册瀑布流时默认开启点击放大预览，访客可在前台自行切换
-        - $formkit: repeater
-          name: album_covers
-          label: 相册封面
-          value: []
-          help: 为相册手动指定封面；不配置时自动使用相册内第一张图片。「相册」直接从图库插件已存在的分组中选择
-          children:
-            - $formkit: select
-              name: group
-              label: 相册
-              validation: required
-              clearable: true
-              searchable: true
-              action: /apis/console.api.photo.halo.run/v1alpha1/photogroups
-              requestOption:
-                method: GET
-                itemsField: ""
-                labelField: spec.displayName
-                valueField: metadata.name
-              help: 选项自动取自图库插件中已创建的相册分组（需安装并启用图库插件）
-            - $formkit: attachment
-              name: cover
-              label: 封面图
-              validation: required

src/douban.html

@@ -79,8 +79,9 @@
       ></p>
 
       <th:block th:if="${pluginFinder.available('plugin-douban')}">
+        <!-- 读过 -->
         <th:block
-          th:with="movies=${doubanFinder.getMovies(24, 0, 'book', 'done')}"
+          th:with="res=${doubanFinder.list(1, 24, 'book', 'done')}, movies=${res != null ? res.items : null}"
         >
           <div
             class="douban-section"
@@ -91,27 +92,28 @@
               <a
                 th:each="m : ${movies}"
                 class="douban-card"
-                th:href="${m.spec.link}"
+                th:href="${m.link}"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <img
                   class="douban-cover"
-                  th:src="${m.spec.poster}"
+                  th:src="${m.poster}"
-                  th:alt="${m.spec.name}"
+                  th:alt="${m.name}"
                   loading="lazy"
+                  decoding="async"
                 />
-                <p class="douban-name" th:text="${m.spec.name}">名称</p>
+                <p class="douban-name" th:text="${m.name}">名称</p>
                 <p class="douban-meta">
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.year)}"
+                    th:if="${not #strings.isEmpty(m.year)}"
-                    th:text="${m.spec.year}"
+                    th:text="${m.year}"
                     >年份</span
                   >
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.douban_score)}"
+                    th:if="${not #strings.isEmpty(m.score)}"
                     class="douban-score"
-                    th:text="'★ ' + ${m.spec.douban_score}"
+                    th:text="'★ ' + ${m.score}"
                     >评分</span
                   >
                 </p>
@@ -119,8 +121,10 @@
             </div>
           </div>
         </th:block>
+
+        <!-- 在读 -->
         <th:block
-          th:with="movies=${doubanFinder.getMovies(24, 0, 'book', 'doing')}"
+          th:with="res=${doubanFinder.list(1, 24, 'book', 'doing')}, movies=${res != null ? res.items : null}"
         >
           <div
             class="douban-section"
@@ -131,27 +135,28 @@
               <a
                 th:each="m : ${movies}"
                 class="douban-card"
-                th:href="${m.spec.link}"
+                th:href="${m.link}"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <img
                   class="douban-cover"
-                  th:src="${m.spec.poster}"
+                  th:src="${m.poster}"
-                  th:alt="${m.spec.name}"
+                  th:alt="${m.name}"
                   loading="lazy"
+                  decoding="async"
                 />
-                <p class="douban-name" th:text="${m.spec.name}">名称</p>
+                <p class="douban-name" th:text="${m.name}">名称</p>
                 <p class="douban-meta">
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.year)}"
+                    th:if="${not #strings.isEmpty(m.year)}"
-                    th:text="${m.spec.year}"
+                    th:text="${m.year}"
                     >年份</span
                   >
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.douban_score)}"
+                    th:if="${not #strings.isEmpty(m.score)}"
                     class="douban-score"
-                    th:text="'★ ' + ${m.spec.douban_score}"
+                    th:text="'★ ' + ${m.score}"
                     >评分</span
                   >
                 </p>
@@ -159,8 +164,10 @@
             </div>
           </div>
         </th:block>
+
+        <!-- 看过 -->
         <th:block
-          th:with="movies=${doubanFinder.getMovies(24, 0, 'movie', 'done')}"
+          th:with="res=${doubanFinder.list(1, 24, 'movie', 'done')}, movies=${res != null ? res.items : null}"
         >
           <div
             class="douban-section"
@@ -171,27 +178,28 @@
               <a
                 th:each="m : ${movies}"
                 class="douban-card"
-                th:href="${m.spec.link}"
+                th:href="${m.link}"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <img
                   class="douban-cover"
-                  th:src="${m.spec.poster}"
+                  th:src="${m.poster}"
-                  th:alt="${m.spec.name}"
+                  th:alt="${m.name}"
                   loading="lazy"
+                  decoding="async"
                 />
-                <p class="douban-name" th:text="${m.spec.name}">名称</p>
+                <p class="douban-name" th:text="${m.name}">名称</p>
                 <p class="douban-meta">
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.year)}"
+                    th:if="${not #strings.isEmpty(m.year)}"
-                    th:text="${m.spec.year}"
+                    th:text="${m.year}"
                     >年份</span
                   >
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.douban_score)}"
+                    th:if="${not #strings.isEmpty(m.score)}"
                     class="douban-score"
-                    th:text="'★ ' + ${m.spec.douban_score}"
+                    th:text="'★ ' + ${m.score}"
                     >评分</span
                   >
                 </p>
@@ -199,8 +207,10 @@
             </div>
           </div>
         </th:block>
+
+        <!-- 在追 -->
         <th:block
-          th:with="movies=${doubanFinder.getMovies(24, 0, 'drama', 'doing')}"
+          th:with="res=${doubanFinder.list(1, 24, 'drama', 'doing')}, movies=${res != null ? res.items : null}"
         >
           <div
             class="douban-section"
@@ -211,27 +221,28 @@
               <a
                 th:each="m : ${movies}"
                 class="douban-card"
-                th:href="${m.spec.link}"
+                th:href="${m.link}"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <img
                   class="douban-cover"
-                  th:src="${m.spec.poster}"
+                  th:src="${m.poster}"
-                  th:alt="${m.spec.name}"
+                  th:alt="${m.name}"
                   loading="lazy"
+                  decoding="async"
                 />
-                <p class="douban-name" th:text="${m.spec.name}">名称</p>
+                <p class="douban-name" th:text="${m.name}">名称</p>
                 <p class="douban-meta">
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.year)}"
+                    th:if="${not #strings.isEmpty(m.year)}"
-                    th:text="${m.spec.year}"
+                    th:text="${m.year}"
                     >年份</span
                   >
                   <span
-                    th:if="${not #strings.isEmpty(m.spec.douban_score)}"
+                    th:if="${not #strings.isEmpty(m.score)}"
                     class="douban-score"
-                    th:text="'★ ' + ${m.spec.douban_score}"
+                    th:text="'★ ' + ${m.score}"
                     >评分</span
                   >
                 </p>

src/links.html

@@ -31,37 +31,61 @@
       .links-list a {
         display: flex;
         align-items: flex-start;
-        gap: 0.75rem;
+        gap: 0.8rem;
-        padding: 1rem;
+        padding: 1.1rem 1.25rem;
         width: 100%;
         box-sizing: border-box;
         border: 1px solid var(--color-border);
-        border-radius: var(--radius-md);
+        border-radius: var(--radius-lg, 0.75rem);
         background: var(--color-bg-secondary);
         color: var(--color-text);
-        transition: border-color var(--transition-fast);
+        transition:
+          border-color var(--transition-fast),
+          box-shadow var(--transition-fast);
       }
       .links-list a:hover {
         border-color: var(--color-primary);
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
       }
-      .links-list img {
+      .links-avatar {
-        width: 2.5rem;
+        position: relative;
-        height: 2.5rem;
+        display: block;
-        border-radius: var(--radius-sm);
-        object-fit: cover;
         flex-shrink: 0;
       }
+      .links-avatar img {
+        display: block;
+        width: 2.75rem;
+        height: 2.75rem;
+        border-radius: var(--radius-md);
+        object-fit: cover;
+        background: var(--color-bg);
+      }
+      /* 头像右下角状态圆点 */
+      .links-avatar::after {
+        content: "";
+        position: absolute;
+        right: -0.1rem;
+        bottom: -0.1rem;
+        width: 0.55rem;
+        height: 0.55rem;
+        border-radius: 50%;
+        background: #2ea043;
+        border: 2px solid var(--color-bg-secondary);
+      }
       .links-list .links-body {
         display: flex;
         flex-direction: column;
         min-width: 0;
+        padding-top: 0.1rem;
       }
       .links-list .links-name {
         font-weight: 600;
+        line-height: 1.4;
       }
       .links-list .links-desc {
-        margin: 0.25rem 0 0;
+        margin: 0.3rem 0 0;
         font-size: 0.85rem;
+        line-height: 1.55;
         color: var(--color-text-secondary);
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -77,18 +101,79 @@
       .links-section:first-of-type .links-group-title {
         margin-top: 0;
       }
+      /* 申请友链按钮 */
       .links-apply {
-        margin-top: 2rem;
+        margin-top: 2.5rem;
         text-align: center;
       }
-      .link-apply-panel {
+      .btn-apply {
-        max-width: 32rem;
+        display: inline-block;
-        margin: 1.25rem auto 0;
+        padding: 0.6rem 1.75rem;
-        text-align: left;
+        border: 1px solid var(--color-primary);
+        border-radius: var(--radius-full);
+        background: var(--color-primary);
+        color: #fff;
+        font: inherit;
+        font-size: 0.95rem;
+        cursor: pointer;
+        transition:
+          opacity var(--transition-fast),
+          transform var(--transition-fast);
+      }
+      .btn-apply:hover {
+        opacity: 0.88;
+      }
+      .btn-apply:active {
+        transform: scale(0.97);
+      }
+
+      /* 申请弹窗（运行时移至 body 下，避免被父级 stacking context 遮挡） */
+      .link-apply-modal[hidden] {
+        display: none;
+      }
+      .link-apply-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1000;
+      }
+      .link-apply-dialog {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: min(26rem, calc(100vw - 2rem));
+        max-height: min(85vh, 44rem);
+        overflow-y: auto;
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg, 0.75rem);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
+        padding: 1.5rem;
+        z-index: 1001;
+      }
+      .link-apply-close {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        width: 2rem;
+        height: 2rem;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--color-text-muted);
+        font-size: 1.4rem;
+        line-height: 1;
+        cursor: pointer;
+      }
+      .link-apply-close:hover {
+        color: var(--color-text);
+        background: var(--color-bg-secondary);
       }
       .link-apply-title {
-        margin: 0 0 0.75rem;
+        margin: 0 0 1rem;
         font-size: 1.125rem;
+        padding-right: 2rem;
       }
       .apply-form .form-row {
         margin-bottom: 1rem;
@@ -174,12 +259,14 @@
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <span class="links-avatar">
                   <img
                     th:if="${not #strings.isEmpty(link.spec.logo)}"
                     th:src="@{${link.spec.logo}}"
                     alt=""
                     loading="lazy"
                   />
+                </span>
                 <span class="links-body">
                   <span class="links-name" th:text="${link.spec.displayName}"
                     >链接名称</span
@@ -206,12 +293,14 @@
                 target="_blank"
                 rel="noopener noreferrer"
               >
+                <span class="links-avatar">
                   <img
                     th:if="${not #strings.isEmpty(link.spec.logo)}"
                     th:src="@{${link.spec.logo}}"
                     alt=""
                     loading="lazy"
                   />
+                </span>
                 <span class="links-body">
                   <span class="links-name" th:text="${link.spec.displayName}"
                     >链接名称</span
@@ -235,12 +324,14 @@
               target="_blank"
               rel="noopener noreferrer"
             >
+              <span class="links-avatar">
                 <img
                   th:if="${not #strings.isEmpty(link.spec.logo)}"
                   th:src="@{${link.spec.logo}}"
                   alt=""
                   loading="lazy"
                 />
+              </span>
               <span class="links-body">
                 <span class="links-name" th:text="${link.spec.displayName}"
                   >链接名称</span
@@ -259,14 +350,35 @@
 
       <div class="links-apply">
         <button
-          class="btn btn-primary"
+          class="btn-apply"
           id="link-apply-toggle"
           type="button"
           th:text="#{links.apply}"
         >申请友链</button>
-        <div class="link-apply-panel apply-form" id="link-apply-panel" hidden>
+      </div>
-          <h2 class="link-apply-title" th:text="#{links.apply}">申请友链</h2>
+    </section>
-          <form id="link-apply-form" novalidate>
+
+    <!-- 申请友链弹窗：脚本运行时移至 body 下 -->
+    <div class="link-apply-modal" id="link-apply-modal" hidden>
+      <div class="link-apply-backdrop" data-close></div>
+      <div
+        class="link-apply-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="link-apply-title"
+      >
+        <button
+          class="link-apply-close"
+          type="button"
+          data-close
+          aria-label="关闭"
+        >
+          ×
+        </button>
+        <h2 class="link-apply-title" id="link-apply-title" th:text="#{links.apply}">
+          申请友链
+        </h2>
+        <form class="apply-form" id="link-apply-form" novalidate>
             <div class="form-row">
               <label for="f-url">网站地址 *</label>
               <input id="f-url" name="url" type="url" required placeholder="https://example.com" />
@@ -302,12 +414,11 @@
                 <input id="f-captcha" name="captchaCode" type="text" maxlength="5" required autocomplete="off" />
               </div>
             </div>
-            <button class="btn btn-primary" type="submit">提交申请</button>
+            <button class="btn-apply" type="submit">提交申请</button>
           </form>
           <div class="apply-status" id="apply-status" role="alert"></div>
         </div>
       </div>
-    </section>
 
     <div class="comments-section" th:if="${haloCommentEnabled}">
       <halo:comment group="plugin.halo.run" kind="Plugin" th:attr="name=${pluginName}" />
@@ -326,12 +437,35 @@
       var API = "/apis/api.link.halo.run/v1alpha1/link-applications";
       var CAPTCHA = "/apis/api.link.halo.run/v1alpha1/link-applications/captcha";
       var toggle = document.getElementById("link-apply-toggle");
-      var panel = document.getElementById("link-apply-panel");
+      var modal = document.getElementById("link-apply-modal");
       var form = document.getElementById("link-apply-form");
       var img = document.getElementById("captcha-img");
       var status = document.getElementById("apply-status");
       var challengeId = null;
 
+      // 弹窗移至 body 下，避免被页面父级 stacking context 遮挡
+      document.body.appendChild(modal);
+
+      function openModal() {
+        modal.hidden = false;
+        document.body.style.overflow = "hidden";
+        if (!challengeId) loadCaptcha();
+      }
+      function closeModal() {
+        modal.hidden = true;
+        document.body.style.overflow = "";
+      }
+
+      toggle.addEventListener("click", openModal);
+
+      modal.addEventListener("click", function (e) {
+        if (e.target.closest("[data-close]")) closeModal();
+      });
+
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && !modal.hidden) closeModal();
+      });
+
       function loadCaptcha() {
         fetch(CAPTCHA, { method: "POST" })
           .then(function (r) {
@@ -348,13 +482,6 @@
           });
       }
 
-      toggle.addEventListener("click", function () {
-        panel.hidden = !panel.hidden;
-        if (!panel.hidden && !challengeId) {
-          loadCaptcha();
-        }
-      });
-
       img.addEventListener("click", loadCaptcha);
 
       form.addEventListener("submit", function (e) {
@@ -394,6 +521,7 @@
               loadCaptcha();
               status.className = "apply-status ok";
               status.textContent = "申请已提交，等待管理员审核。";
+              setTimeout(closeModal, 1500);
             } else {
               return r.json().then(function (err) {
                 throw err;

src/moment.html

@@ -37,19 +37,10 @@
         border-radius: 50%;
         object-fit: cover;
       }
-      .moment-owner-info {
-        display: flex;
-        flex-direction: column;
-        line-height: 1.3;
-      }
       .moment-owner-name {
         color: var(--color-text);
         font-weight: 600;
       }
-      .moment-owner-bio {
-        font-size: 0.8rem;
-        color: var(--color-text-muted);
-      }
       .moment-meta {
         display: inline-flex;
         align-items: center;
@@ -69,17 +60,35 @@
       .moment-tags a {
         color: var(--color-link);
       }
-      .moment-media img,
+      .moment-media {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.3rem;
+        margin-top: 0.75rem;
+      }
+      .moment-media img {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        border-radius: var(--radius-sm);
+        background: var(--color-bg-secondary);
+      }
+      .moment-media img:only-child {
+        aspect-ratio: auto;
+        width: auto;
+        max-width: min(100%, 22rem);
+        max-height: 26rem;
+      }
       .moment-media video {
+        grid-column: 1 / -1;
         display: block;
         max-width: 100%;
-        height: auto;
-        margin-top: 1rem;
         border-radius: var(--radius-md);
       }
       .moment-media audio {
+        grid-column: 1 / -1;
         width: 100%;
-        margin-top: 1rem;
       }
       .comments-section {
         margin-top: 2rem;
@@ -104,18 +113,9 @@
               th:alt="${moment.owner.displayName}"
               loading="lazy"
             />
-            <span class="moment-owner-info">
+            <span class="moment-owner-name" th:text="${moment.owner.displayName}"
-              <span
-                class="moment-owner-name"
-                th:text="${moment.owner.displayName}"
               >用户名</span
             >
-              <span
-                class="moment-owner-bio"
-                th:if="${not #strings.isEmpty(moment.owner.bio)}"
-                th:text="${moment.owner.bio}"
-              ></span>
-            </span>
           </span>
           <span class="moment-meta">
             <time

src/moments.html

@@ -29,13 +29,15 @@
         align-items: center;
         gap: 0.75rem;
         margin-bottom: 0.75rem;
-        opacity: 0.75;
-        color: var(--color-text-secondary);
       }
       .moments article header > a {
         display: inline-flex;
         align-items: center;
         line-height: 2rem;
+        color: var(--color-text-secondary);
+      }
+      .moments article header > a:hover {
+        color: var(--color-link-hover);
       }
       .moments .moment-owner {
         display: inline-flex;
@@ -43,11 +45,15 @@
         gap: 0.5rem;
       }
       .moments .moment-owner img {
-        width: 2rem;
+        width: 2.25rem;
-        height: 2rem;
+        height: 2.25rem;
         border-radius: 50%;
         object-fit: cover;
       }
+      .moments .moment-owner .moment-owner-name {
+        color: var(--color-text);
+        font-weight: 600;
+      }
       .moments .moment-tags {
         display: flex;
         flex-wrap: wrap;
@@ -58,17 +64,39 @@
       .moments .moment-tags a {
         color: var(--color-link);
       }
-      .moments .moment-media img,
+      /* 图片排版：仿微信朋友圈（多图九宫格方图，单图放大保持原比例） */
+      .moments .moment-media {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.3rem;
+        margin-top: 0.75rem;
+      }
+      .moments .moment-media img {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
+        border-radius: var(--radius-sm);
+        background: var(--color-bg-secondary);
+      }
+      .moments .moment-media > :only-child {
+        grid-column: auto;
+      }
+      .moments .moment-media img:only-child {
+        aspect-ratio: auto;
+        width: auto;
+        max-width: min(100%, 22rem);
+        max-height: 26rem;
+      }
       .moments .moment-media video {
+        grid-column: 1 / -1;
         display: block;
         max-width: 100%;
-        height: auto;
-        margin-top: 1rem;
         border-radius: var(--radius-md);
       }
       .moments .moment-media audio {
+        grid-column: 1 / -1;
         width: 100%;
-        margin-top: 1rem;
       }
     </style>
   </template>

src/page_about.html

@@ -1,92 +0,0 @@
-<include src="partials/layout.html">
-  <template name="head">
-    <title th:text="|${singlePage.spec.title} - ${site.title}|">
-      About
-    </title>
-    <th:block
-      th:with="seoTitle=${singlePage.spec.title}, seoUrl=${site.url + singlePage.status.permalink}, seoDesc=${singlePage.status.excerpt}, seoImage=${singlePage.spec.cover}, seoType='website'"
-    >
-      <include src="seo.html"></include>
-    </th:block>
-  </template>
-
-  <div class="container">
-    <!-- 关于页面样式 -->
-    <div class="page-content about-page">
-      <div class="about-header">
-        <div class="about-avatar">
-          <img
-            th:src="${not #strings.isEmpty(theme.config?.about?.avatar) ? theme.config.about.avatar : ((singlePage.owner != null and not #strings.isEmpty(singlePage.owner.avatar)) ? singlePage.owner.avatar : site.logo)}"
-            th:alt="${singlePage.owner != null ? singlePage.owner.displayName : site.title}"
-          />
-        </div>
-        <h1
-          class="about-name"
-          th:text="${singlePage.owner != null ? singlePage.owner.displayName : site.title}"
-        >
-          About
-        </h1>
-        <p
-          class="about-bio"
-          th:if="${not #strings.isEmpty(theme.config?.about?.bio)}"
-          th:text="${theme.config.about.bio}"
-        ></p>
-        <div
-          class="about-social"
-          th:if="${not #strings.isEmpty(theme.config?.about?.github_url) or not #strings.isEmpty(theme.config?.about?.twitter_url) or not #strings.isEmpty(theme.config?.about?.contact_email)}"
-        >
-          <a
-            th:if="${not #strings.isEmpty(theme.config?.about?.github_url)}"
-            th:href="${theme.config.about.github_url}"
-            class="social-link"
-            th:title="#{about.social.github}"
-            target="_blank"
-            rel="noopener"
-          >
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path
-                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-              />
-            </svg>
-          </a>
-          <a
-            th:if="${not #strings.isEmpty(theme.config?.about?.twitter_url)}"
-            th:href="${theme.config.about.twitter_url}"
-            class="social-link"
-            th:title="#{about.social.twitter}"
-            target="_blank"
-            rel="noopener"
-          >
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path
-                d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
-              />
-            </svg>
-          </a>
-          <a
-            th:if="${not #strings.isEmpty(theme.config?.about?.contact_email)}"
-            th:href="|mailto:${theme.config.about.contact_email}|"
-            class="social-link"
-            th:title="#{about.social.email}"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path
-                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-              ></path>
-              <polyline points="22,6 12,13 2,6"></polyline>
-            </svg>
-          </a>
-        </div>
-      </div>
-
-      <div class="about-content article-content">
-        <th:block th:utext="${singlePage.content.content}"></th:block>
-      </div>
-    </div>
-  </div>
-</include>

src/photos.html

@@ -7,137 +7,87 @@
         max-width: 75rem;
       }
 
-      /* 相册内视图工具条 */
+      /* 分组导航（图库标题下方） */
-      :where(.photos-toolbar) {
+      :where(.photos-nav) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.6rem;
+        margin: 1.25rem 0 0;
+      }
+      :where(.photos-nav button) {
+        padding: 0.3rem 1rem;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-full);
+        background: var(--color-bg-secondary);
+        color: var(--color-text-secondary);
+        font: inherit;
+        font-size: 0.88rem;
+        cursor: pointer;
+        transition:
+          color var(--transition-fast),
+          border-color var(--transition-fast),
+          background var(--transition-fast);
+      }
+      :where(.photos-nav button:hover) {
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+      }
+      :where(.photos-nav button.is-active) {
+        color: #fff;
+        border-color: var(--color-primary);
+        background: var(--color-primary);
+      }
+
+      /* 分组区块 */
+      :where(.photos-group)[hidden] {
+        display: none;
+      }
+      :where(.photos-group-title) {
         display: flex;
         align-items: center;
-        flex-wrap: wrap;
+        gap: 0.5rem;
-        gap: 0.75rem;
+        margin: 2rem 0 0;
-        margin-top: 1rem;
-      }
-      :where(.photos-back) {
-        color: var(--color-link);
-        font-size: 0.9rem;
-      }
-      :where(.photos-back):hover {
-        color: var(--color-link-hover);
-      }
-      :where(.photos-album-title) {
-        margin: 0;
         font-size: 1.05rem;
         font-weight: 600;
-        flex: 1 1 auto;
+      }
+      :where(.photos-group-title::before) {
+        content: "";
+        width: 0.2rem;
+        height: 1.1em;
+        border-radius: 2px;
+        background: var(--color-primary);
+      }
+      :where(.photos-group-section:first-of-type .photos-group-title) {
+        margin-top: 1.5rem;
       }
 
-      /* 相册网格 */
+      /* 瀑布流（一行三张，图片自适应原比例） */
-      :where(.albums-grid) {
-        list-style: none;
-        margin: 1.5rem 0 0;
-        padding: 0;
-        display: grid;
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(min(16rem, 100%), 1fr)
-        );
-        gap: 1.5rem;
-      }
-      /* 打开某个相册后：只显示该相册，卡片收起、瀑布流展开 */
-      :where(.albums-grid.is-album-open) {
-        display: block;
-      }
-      :where(.albums-grid.is-album-open .albums-item) {
-        display: none;
-      }
-      :where(.albums-grid.is-album-open .albums-item.is-active) {
-        display: block;
-      }
-      :where(.albums-item.is-active .albums-card) {
-        display: none;
-      }
-
-      :where(.albums-card) {
-        display: block;
-        color: var(--color-text);
-      }
-      :where(.albums-card:hover .albums-card__name) {
-        color: var(--color-primary);
-      }
-      :where(.albums-card__cover) {
-        display: block;
-        position: relative;
-        width: 100%;
-        aspect-ratio: 4 / 3;
-        overflow: hidden;
-        border-radius: var(--radius-md);
-        background: var(--color-bg-secondary);
-        border: 1px solid var(--color-border);
-      }
-      :where(.albums-card__cover img) {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      :where(.albums-card__cover img.album-cover-custom) {
-        z-index: 1;
-      }
-      :where(.albums-card__name) {
-        margin: 0.75rem 0 0;
-        font-size: 1rem;
-        font-weight: 600;
-      }
-      :where(.albums-card__count) {
-        margin: 0.25rem 0 0;
-        font-size: 0.85rem;
-        color: var(--color-text-muted);
-      }
-      :where(.albums-card__more) {
-        display: inline-block;
-        margin-top: 0.4rem;
-        font-size: 0.8rem;
-        color: var(--color-primary);
-        opacity: 0;
-        transform: translateX(-0.25rem);
-        transition: opacity var(--transition-fast), transform var(--transition-fast);
-      }
-      :where(.albums-card:hover .albums-card__more) {
-        opacity: 1;
-        transform: translateX(0);
-      }
-
-      /* 瀑布流（一行三张） */
       :where(.photos-masonry) {
         list-style: none;
-        margin: 1.5rem 0 0;
+        margin: 1rem 0 0;
         padding: 0;
         columns: 3;
         column-gap: 1rem;
       }
-      :where(.photos-masonry[hidden]) {
-        display: none;
-      }
       :where(.photos-masonry > li) {
         break-inside: avoid;
         margin: 0 0 1rem;
       }
-      :where(.photos-masonry .photos-card__media) {
+      :where(.photos-item) {
         display: block;
       }
-      :where(.photos-masonry img) {
+      :where(.photos-item img) {
         display: block;
         width: 100%;
         height: auto;
         border-radius: var(--radius-md);
         background: var(--color-bg-secondary);
+        opacity: 0;
+        transition: opacity 0.4s ease;
       }
-      :where(.photos-masonry .photos-card__caption) {
+      :where(.photos-item img.is-loaded) {
-        margin: 0.4rem 0 0;
+        opacity: 1;
-        font-size: 0.85rem;
-        color: var(--color-text-secondary);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
       @media (max-width: 900px) {
         :where(.photos-masonry) {
@@ -150,25 +100,10 @@
         }
       }
 
-      /* 预览模式切换 */
-      :where(.photos-preview-toggle) {
-        padding: 0.4rem 0.9rem;
-        border: 1px solid var(--color-border);
-        border-radius: var(--radius-sm);
-        background: var(--color-bg-secondary);
-        color: var(--color-text);
-        font: inherit;
-        font-size: 0.85rem;
-        cursor: pointer;
-      }
-      :where(.photos-preview-toggle)[aria-pressed="true"] {
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-      }
-
       :where(.photos-empty) {
         color: var(--color-text-muted);
         padding: 2rem 0;
+        text-align: center;
       }
     </style>
   </template>
@@ -179,89 +114,49 @@
         <h1 class="photos-header__title" th:text="${title}">图库</h1>
       </header>
 
-      <!-- 相册内视图工具条：打开具体相册时显示 -->
+      <th:block
-      <div class="photos-toolbar" id="photos-toolbar" hidden>
+        th:with="albums=${photoFinder.groupBy()}, anyCheck=${photoFinder.list(1, 1)}, anyPhotos=${anyCheck != null ? anyCheck.items : null}"
-        <a
-          class="photos-back"
-          th:href="${photoUrl != null ? photoUrl.list() : '/photos'}"
-          th:text="#{photos.back}"
-          >返回全部相册</a
       >
-        <h2 class="photos-album-title" id="photos-album-title"></h2>
+        <!-- 分组导航 -->
-        <button
+        <nav
-          class="photos-preview-toggle"
+          class="photos-nav"
-          id="photos-preview-toggle"
+          id="photos-nav"
-          type="button"
+          aria-label="图库分组"
-          th:attr="data-default=${theme.config?.photos?.preview_default != false ? 'on' : 'off'},data-global=${theme.config?.basic?.enable_lightbox != false ? '1' : '0'}"
-        >
-          预览模式
-        </button>
-      </div>
-
-      <th:block th:with="albums=${photoFinder.groupBy()}">
-        <ul
-          class="albums-grid"
-          id="albums-grid"
           th:if="${not #lists.isEmpty(albums)}"
         >
-          <li
+          <button type="button" class="is-active" data-group="">全部</button>
-            class="albums-item"
+          <button
+            type="button"
             th:each="album : ${albums}"
-            th:attr="data-album=${album.metadata.name}"
+            th:attr="data-group=${album.metadata.name}"
-            th:data-title="${album.spec.displayName}"
+            th:text="${album.spec.displayName}"
           >
+            分组
+          </button>
+        </nav>
+
+        <!-- 各分组照片，一次全部渲染；默认「全部」视图，前台脚本切换 -->
+        <th:block th:if="${not #lists.isEmpty(albums)}">
+          <section
+            class="photos-group-section"
+            th:each="album : ${albums}"
+            th:attr="data-group=${album.metadata.name}"
+          >
+            <h2 class="photos-group-title" th:text="${album.spec.displayName}">
+              分组
+            </h2>
             <th:block th:with="rawPhotos=${album.photos}">
               <th:block
-                th:with="albumPhotos=${(rawPhotos != null and !#lists.isEmpty(rawPhotos)) ? rawPhotos : photoFinder.listBy(album.metadata.name)}"
+                th:with="photos=${(rawPhotos != null and !#lists.isEmpty(rawPhotos)) ? rawPhotos : photoFinder.listBy(album.metadata.name)}"
               >
-                <a
-                  class="albums-card"
-                  th:href="${photoUrl.list(album.metadata.name)}"
-                  th:aria-label="|查看相册 ${album.spec.displayName}|"
-                  th:title="|查看相册 ${album.spec.displayName}|"
-                >
-                  <span class="albums-card__cover">
-                    <img
-                      th:if="${not #lists.isEmpty(albumPhotos)}"
-                      th:src="${albumPhotos[0].spec.cover != null and !#strings.isEmpty(albumPhotos[0].spec.cover) ? albumPhotos[0].spec.cover : albumPhotos[0].spec.url}"
-                      th:alt="${album.spec.displayName}"
-                      loading="lazy"
-                    />
-                    <th:block
-                      th:if="${not #lists.isEmpty(theme.config?.photos?.album_covers)}"
-                    >
-                      <img
-                        class="album-cover-custom"
-                        th:each="cv : ${theme.config.photos.album_covers}"
-                        th:if="${cv != null and cv.group == album.metadata.name and not #strings.isEmpty(cv.cover)}"
-                        th:src="${cv.cover}"
-                        th:alt="${album.spec.displayName}"
-                        loading="lazy"
-                      />
-                    </th:block>
-                  </span>
-                  <p class="albums-card__name" th:text="${album.spec.displayName}">
-                    相册
-                  </p>
-                  <p
-                    class="albums-card__count"
-                    th:if="${album.status != null and album.status.photoCount != null}"
-                    th:text="#{photos.photo_count(${album.status.photoCount})}"
-                  >
-                    12 张照片
-                  </p>
-                  <span class="albums-card__more">查看相册 →</span>
-                </a>
-
-                <!-- 该相册的照片瀑布流：默认隐藏，由脚本按 URL 的 group 显示 -->
                 <ul
                   class="photos-masonry"
-                  hidden
+                  th:if="${not #lists.isEmpty(photos)}"
                   th:attr="data-lightbox=${theme.config?.basic?.enable_lightbox != false ? 'true' : null}"
                 >
-                  <li th:each="photo : ${albumPhotos}">
+                  <li th:each="photo : ${photos}">
                     <a
-                      class="photos-card__media"
+                      class="photos-item"
                       th:href="${photoUrl.detail(photo)}"
                       th:title="${photo.spec.displayName}"
                     >
@@ -269,110 +164,81 @@
                         th:src="${#strings.isEmpty(photo.spec.cover) ? photo.spec.url : photo.spec.cover}"
                         th:alt="${photo.spec.displayName}"
                         loading="lazy"
+                        decoding="async"
                       />
                     </a>
+                  </li>
+                </ul>
+              </th:block>
+            </th:block>
+          </section>
+
           <p
-                      class="photos-card__caption"
+            class="photos-empty"
-                      th:if="${not #strings.isEmpty(photo.spec.displayName)}"
+            th:if="${#lists.isEmpty(anyPhotos)}"
-                      th:text="${photo.spec.displayName}"
+            role="status"
           >
-                      照片
+            暂无照片
           </p>
-                  </li>
-                </ul>
         </th:block>
       </th:block>
-          </li>
-        </ul>
-        <p class="photos-empty" th:if="${#lists.isEmpty(albums)}" role="status">
-          暂无相册
-        </p>
-      </th:block>
     </section>
   </div>
 
   <script th:inline="none">
     (function () {
-      var grid = document.getElementById("albums-grid");
+      var nav = document.getElementById("photos-nav");
-      if (!grid) return;
+      if (!nav) return;
 
-      var toolbar = document.getElementById("photos-toolbar");
+      var sections = document.querySelectorAll(".photos-group-section");
-      var titleEl = document.getElementById("photos-album-title");
+      var buttons = nav.querySelectorAll("button");
 
-      // 按 URL 上的 group 参数决定显示哪个相册
+      // 深链接：?group=xxx（仅前台读取，不依赖服务端参数）
-      //（不依赖服务端 group 变量，避免页面缓存 / 插件版本差异导致打不开相册）
+      var initial = "";
-      var group = "";
       try {
-        group = new URLSearchParams(window.location.search).get("group") || "";
+        initial = new URLSearchParams(window.location.search).get("group") || "";
       } catch (e) {
-        group = "";
+        initial = "";
       }
 
-      var items = grid.querySelectorAll(".albums-item");
+      function apply(group) {
-      var opened = false;
+        Array.prototype.forEach.call(buttons, function (btn) {
-
+          var active = btn.getAttribute("data-group") === group;
-      Array.prototype.forEach.call(items, function (item) {
+          btn.classList.toggle("is-active", active);
-        var masonry = item.querySelector(".photos-masonry");
+        });
-        var isMatch = group !== "" && item.getAttribute("data-album") === group;
+        Array.prototype.forEach.call(sections, function (sec) {
-        if (isMatch) {
+          var match = group === "" || sec.getAttribute("data-group") === group;
-          item.classList.add("is-active");
+          if (match) {
-          if (masonry) masonry.removeAttribute("hidden");
+            sec.removeAttribute("hidden");
-          if (titleEl) titleEl.textContent = item.getAttribute("data-title") || "";
-          opened = true;
           } else {
-          item.classList.remove("is-active");
+            sec.setAttribute("hidden", "");
-          if (masonry) masonry.setAttribute("hidden", "");
           }
         });
-
-      if (opened) {
-        grid.classList.add("is-album-open");
-        if (toolbar) toolbar.removeAttribute("hidden");
-      } else {
-        grid.classList.remove("is-album-open");
-        if (toolbar) toolbar.setAttribute("hidden", "");
       }
 
-      // 预览模式（作用于全部相册瀑布流）
+      nav.addEventListener("click", function (e) {
-      var btn = document.getElementById("photos-preview-toggle");
+        var btn = e.target.closest("button[data-group]");
         if (!btn) return;
+        apply(btn.getAttribute("data-group"));
+      });
 
-      var KEY = "whitespace-photo-preview";
+      if (initial && nav.querySelector('button[data-group="' + initial + '"]')) {
-      var defaultOn = btn.getAttribute("data-default") === "on";
+        apply(initial);
-      var globalOn = btn.getAttribute("data-global") === "1";
-      var stored = null;
-      try {
-        stored = localStorage.getItem(KEY);
-      } catch (e) {
-        /* ignore */
       }
-      var mode = stored === null ? defaultOn : stored === "on";
 
-      function apply() {
+      // 图片加载后淡入
-        var all = document.querySelectorAll(".photos-masonry");
+      Array.prototype.forEach.call(
-        Array.prototype.forEach.call(all, function (m) {
+        document.querySelectorAll(".photos-item img"),
-          if (globalOn && mode) {
+        function (img) {
-            m.setAttribute("data-lightbox", "true");
+          if (img.complete && img.naturalWidth > 0) {
+            img.classList.add("is-loaded");
           } else {
-            m.removeAttribute("data-lightbox");
+            img.addEventListener("load", function () {
-          }
+              img.classList.add("is-loaded");
             });
-        btn.textContent = mode ? "预览模式：开" : "预览模式：关";
-        btn.setAttribute("aria-pressed", mode ? "true" : "false");
           }
-
+        },
-      btn.addEventListener("click", function () {
+      );
-        mode = !mode;
-        try {
-          localStorage.setItem(KEY, mode ? "on" : "off");
-        } catch (e) {
-          /* ignore */
-        }
-        // 重新加载，使灯箱按新模式初始化
-        window.location.reload();
-      });
-
-      apply();
     })();
   </script>
 </include>

src/tags.html

@@ -1,6 +1,34 @@
 <include src="partials/layout.html">
   <template name="head">
     <title th:text="|#{tags.title} - ${site.title}|">Tags</title>
+    <style>
+      /* 标签云：紧凑标签片，保留间距 */
+      .tag-cloud {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.65rem 0.75rem;
+        margin: 1.75rem 0 0;
+      }
+      .tag-cloud .tag {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.35rem 0.95rem;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-full);
+        background: var(--color-bg-secondary);
+        color: var(--color-text-secondary);
+        font-size: 0.9rem;
+        line-height: 1.5;
+        transition:
+          color var(--transition-fast),
+          border-color var(--transition-fast);
+      }
+      .tag-cloud .tag:hover {
+        color: var(--color-primary);
+        border-color: var(--color-primary);
+      }
+    </style>
     <th:block
       th:with="seoTitle=#{tags.title}, seoUrl=${site.url + site.routes.tagsUri}, seoDesc=null, seoImage=${site.logo}, seoType='website'"
     >

theme.yaml

@@ -14,17 +14,13 @@ spec:
   issues: https://git.nxxy335.top/nxxy335/halo-theme-whitespace/issues
   settingName: "whitespace-setting"
   configMapName: "whitespace-configMap"
-  version: 0.3.0
+  version: 0.4.0
   requires: ">=2.26.0"
   license:
     - name: "GPL-3.0"
       url: "https://github.com/halo-dev/theme-vite-starter/blob/main/LICENSE"
   customTemplates:
     page:
-      - name: 关于页面
-        description: 关于页面布局，展示头像、个人简介与社交链接
-        screenshot:
-        file: page_about.html
       - name: 微信读书页面
         description: 适配 halo-weread-plugin，展示微信读书书架与读书笔记
         screenshot: