halo-theme-WarmIsland/src/pages/weread.astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout wide>
  <Fragment slot="head">
    <title th:text="|${theme.config?.weread?.weread_page_title ?: '书架'} - ${site.title}|"></title>
  </Fragment>

  <section class="wi-weread">
    <div class="wi-container">
      <div class="wi-weread__header">
        <h1
          class="wi-weread__title"
          th:text="${theme.config?.weread?.weread_page_title ?: '书架'}"
        >
          书架
        </h1>
        <p
          class="wi-weread__subtitle"
          th:if="${theme.config?.weread?.weread_page_subtitle}"
          th:text="${theme.config?.weread?.weread_page_subtitle}"
        >
          来自微信读书的同步藏书
        </p>
        <span class="wi-page-accent"></span>
      </div>

      <th:block th:if="${pluginFinder.available('halo-weread-plugin')}">
        <div
          class="wi-weread__shelf"
          id="weread-shelf-wrapper"
          th:attr="data-endpoint=@{/halo-weread-plugin/shelf-html}"
        >
          <p class="wi-weread__loading">正在展开书架…</p>
        </div>
      </th:block>

      <div
        class="wi-weread__empty"
        th:unless="${pluginFinder.available('halo-weread-plugin')}"
      >
        <p>
          该功能需要安装「微信读书（WeRead）信息展示」插件，<a
            href="https://github.com/yeora26/halo-weread-plugin"
            target="_blank"
            rel="noopener noreferrer"
            >前往插件仓库了解</a
          >
        </p>
      </div>
    </div>
  </section>

  <script is:inline th:inline="none">
    (function () {
      var container = document.getElementById("weread-shelf-wrapper");
      if (!container) return;

      var endpoint =
        container.getAttribute("data-endpoint") ||
        "/halo-weread-plugin/shelf-html";

      fetch(endpoint)
        .then(function (res) {
          if (!res.ok) throw new Error("HTTP " + res.status);
          return res.text();
        })
        .then(function (html) {
          container.innerHTML = html;

          /* 笔记弹窗是 position:fixed，但 innerHTML 会把它留在 .wi-main 内，
             而 .wi-main 有自己的层叠上下文（z-index:1），导致弹窗被导航栏
             （z-index:100）和页脚遮挡。移到 body 下即可恢复正常层级。 */
          var modal = document.getElementById("wrNotesModal");
          if (modal && modal.parentNode !== document.body) {
            document.body.appendChild(modal);
          }

          /* innerHTML 插入的脚本不会执行，需要重建后才会运行 */
          var oldScripts = container.querySelectorAll("script");
          Array.prototype.forEach.call(oldScripts, function (oldScript) {
            var script = document.createElement("script");
            script.textContent = oldScript.textContent;
            oldScript.parentNode.replaceChild(script, oldScript);
          });
        })
        .catch(function () {
          container.innerHTML =
            '<p class="wi-weread__loading">书架暂时无法展开，请稍后再试。</p>';
        });
    })();
  </script>
</Layout>

<style>
  /* 头部结构与订阅/图库/友链等页面保持一致：居中标题 + 副标题 + 强调线 */
  .wi-weread {
    padding-block: 1rem 3rem;
  }

  .wi-weread__header {
    text-align: center;
    margin-bottom: var(--space-3xl);
  }

  .wi-weread__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-xs);
  }

  .wi-weread__subtitle {
    font-size: var(--text-sm);
    color: var(--ink-3);
    letter-spacing: var(--tracking-wide);
    margin-block-end: 0;
  }

  .wi-weread__shelf {
    min-height: 200px;
  }

  .wi-weread__loading {
    text-align: center;
    color: var(--ink-3);
    font-size: var(--text-sm);
    padding: var(--space-2xl) 0;
  }

  .wi-weread__empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    border: 1px dashed var(--rule);
    border-radius: var(--radius-lg, 16px);
    color: var(--ink-3);
    font-size: var(--text-sm);
  }

  .wi-weread__empty a {
    color: var(--accent);
    text-decoration: none;
  }

  .wi-weread__empty a:hover {
    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(.wr-head) {
    justify-content: center;
  }

  .wi-weread__shelf :global(.wr-head-stats) {
    justify-content: center;
  }

  .wi-weread__shelf :global(.wr-head-stats span) {
    text-align: center;
  }

  .wi-weread__shelf :global(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .wi-weread__shelf :global(a) {
    color: var(--accent);
  }

  /* ===== 暗黑模式：插件内容为苹果风格浅色配色，深色下需要接管 ===== */

  /* 覆盖插件内部变量（按其命名约定 --wr-*，未命中也无副作用）。
     --wr-line 比全站分隔线略亮：年份分组等装饰线在深色底上需要保证可见 */
  html.dark .wi-weread__shelf :global(.wr-shelf) {
    --wr-ink: var(--ink);
    --wr-muted: var(--ink-2);
    --wr-bg: var(--bg-raised);
    --wr-line: #4a4238;
    --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);
  }

  /* ===== 笔记弹窗：运行时被移到 body 下，脱离了 .wr-shelf 的变量作用域，
     需要独立适配（选择器整体 :global，否则 scoped 属性匹配不到注入节点） ===== */
  :global(html.dark .wr-notes-modal) {
    --wr-ink: var(--ink);
    --wr-muted: var(--ink-2);
    --wr-bg: var(--bg-raised);
    --wr-line: #4a4238;
    --wr-fill: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  :global(html.dark .wr-notes-dialog) {
    background: var(--bg-raised);
  }

  :global(html.dark .wr-notes-close) {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink);
  }

  :global(html.dark .wr-notes-modal :where(h3, h4, strong)) {
    color: var(--ink);
  }

  :global(html.dark .wr-notes-modal :where(p, span, small, em, li)) {
    color: var(--ink-2);
  }
</style>