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:
+2
-2
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user