fix(v1.2.4): 彻底修复首页页脚被固定 Hero 盖住——Hero z-index:-1 + main z-index:auto

compat/assets/index@_@astro.riSIMXcv.css

@@ -0,0 +1 @@
+.hero[data-astro-cid-nlow4r3u]{position:fixed;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 85%,var(--accent) 15%) 40%,color-mix(in srgb,var(--bg) 90%,var(--mist-pink) 10%) 70%,var(--bg) 100%);width:100%}.hero__bg[data-astro-cid-nlow4r3u]{position:absolute;inset:0;pointer-events:none}.hero__blur-overlay[data-astro-cid-nlow4r3u]{position:absolute;inset:0;z-index:1;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);will-change:backdrop-filter;pointer-events:none}.hero__orb[data-astro-cid-nlow4r3u]{position:absolute;border-radius:50%;filter:blur(80px);animation:breathe 5s ease-in-out infinite}.hero__orb--1[data-astro-cid-nlow4r3u]{width:420px;height:420px;top:-10%;right:-5%;background:radial-gradient(circle,rgba(212,118,78,.4) 0%,transparent 70%);animation-delay:0s;animation-duration:5s}.hero__orb--2[data-astro-cid-nlow4r3u]{width:350px;height:350px;bottom:-8%;left:-5%;background:radial-gradient(circle,rgba(220,140,160,.3) 0%,transparent 70%);animation-delay:-1.8s;animation-duration:6s}.hero__orb--3[data-astro-cid-nlow4r3u]{width:300px;height:300px;top:40%;left:50%;transform:translate(-50%);background:radial-gradient(circle,rgba(180,150,200,.2) 0%,transparent 70%);animation-delay:-3.2s;animation-duration:4.5s}.hero__bg-image[data-astro-cid-nlow4r3u]{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}.hero__bg-image--dark[data-astro-cid-nlow4r3u],html.dark .hero__bg-image--light[data-astro-cid-nlow4r3u]{display:none}html.dark .hero__bg-image--dark[data-astro-cid-nlow4r3u]{display:block}.hero__content[data-astro-cid-nlow4r3u]{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-xl);gap:var(--space-lg);transition:opacity .4s ease,transform .4s ease}.hero__title[data-astro-cid-nlow4r3u]{font-family:var(--font-sans);font-size:clamp(3rem,8vw,6rem);font-weight:700;letter-spacing:-.03em;color:var(--hero-title-text, var(--ink));line-height:var(--leading-tight)}.hero__subtitle[data-astro-cid-nlow4r3u]{font-family:var(--font-body);font-size:var(--text-xl);color:var(--hero-subtitle-text, var(--ink-2));letter-spacing:.05em;line-height:var(--leading-normal)}.hero__description[data-astro-cid-nlow4r3u]{font-size:var(--text-lg);color:var(--hero-quote-text, var(--ink-2));line-height:var(--leading-relaxed);max-width:560px;text-align:center;transition:opacity .3s ease}.hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__title[data-astro-cid-nlow4r3u],.hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__subtitle[data-astro-cid-nlow4r3u],.hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__description[data-astro-cid-nlow4r3u]{text-shadow:0 1px 2px rgba(0,0,0,.22),0 2px 10px rgba(0,0,0,.16)}html.dark .hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__title[data-astro-cid-nlow4r3u],html.dark .hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__subtitle[data-astro-cid-nlow4r3u],html.dark .hero--fx-shadow[data-astro-cid-nlow4r3u] .hero__description[data-astro-cid-nlow4r3u]{text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4)}.hero--fx-glow[data-astro-cid-nlow4r3u] .hero__title[data-astro-cid-nlow4r3u],.hero--fx-glow[data-astro-cid-nlow4r3u] .hero__subtitle[data-astro-cid-nlow4r3u],.hero--fx-glow[data-astro-cid-nlow4r3u] .hero__description[data-astro-cid-nlow4r3u]{text-shadow:0 0 10px rgba(255,255,255,.85),0 0 26px rgba(255,255,255,.5)}html.dark .hero--fx-glow[data-astro-cid-nlow4r3u] .hero__title[data-astro-cid-nlow4r3u],html.dark .hero--fx-glow[data-astro-cid-nlow4r3u] .hero__subtitle[data-astro-cid-nlow4r3u],html.dark .hero--fx-glow[data-astro-cid-nlow4r3u] .hero__description[data-astro-cid-nlow4r3u]{text-shadow:0 0 8px rgba(255,255,255,.45),0 0 24px rgba(255,255,255,.22)}.hero--fx-scrim[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{background:#ffffff73;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;padding:var(--space-2xl)}html.dark .hero--fx-scrim[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{background:#0006}.hero--fx-gradient[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{background:linear-gradient(135deg,#ffffff8c,#ffffff2e);border-radius:24px;padding:var(--space-2xl)}html.dark .hero--fx-gradient[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{background:linear-gradient(135deg,#00000080,#00000029)}.hero--fx-frame[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:color-mix(in srgb,var(--bg) 30%,transparent);border-radius:24px;padding:var(--space-2xl) var(--space-3xl);gap:var(--space-xl)}html.dark .hero--fx-frame[data-astro-cid-nlow4r3u] .hero__content[data-astro-cid-nlow4r3u]{border-color:color-mix(in srgb,#ffffff 32%,transparent)}.hero--fx-frame[data-astro-cid-nlow4r3u] .hero__title[data-astro-cid-nlow4r3u]{letter-spacLine truncated

docs/changelog.md

@@ -1,15 +1,27 @@
 # 更新日志
 
+## v1.2.4
+
+### 问题修复
+
+- 🐛 **彻底修复首页页脚被 Hero 盖住（v1.2.3 的修复不完整）**：仅取消 main 的
+  层叠上下文（`z-index: auto`）不足以让固定 Hero 稳定落在页脚之下。现改为
+  **双保险**：
+  1. `.hero` 由 `z-index: 0` 改为 `z-index: -1`，作为固定全屏背景沉到根层叠
+     上下文的负 z 层，绘制在一切正常内容（含页脚）之下——这是固定背景的规范做法；
+  2. 保留首页 main `z-index: auto`（仍是必须项：否则 main 若保持 `z-index: 1`
+     会成为层叠上下文，把负 z 的 Hero 困在自己内部、整块仍压在页脚之上）。
+  页脚因此始终保持无 z-index 的状态，既不会被 Hero 盖住，也不会回退到早期
+  「页脚盖住评论区翻页下拉」的问题。经无头浏览器在真实构建产物上验证：
+  滚到页底时 `elementFromPoint` 命中 `footer-inner`，页脚完整可见。
+
 ## v1.2.3
 
 ### 问题修复
 
-- 🐛 **修复首页页脚被 Hero 盖住**：`.wi-main` 的 `z-index: 1` 会把整个内容区
+- 🐛 **初步修复首页页脚被 Hero 盖住（不完整，已被 v1.2.4 取代）**：取消首页
-  （含 `position: fixed` 的全屏 Hero 背景）抬到页脚之上，滚动到页面底部时
+  main 的层叠上下文（`z-index: auto`）。这一项单独作用时仍不够稳健，
-  页脚被 Hero 的模糊背景和下滑箭头挡住，完全看不到。首页现在取消 main 的
+  请直接参考 v1.2.4 的完整修复。
-  层叠上下文（`z-index: auto`）：Hero 落回根层级先绘制，页脚在 DOM 中靠后
-  自然盖住 Hero；内容区滚动时仍正常覆盖 Hero，其他页面（如评论区翻页下拉
-  高于页脚）的层级行为保持不变
 
 ## v1.2.2
 

package.json

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

src/components/HeroSection.astro

@@ -197,7 +197,14 @@
   .hero {
     position: fixed;
     inset: 0;
-    z-index: 0;
+    /* 固定全屏背景必须沉到最底层（z-index:-1）：
+       它是 position:fixed 的全屏英雄区，滚动时永远铺满视口。
+       若不设负值，它会被绘制在普通流/定位元素（如页脚）之上，
+       滚到页底时盖住页脚。负值让它处于根层叠上下文的「负 z」层，
+       在所有正常内容（含页脚）之下；首屏内容区 .wi-home-content
+       用 margin-top:100vh + 不透明背景盖住它，符合设计意图。
+       同时页脚保持无 z-index，不会回退到之前「页脚盖住评论区翻页」的问题。 */
+    z-index: -1;
     display: flex;
     align-items: center;
     justify-content: center;

src/styles/main.scss

@@ -212,12 +212,13 @@ table {
   overflow-x: hidden;
   overflow-x: clip;
   /* 首页必须取消 main 的层叠上下文（z-index: auto + 无其他触发属性）：
-     Hero 是 position:fixed 的全屏背景（z-index:0）且位于 main 内部，
+     Hero 是 position:fixed 的全屏背景（z-index:-1），位于 main 内部。
-     main 若保持 z-index:1，整个 main（含 Hero）会被抬到页脚之上——
+     若 main 保持 z-index:1，它会成为层叠上下文，把内部负值 z 的 Hero
-     滚动到页面底部时页脚被固定 Hero 盖住，只看到模糊的 Hero 背景。
+     困在自己上下文底部，而 main 整体又被抬到页脚之上——滚动到页底时
-     取消后 Hero 落回根层级（z-index:0，先绘制），页脚在 DOM 中靠后
+     页脚仍被 Hero 盖住。取消 main 的层叠上下文后，Hero 的 z-index:-1
-     （z-index:auto）自然盖住 Hero；内容区 .wi-home-content 仍有
+     会落入<strong>根</strong>层叠上下文的负 z 层（绘制在一切正常内容之下），
-     z-index:1，滚动时照常覆盖 Hero。其他页面维持 z-index:1 不变，
+     页脚（无 z-index、DOM 靠后）自然盖住它；内容区 .wi-home-content
+     仍有 z-index:1，滚动时照常覆盖 Hero。其他页面维持 z-index:1 不变，
      评论区翻页下拉仍高于页脚。 */
   z-index: auto;
 }

theme.yaml

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