fix: 书架页标题与主题统一,修复顶部空白与暗黑下数据看不清

依据插件 WeReadShelfRenderer 的实际输出结构(.wr-shelf / .wr-head-title /
.wr-head-stats / .wr-year / .wr-grid)做针对性适配:

- 标题统一:恢复与订阅/图库/友链页面一致的居中标题区(标题+副标题+强调线),
  隐藏插件自带的 .wr-head-title,避免双标题且样式不统一
- 顶部空白:插件容器自带 clamp(40px,6vw,72px) 顶部内边距,叠加主题边距后
  形成大片空白;现收紧插件 padding-top 并将页面 padding 与其他页面对齐
- 暗黑适配:插件为苹果风格浅色配色(--wr-* 变量、#1d1d1f 墨色文字),深色
  背景下统计数字几乎不可见。现通过覆盖 --wr-* 变量 + :where() 零特异性
  文字兜底接管配色,不破坏插件自身显式样式;笔记弹窗浅色底同步处理
This commit is contained in:
2026-09-26 13:55:41 +08:00
parent d01664197f
commit 032b5601ac
2 changed files with 56 additions and 8 deletions
+2 -2
View File
@@ -652,9 +652,9 @@ spec:
formSchema: formSchema:
- $formkit: text - $formkit: text
name: weread_page_title name: weread_page_title
label: 页面标题(浏览器标签) label: 页面标题
placeholder: "书架" placeholder: "书架"
help: 仅用于浏览器标签页标题;页面内的标题由插件返回的书架内容自带 help: 页面顶部标题与浏览器标签页标题;插件自带的标题区会自动隐藏以避免重复
- $formkit: text - $formkit: text
name: weread_page_subtitle name: weread_page_subtitle
label: 页面副标题 label: 页面副标题
+54 -6
View File
@@ -9,8 +9,13 @@ import Layout from "../layouts/Layout.astro";
<section class="wi-weread"> <section class="wi-weread">
<div class="wi-container"> <div class="wi-container">
<!-- 标题由插件返回的书架内容自带,主题不再重复输出 -->
<div class="wi-weread__header"> <div class="wi-weread__header">
<h1
class="wi-weread__title"
th:text="${theme.config?.weread?.weread_page_title ?: '书架'}"
>
书架
</h1>
<p <p
class="wi-weread__subtitle" class="wi-weread__subtitle"
th:if="${theme.config?.weread?.weread_page_subtitle}" th:if="${theme.config?.weread?.weread_page_subtitle}"
@@ -18,6 +23,7 @@ import Layout from "../layouts/Layout.astro";
> >
来自微信读书的同步藏书 来自微信读书的同步藏书
</p> </p>
<span class="wi-page-accent"></span>
</div> </div>
<th:block th:if="${pluginFinder.available('halo-weread-plugin')}"> <th:block th:if="${pluginFinder.available('halo-weread-plugin')}">
@@ -80,19 +86,26 @@ import Layout from "../layouts/Layout.astro";
</Layout> </Layout>
<style> <style>
/* 头部结构与订阅/图库/友链等页面保持一致:居中标题 + 副标题 + 强调线 */
.wi-weread { .wi-weread {
padding-block: 2rem 3rem; padding-block: 1rem 3rem;
} }
.wi-weread__header { .wi-weread__header {
text-align: center; text-align: center;
margin-bottom: var(--space-2xl); margin-bottom: var(--space-3xl);
}
.wi-weread__title {
font-size: var(--text-4xl);
margin-bottom: var(--space-xs);
} }
.wi-weread__subtitle { .wi-weread__subtitle {
font-size: var(--text-base); font-size: var(--text-sm);
color: var(--ink-3); color: var(--ink-3);
line-height: var(--leading-relaxed); letter-spacing: var(--tracking-wide);
margin-block-end: 0;
} }
.wi-weread__shelf { .wi-weread__shelf {
@@ -124,7 +137,18 @@ import Layout from "../layouts/Layout.astro";
text-decoration: underline; text-decoration: underline;
} }
/* 插件返回的书架内容:收敛为与主题一致的卡片观感 */ /* ===== 插件返回的书架内容(.wr-shelf)适配 ===== */
/* 插件自带的标题区与主题头部重复,隐藏后由主题统一呈现 */
.wi-weread__shelf :global(.wr-head-title) {
display: none;
}
/* 插件容器自带 clamp(40px,6vw,72px) 的顶部内边距,主题已提供边距,收紧以消除大片空白 */
.wi-weread__shelf :global(.wr-shelf) {
padding-top: 0;
}
.wi-weread__shelf :global(img) { .wi-weread__shelf :global(img) {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@@ -135,4 +159,28 @@ import Layout from "../layouts/Layout.astro";
color: var(--accent); color: var(--accent);
} }
/* ===== 暗黑模式:插件内容为苹果风格浅色配色,深色下需要接管 ===== */
/* 覆盖插件内部变量(按其命名约定 --wr-*,未命中也无副作用) */
html.dark .wi-weread__shelf :global(.wr-shelf) {
--wr-ink: var(--ink);
--wr-muted: var(--ink-2);
--wr-bg: var(--bg-raised);
--wr-line: var(--rule);
--wr-fill: color-mix(in srgb, var(--ink) 8%, transparent);
}
/* :where() 零特异性兜底:只接管插件未显式着色的文字,不会破坏其自身样式 */
html.dark .wi-weread__shelf :global(:where(h2, h3, strong)) {
color: var(--ink);
}
html.dark .wi-weread__shelf :global(:where(p, span, small, i, em, li)) {
color: var(--ink-2);
}
/* 笔记弹窗浅色底在深色页面中过于突兀 */
html.dark .wi-weread__shelf :global(.wr-notes-modal) {
background: color-mix(in srgb, var(--bg) 94%, transparent);
}
</style> </style>