feat: Hero 背景图完整显示、导航二级菜单、瞬间朋友圈化、友链申请表单 (v1.1.9)

- Hero：背景图 opacity 0.15 -> 1 完整显示（此前近乎透明的背景图是"蒙灰"观感的
  主因）；标题/副标题/一言按明暗模式补轻投影保证复杂图片上的可读性
- 导航栏二级菜单：桌面端纯 CSS 悬停/聚焦展开（零 JS），带悬停桥防误关、
  下拉箭头旋转反馈；移动端菜单以缩进子项形式呈现
- 瞬间页朋友圈化：头像（moment.owner.avatar，缺省回退站点名首字占位）+ 昵称
  + 正文 + 九宫格图片 + 时间操作；九宫格遵循微信规则（单图原比例、2/4 图两列、
  其余三列）
- 友情链接页适配 plugin-links 友链申请：同源表单（POST /links/apply/submit +
  csrfToken + GET /links/apply/captcha 验证码图，点击刷新），支持名称/链接/
  Logo/描述/邮箱/反链/RSS 字段、提交结果与错误提示；插件未开放申请时验证码
  加载失败自动隐藏表单；新增 links_apply_form_enabled 开关（默认开启）

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.8",
+  "version": "1.1.9",
   "type": "module",
   "engines": {
     "node": ">=22.12.0"

settings.yaml

@@ -575,6 +575,11 @@ spec:
     - group: links
       label: 友情链接
       formSchema:
+        - $formkit: switch
+          name: links_apply_form_enabled
+          label: 显示友链申请表单
+          value: true
+          help: 在友链页底部展示访客申请表单；需链接管理插件开启「友链申请」功能，未开启时表单自动隐藏
         - $formkit: text
           name: links_page_title
           label: 页面标题

src/components/HeroSection.astro

@@ -281,7 +281,7 @@
     inset: 0;
     background-size: cover;
     background-position: center;
-    opacity: 0.15;
+    opacity: 1;
   }
 
   /* 深色模式背景图切换：未配置双图时不生效，保持单一背景图 */
@@ -313,6 +313,12 @@
     letter-spacing: -0.03em;
     color: var(--hero-title-text, var(--ink));
     line-height: var(--leading-tight);
+    /* 背景图完整显示后，用轻投影保证文字在复杂图片上仍可读 */
+    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 14px rgba(255, 253, 250, 0.4);
+  }
+
+  html.dark .hero__title {
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.35);
   }
 
   .hero__subtitle {
@@ -321,6 +327,11 @@
     color: var(--hero-subtitle-text, var(--ink-2));
     letter-spacing: 0.05em;
     line-height: var(--leading-normal);
+    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 10px rgba(255, 253, 250, 0.4);
+  }
+
+  html.dark .hero__subtitle {
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.35);
   }
 
   .hero__description {
@@ -330,6 +341,11 @@
     max-width: 560px;
     text-align: center;
     transition: opacity 0.3s ease;
+    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.55);
+  }
+
+  html.dark .hero__description {
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   }
 
   .hero__scroll-indicator {

src/components/MobileMenu.astro

@@ -21,6 +21,16 @@
               class="wi-mobile-menu__link"
               th:data-href="${menuItem.status.href}"
             ></a>
+            <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
+              <a
+                th:each="child : ${menuItem.children}"
+                th:href="@{${child.status.href}}"
+                th:target="${child.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
+                th:text="${'| ' + child.status.displayName}"
+                class="wi-mobile-menu__link wi-mobile-menu__link--sub"
+                th:data-href="${child.status.href}"
+              ></a>
+            </th:block>
           </th:block>
         </th:block>
       </th:block>
@@ -213,6 +223,14 @@
       background var(--duration-fast) var(--ease-out-quart);
   }
 
+  /* 二级菜单项：缩进 + 弱化，与一级项区分 */
+  .wi-mobile-menu__link--sub {
+    padding-left: 2rem;
+    font-size: var(--text-base);
+    font-weight: 400;
+    color: var(--ink-3);
+  }
+
   .wi-mobile-menu__link:hover {
     color: var(--accent);
     background: var(--bg-raised);

src/components/Navbar.astro

@@ -32,15 +32,34 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
       <th:block th:if="${menuFinder != null}">
         <th:block th:with="menu = ${menuFinder.getPrimary()}">
           <th:block th:if="${menu != null and menu.menuItems != null and not #lists.isEmpty(menu.menuItems)}">
-            <a
+            <div
               th:each="menuItem : ${menu.menuItems}"
+              class="wi-navbar__item"
+              th:classappend="${not #lists.isEmpty(menuItem.children)} ? 'wi-navbar__item--has-children'"
+            >
+              <a
                 th:href="@{${menuItem.status.href}}"
                 th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
                 th:text="${menuItem.status.displayName}"
                 class="wi-navbar__link"
                 th:data-href="${menuItem.status.href}"
+                th:aria-haspopup="${not #lists.isEmpty(menuItem.children)} ? 'true' : null"
               >
               </a>
+              <div
+                class="wi-navbar__submenu"
+                th:if="${not #lists.isEmpty(menuItem.children)}"
+              >
+                <a
+                  th:each="child : ${menuItem.children}"
+                  th:href="@{${child.status.href}}"
+                  th:target="${child.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
+                  th:text="${child.status.displayName}"
+                  class="wi-navbar__submenu-link"
+                >
+                </a>
+              </div>
+            </div>
           </th:block>
         </th:block>
       </th:block>
@@ -257,6 +276,88 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
     min-width: 0;
   }
 
+  /* 一级菜单项容器（含子菜单时作为下拉的定位锚点） */
+  .wi-navbar__item {
+    position: relative;
+    display: inline-flex;
+  }
+
+  /* 二级下拉：纯 CSS 悬停/聚焦展开，无 JS 开销 */
+  .wi-navbar__submenu {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(6px);
+    display: flex;
+    flex-direction: column;
+    min-width: 168px;
+    padding: 6px;
+    margin: 0;
+    list-style: none;
+    border-radius: var(--radius-md, 12px);
+    background: var(--bg-raised);
+    border: 1px solid var(--rule);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.18s ease, transform 0.18s var(--ease-out-quart),
+      visibility 0.18s;
+    z-index: 101;
+  }
+
+  /* 悬停桥：避免鼠标从一级移到二级途中经过空隙导致菜单关闭 */
+  .wi-navbar__item--has-children::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    height: 10px;
+  }
+
+  .wi-navbar__item--has-children:hover .wi-navbar__submenu,
+  .wi-navbar__item--has-children:focus-within .wi-navbar__submenu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .wi-navbar__submenu-link {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-radius: 8px;
+    font-size: var(--text-sm);
+    color: var(--ink-2);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color 0.15s ease, background 0.15s ease;
+  }
+
+  .wi-navbar__submenu-link:hover {
+    color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 8%, transparent);
+  }
+
+  /* 有子菜单的一级项带下拉小箭头 */
+  .wi-navbar__item--has-children > .wi-navbar__link::after {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin-left: 0.3rem;
+    margin-top: -2px;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(45deg);
+    opacity: 0.6;
+    transition: transform 0.18s var(--ease-out-quart);
+  }
+
+  .wi-navbar__item--has-children:hover > .wi-navbar__link::after {
+    transform: rotate(225deg);
+    margin-top: 2px;
+  }
+
   .wi-navbar__link {
     display: inline-flex;
     align-items: center;

src/pages/links.astro

@@ -87,6 +87,92 @@ import Layout from "../layouts/Layout.astro";
         </div>
       </th:block>
 
+      <div
+        class="wi-links__apply"
+        th:if="${theme.config?.links?.links_apply_form_enabled != false}"
+        th:with="applied=${param.applied != null and !#lists.isEmpty(param.applied) and param.applied[0] == 'true'},
+                 applyMsg=${param.message != null and !#lists.isEmpty(param.message) ? param.message[0] : null}"
+      >
+        <h2 class="wi-links__apply-title" th:text="'申请友链'">申请友链</h2>
+        <p
+          class="wi-links__apply-result"
+          th:if="${applied}"
+          th:text="'申请已提交，等待站长审核 🌙'"
+          role="status"
+        ></p>
+        <p
+          class="wi-links__apply-result wi-links__apply-result--error"
+          th:if="${not applied and applyMsg != null}"
+          th:text="${applyMsg}"
+          role="alert"
+        ></p>
+
+        <form
+          class="wi-links__apply-form"
+          method="post"
+          th:action="@{/links/apply/submit}"
+        >
+          <input type="hidden" name="_csrf" th:value="${csrfToken}" />
+          <div class="wi-links__apply-row">
+            <label class="wi-links__apply-field">
+              <span th:text="'站点名称 *'">站点名称 *</span>
+              <input type="text" name="displayName" required maxlength="50" placeholder="你的站点名称" th:attr="value=${param.value != null and !#lists.isEmpty(param.value) ? param.value[0] : ''}" />
+            </label>
+            <label class="wi-links__apply-field">
+              <span th:text="'站点链接 *'">站点链接 *</span>
+              <input type="url" name="url" required placeholder="https://" />
+            </label>
+          </div>
+          <div class="wi-links__apply-row">
+            <label class="wi-links__apply-field">
+              <span th:text="'图标地址'">图标地址</span>
+              <input type="url" name="logo" placeholder="https://" />
+            </label>
+            <label class="wi-links__apply-field">
+              <span th:text="'联系邮箱'">联系邮箱</span>
+              <input type="email" name="email" placeholder="用于通知审核结果" />
+            </label>
+          </div>
+          <label class="wi-links__apply-field">
+            <span th:text="'站点描述'">站点描述</span>
+            <input type="text" name="description" maxlength="120" placeholder="一句话介绍你的站点" />
+          </label>
+          <label class="wi-links__apply-field">
+            <span th:text="'反链页面'">反链页面</span>
+            <input type="url" name="backlink" placeholder="https://" />
+          </label>
+          <label class="wi-links__apply-field">
+            <span th:text="'RSS / Atom 地址（每行一个）'">RSS / Atom 地址（每行一个）</span>
+            <textarea name="feedUrls" rows="2" placeholder="https://"></textarea>
+          </label>
+          <div class="wi-links__apply-row">
+            <label class="wi-links__apply-field">
+              <span th:text="'验证码 *'">验证码 *</span>
+              <input type="text" name="captchaCode" required maxlength="8" autocomplete="off" placeholder="图中五位字符" />
+            </label>
+            <div class="wi-links__apply-captcha">
+              <img
+                class="wi-links__apply-captcha-img"
+                th:src="@{/links/apply/captcha}"
+                alt="验证码"
+                width="120"
+                height="44"
+                loading="lazy"
+                title="点击刷新验证码"
+                onclick="this.src=this.src.split('?')[0]+'?ts='+Date.now()"
+                th:onerror="|this.closest('.wi-links__apply').classList.add('wi-links__apply--unavailable')|"
+              />
+            </div>
+          </div>
+          <button class="wi-links__apply-submit" type="submit" th:text="'提交申请'">提交申请</button>
+        </form>
+        <p
+          class="wi-links__apply-unavailable-tip"
+          th:text="'友链申请暂未开放。'"
+          hidden
+        ></p>
+      </div>
+
       <div class="wi-links__comment" th:if="${theme.config?.links?.links_show_comment == true}">
         <halo:comment group="plugin.halo.run" kind="Plugin" name="PluginLinks"></halo:comment>
       </div>
@@ -189,6 +275,132 @@ import Layout from "../layouts/Layout.astro";
     margin-top: var(--space-3xl);
   }
 
+  /* ===== 友链申请表单 ===== */
+  .wi-links__apply {
+    margin-top: var(--space-3xl);
+    padding: var(--space-xl);
+    border: 1px solid var(--rule);
+    border-radius: var(--radius-lg, 16px);
+    background: var(--bg-raised);
+  }
+
+  .wi-links__apply-title {
+    text-align: center;
+    font-size: var(--text-xl);
+    font-weight: 700;
+    color: var(--ink);
+    margin-bottom: var(--space-lg);
+  }
+
+  .wi-links__apply-result {
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--accent);
+    margin-bottom: var(--space-md);
+  }
+
+  .wi-links__apply-result--error {
+    color: #e6162d;
+  }
+
+  html.dark .wi-links__apply-result--error {
+    color: #ff6b6b;
+  }
+
+  .wi-links__apply-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .wi-links__apply-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-md);
+  }
+
+  .wi-links__apply-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    font-size: var(--text-sm);
+    color: var(--ink-2);
+  }
+
+  .wi-links__apply-field input,
+  .wi-links__apply-field textarea {
+    padding: 0.6rem 0.8rem;
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+    background: var(--bg);
+    color: var(--ink);
+    font-family: inherit;
+    font-size: var(--text-sm);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    resize: vertical;
+  }
+
+  .wi-links__apply-field input:focus,
+  .wi-links__apply-field textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
+  }
+
+  .wi-links__apply-captcha {
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 2px;
+  }
+
+  .wi-links__apply-captcha-img {
+    border-radius: 8px;
+    border: 1px solid var(--rule);
+    cursor: pointer;
+  }
+
+  .wi-links__apply-submit {
+    align-self: center;
+    padding: 0.65rem 2.2rem;
+    min-height: 44px;
+    border: none;
+    border-radius: 9999px;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    font-family: inherit;
+    color: #fff;
+    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
+    cursor: pointer;
+    transition: transform var(--duration-fast) var(--ease-out-quart), opacity 0.15s ease;
+  }
+
+  .wi-links__apply-submit:hover {
+    transform: translateY(-1px);
+    opacity: 0.95;
+  }
+
+  .wi-links__apply-submit:active {
+    transform: translateY(0) scale(0.98);
+  }
+
+  /* 插件未开放申请时（验证码 404）自动隐藏表单并提示 */
+  .wi-links__apply--unavailable .wi-links__apply-form {
+    display: none;
+  }
+
+  .wi-links__apply--unavailable .wi-links__apply-unavailable-tip {
+    display: block !important;
+    text-align: center;
+    color: var(--ink-3);
+    font-size: var(--text-sm);
+  }
+
+  @media (max-width: 640px) {
+    .wi-links__apply-row {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .wi-links__title {
     font-size: var(--text-4xl);
     margin-bottom: var(--space-xs);

src/pages/moments.astro

@@ -31,6 +31,28 @@ import LightGallery from "../components/LightGallery.astro";
 <div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards' or theme.config?.moments?.moments_style == null or theme.config?.moments?.moments_style == 'timeline'}">
                 <th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
                   <div class="wi-moments-page__card-item" th:each="moment : ${momentsResult.items}">
+                    <div class="wi-moments-page__card-layout">
+                      <img
+                        th:if="${moment.owner != null and !#strings.isEmpty(moment.owner.avatar)}"
+                        class="wi-moments-page__avatar"
+                        th:src="${moment.owner.avatar}"
+                        th:alt="''"
+                        loading="lazy"
+                        decoding="async"
+                      />
+                      <div
+                        th:unless="${moment.owner != null and !#strings.isEmpty(moment.owner.avatar)}"
+                        class="wi-moments-page__avatar wi-moments-page__avatar--fallback"
+                        aria-hidden="true"
+                      >
+                        <span th:text="${#strings.substring(site.title, 0, 1)}"></span>
+                      </div>
+
+                      <div class="wi-moments-page__main">
+                        <div
+                          class="wi-moments-page__name"
+                          th:text="${moment.owner != null and !#strings.isEmpty(moment.owner.displayName) ? moment.owner.displayName : site.title}"
+                        ></div>
                         <div class="wi-moments-page__card-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
                         <div class="wi-moments-page__card-media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
                           <th:block th:each="media : ${moment.spec.content.medium}">
@@ -75,6 +97,8 @@ import LightGallery from "../components/LightGallery.astro";
                         th:attr="name=${moment.metadata.name}"
                       />
                     </div>
+                      </div>  <!-- /__main -->
+                    </div>  <!-- /__card-layout -->
                   </div>
                 </th:block>
                 <th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
@@ -527,6 +551,43 @@ import LightGallery from "../components/LightGallery.astro";
     transform: translateY(-3px);
   }
 
+  /* 朋友圈式布局：头像在左，昵称/正文/九宫格在右 */
+  .wi-moments-page__card-layout {
+    display: flex;
+    gap: var(--space-md);
+    align-items: flex-start;
+  }
+
+  .wi-moments-page__avatar {
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    object-fit: cover;
+  }
+
+  .wi-moments-page__avatar--fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--accent) 14%, transparent);
+    color: var(--accent);
+    font-weight: 700;
+    font-size: var(--text-lg);
+  }
+
+  .wi-moments-page__main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .wi-moments-page__name {
+    font-size: var(--text-base);
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: var(--space-xs);
+  }
+
   .wi-moments-page__card-text {
     font-size: var(--text-base);
     line-height: var(--leading-relaxed);
@@ -568,8 +629,15 @@ import LightGallery from "../components/LightGallery.astro";
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(4)) {
-    grid-template-columns: repeat(3, 1fr);
+  /* 微信九宫格规则：4 张时 2x2 排布 */
+  .wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(4)):not(:has(.wi-moments-page__card-image:nth-child(5))) {
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 72%;
+  }
+
+  /* 三列九宫格限制宽度，避免大屏下图片单元过大 */
+  .wi-moments-page__card-media:has(.wi-moments-page__card-image:nth-child(3)) {
+    max-width: 100%;
   }
 
   .wi-moments-page__card-footer {

theme.yaml

@@ -28,7 +28,7 @@ spec:
         description: 微信读书书架（依赖微信读书插件）
         screenshot:
         file: weread.html
-  version: "1.1.8"
+  version: "1.1.9"
   requires: ">=2.24.0"
   license:
     - name: "GPL-3.0"