优化移动端阅读体验、优化瞬间样式、修复导航target属性渲染错误

2026-05-22 14:56:55 +08:00
parent f48db60690
commit 9d0bfcfb4f
24 changed files with 246 additions and 276 deletions
@@ -1,5 +1,34 @@
 # 更新日志

+## v1.1.1
+
+### 瞬间页面
+
+- 🗑️ 移除时间轴（Timeline）布局，简化为卡片（Cards）和瀑布流（Masonry）两种样式
+- 🎨 卡片样式成为新的默认展示样式，采用一栏式居中布局
+- 🧹 清理时间轴相关的 HTML、CSS 和 JS 代码
+
+### 移动端阅读体验优化
+
+- 📱 全面增大移动端字体尺寸，提升文章阅读舒适度
+- 📱 优化文章正文行高（1.75 → 1.8），段落间距更宽松
+- 📱 移动端标题字号适配（h2/h3/h4 在 768px 以下适当放大）
+- 📱 优化全局排版变量（text-xs ~ text-5xl 基准值上调）
+- 📱 优化引用块、代码块、表格在移动端的显示
+- 📱 优化文章卡片在移动端的标题和摘要字号
+- 📱 优化瞬间页面卡片在移动端的文字和间距
+
+### 导航修复
+
+- 🐛 修复导航菜单 target 属性渲染错误，导致部分链接在新标签页打开的问题
+- 🐛 修复 Halo 菜单项 `spec.target` 枚举对象解析为 `target="null"` 的问题
+
+### 错误处理增强
+
+- 🛡️ 添加全局 unhandledrejection 捕获，抑制浏览器扩展产生的控制台错误
+- 🛡️ 复制链接按钮添加 clipboard API 失败回退逻辑
+- 🛡️ Logo 图片加载失败时自动隐藏并显示站点标题
+
 ## v1.1.0

 ### 分享功能增强
@@ -1,6 +1,6 @@
 # 评论

-评论配置控制全站评论区域的外观样式，影响文章详情页、留言板等所有包含评论组件的页面。WarmIsland 基于 Halo 的 `halo:comment` 组件提供评论功能，并提供了样式定制选项。
+评论配置控制全站评论区域的外观样式，影响文章详情页、留言板等所有包含评论组件的页面。WarmIsland 基于 Halo 的 `halo:comment` 组件提供评论功能。

 ## 配置项一览

@@ -13,10 +13,7 @@

 ### 评论样式（comment_style）

-| 值 | 说明 |
-| --- | --- |
-| `warm` | 暖色风格，与暖屿主题整体风格一致，圆角卡片、柔和配色（默认） |
-| `minimal` | 极简风格，去除装饰性元素，线条简洁，适合内容导向型站点 |
+使用原版评论样式。

 ::: tip
 `warm` 样式与暖屿的整体设计语言最为协调，推荐大多数用户使用。`minimal` 样式适合希望让评论区域更低调、不抢夺正文注意力的场景。
@@ -13,7 +13,7 @@
 ::: danger
 朋友圈功能依赖 Halo 的 **plugin-friends** 插件。如果未安装此插件，朋友圈页面将无法正常工作。

-安装方式：Halo 后台 → **插件** → **安装** → 搜索「Friends」或从 [GitHub Releases](https://github.com/halo-sigs/plugin-friends) 下载安装。
+安装方式：Halo 后台 → **插件** → **安装** → 搜索「朋友圈」或从 [GitHub Releases](https://www.halo.run/store/apps/app-yISsV) 下载安装。
 :::

 ## 详细说明
@@ -39,12 +39,9 @@ friends_page_title: "Friends"    # 英文站点
 ### 添加订阅源

 1. 登录 Halo 后台管理控制台
-2. 进入 **朋友圈** 或 **Friends** 管理页面
-3. 点击 **添加订阅** 填写：
-   - **站点名称** — 友站名称
-   - **RSS 地址** — 友站的 RSS/Atom 订阅地址
-   - **Logo** — 友站 Logo（可选）
-4. 保存后，插件会在下次抓取周期自动拉取内容
+2. 进入 **链接** 管理页面
+3. 点击 **新建** 或 **编辑** 填写：元数据 **RSS 地址** 友站的 RSS 订阅地址
+4. 保存后，插件会在下次抓取周期自动拉取内容，亦可进入 **朋友圈** 自行同步

 ::: tip
 大多数博客平台都提供 RSS 订阅功能。常见的 RSS 地址格式：
@@ -14,7 +14,7 @@
 ::: danger
 友情链接功能依赖 Halo 的 **PluginLinks** 插件。如果未安装此插件，友情链接页面将无法正常工作。

-安装方式：Halo 后台 → **插件** → **安装** → 搜索「Links」→ 安装并启用。
+安装方式：Halo 后台 → **插件** → **安装** → 搜索「链接管理」→ 安装并启用。
 :::

 ## 详细说明
@@ -7,7 +7,7 @@
 | 配置项 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `moments_page_title` | 文本 | `瞬间` | 页面标题 |
-| `moments_style` | 下拉 | `timeline` | 展示样式：`timeline` / `cards` / `masonry` |
+| `moments_style` | 下拉 | `cards` | 展示样式：`cards` / `masonry` |
 | `moments_loading_mode` | 下拉 | `infinite_scroll` | 加载方式：`infinite_scroll` / `pagination` |
 | `moments_page_size` | 数字 | `10` | 每页显示数量 |

@@ -16,7 +16,7 @@
 ::: danger
 瞬间功能依赖 Halo 的 **PluginMoments** 插件。如果未安装此插件，瞬间页面将无法正常工作。

-安装方式：Halo 后台 → **插件** → **安装** → 搜索「Moments」→ 安装并启用。
+安装方式：Halo 后台 → **插件** → **安装** → 搜索「瞬间」→ 安装并启用。
 :::

 ## 详细说明
@@ -35,12 +35,11 @@ moments_page_title: "Moments"    # 英文站点

 | 值 | 说明 |
 | --- | --- |
-| `timeline` | 时间线样式，按时间顺序垂直排列，左侧有时间轴连线（默认） |
-| `cards` | 卡片样式，以网格卡片形式展示，每条瞬间独立成卡 |
+| `cards` | 卡片样式，以网格卡片形式展示，每条瞬间独立成卡（默认） |
 | `masonry` | 瀑布流样式，类似 Pinterest 的错落排列，适合图片较多的瞬间 |

 ::: tip
-如果你的瞬间以文字为主，推荐 `timeline` 样式，时间感更强；如果图片较多，推荐 `masonry` 样式，能更好地展示图片内容。
+如果你的瞬间以文字为主，推荐 `cards` 样式，简洁清晰；如果图片较多，推荐 `masonry` 样式，能更好地展示图片内容。
 :::

 ### 加载方式（moments_loading_mode）
@@ -17,7 +17,7 @@
 ::: danger
 图库功能依赖 Halo 的 **PluginPhotos** 插件。如果未安装此插件，图库页面将无法正常工作。

-安装方式：Halo 后台 → **插件** → **安装** → 搜索「Photos」→ 安装并启用。
+安装方式：Halo 后台 → **插件** → **安装** → 搜索「图库」→ 安装并启用。
 :::

 ## 详细说明
@@ -32,7 +32,7 @@ docker restart halo

 搜索功能依赖 Halo 搜索插件：

-1. 确认已安装 [搜索插件](https://www.halo.run/store/apps/app-search-widget)
+1. 确认已安装 [搜索插件](https://www.halo.run/store/apps/app-DlacW)
 2. 确认主题设置中「显示搜索按钮」已开启
 3. 确认插件已启用
 4. 支持快捷键 `Ctrl+K`（macOS 为 `⌘K`）唤起搜索
@@ -43,10 +43,10 @@ docker restart halo

 | 页面 | 所需插件 |
 |------|----------|
-| 瞬间 | [PluginMoments](https://www.halo.run/store/apps/app-moments) |
-| 图库 | [PluginPhotos](https://www.halo.run/store/apps/app-photos) |
-| 友链 | [PluginLinks](https://www.halo.run/store/apps/app-links) |
-| 朋友圈 | 朋友圈插件 |
+| 瞬间 | [PluginMoments](https://www.halo.run/store/apps/app-SnwWD) |
+| 图库 | [PluginPhotos](https://www.halo.run/store/apps/app-BmQJW) |
+| 友链 | [PluginLinks](https://www.halo.run/store/apps/app-hfbQg) |
+| 朋友圈 | [PluginFriends](https://www.halo.run/store/apps/app-yISsV) |

 安装并启用插件后，页面会自动显示内容。未安装插件时页面会显示友好的提示信息。

@@ -100,7 +100,7 @@ docker restart halo

 ### 如何报告 Bug？

-请在 [GitHub Issues](https://github.com/nxxy335top/halo-theme-WarmIsland/issues) 中提交，包含以下信息：
+请在 [GitHub Issues](https://github.com/sunny-335/halo-theme-WarmIsland/issues) 中提交，包含以下信息：

 - Halo 版本
 - 主题版本
@@ -6,29 +6,29 @@ WarmIsland 主题深度集成了多款 Halo 插件，提供了丰富的扩展页

 | 页面 | 所需插件 | 路由 |
 |------|----------|------|
-| 瞬间 | PluginMoments | /moments |
-| 图库 | PluginPhotos | /photos |
-| 友情链接 | PluginLinks | /links |
-| 朋友圈 | plugin-friends | /friends |
-| 豆瓣 | 豆瓣插件 | /douban |
-| 装备 | 装备插件 | /equipments |
-| 足迹 | 足迹插件 | /footprints |
-| Steam | Steam 插件 | /steam |
+| 瞬间 | [PluginMoments](https://www.halo.run/store/apps/app-SnwWD) | /moments |
+| 图库 | [PluginPhotos](https://www.halo.run/store/apps/app-BmQJW) | /photos |
+| 友情链接 | [PluginLinks](https://www.halo.run/store/apps/app-hfbQg) | /links |
+| 朋友圈 | [plugin-friends](https://www.halo.run/store/apps/app-yISsV) | /friends |
+| 豆瓣 | [plugin-douban](https://www.halo.run/store/apps/app-srBOL) | /douban |
+| 装备 | [equipment](https://www.halo.run/store/apps/app-ytygyqml) | /equipments |
+| 足迹 | [footprint](https://www.halo.run/store/apps/app-XCtAQ) | /footprints |
+| Steam | [steam](https://www.halo.run/store/apps/app-0ojqyzfh) | /steam |

 ## 豆瓣页面
-
+[豆瓣插件](https://www.halo.run/store/apps/app-srBOL)
 展示豆瓣观影/读书/音乐记录，支持按类型和状态筛选。

 ## 装备页面
-
+[装备管理插件](https://www.halo.run/store/apps/app-ytygyqml)
 展示个人装备清单，按分组分类展示。

 ## 足迹页面
-
+[足迹插件](https://www.halo.run/store/apps/app-XCtAQ)
 展示个人足迹地图。

 ## Steam 页面
-
+[Steam](https://www.halo.run/store/apps/app-0ojqyzfh)
 展示 Steam 游戏资料，包括：

 - 玩家头像和昵称
@@ -1,6 +1,6 @@
 # 朋友圈

-朋友圈页面展示订阅的友站最新文章动态，需要安装 [朋友圈插件](https://www.halo.run/store/apps/app-friends)。
+朋友圈页面展示订阅的友站最新文章动态，需要安装 [朋友圈插件](https://www.halo.run/store/apps/app-yISsV)。

 ## 功能说明

@@ -1,6 +1,6 @@
 # 友情链接

-友情链接页面展示友站信息，需要安装 [链接管理插件](https://www.halo.run/store/apps/app-links)。
+友情链接页面展示友站信息，需要安装 [链接管理插件](https://www.halo.run/store/apps/app-hfbQg)。

 ## 展示样式

@@ -1,6 +1,6 @@
 # 瞬间

-瞬间页面展示短内容动态，需要安装 [瞬间插件](https://www.halo.run/store/apps/app-moments)。
+瞬间页面展示短内容动态，需要安装 [瞬间插件](https://www.halo.run/store/apps/app-SnwWD)。

 ## 展示样式

@@ -1,6 +1,6 @@
 # 图库

-图库页面展示照片集，需要安装 [图库插件](https://www.halo.run/store/apps/app-photos)。
+图库页面展示照片集，需要安装 [图库插件](https://www.halo.run/store/apps/app-BmQJW)。

 ## 展示样式

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.1.1",
  "type": "module",
  "engines": {
    "node": ">=22.12.0"
@@ -366,13 +366,11 @@ spec:
          name: moments_style
          label: 展示样式
          options:
-            - label: Timeline
-              value: timeline
            - label: Cards
              value: cards
            - label: Masonry
              value: masonry
-          value: timeline
+          value: cards
        - $formkit: select
          name: moments_loading_mode
          label: 加载方式
@@ -16,7 +16,7 @@
            <a
              th:each="menuItem : ${menu.menuItems}"
              th:href="@{${menuItem.status.href}}"
-              th:target="${menuItem.spec.target}"
+              th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
              th:text="${menuItem.status.displayName}"
              class="wi-mobile-menu__link"
              th:data-href="${menuItem.status.href}"
@@ -12,6 +12,7 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
        class="wi-navbar__logo"
        loading="eager"
        decoding="async"
+        onerror="this.style.display='none';this.nextElementSibling&&this.nextElementSibling.classList.add('wi-navbar__title')"
      />
      <span
        th:if="${#strings.isEmpty(theme.config?.basic?.logo)}"
@@ -30,7 +31,7 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
            <a
              th:each="menuItem : ${menu.menuItems}"
              th:href="@{${menuItem.status.href}}"
-              th:target="${menuItem.spec.target}"
+              th:target="${menuItem.spec?.target?.value == '_blank'} ? '_blank' : '_self'"
              th:text="${menuItem.status.displayName}"
              class="wi-navbar__link"
              th:data-href="${menuItem.status.href}"
@@ -244,5 +244,41 @@ const { variant = "default" } = Astro.props;
      width: 100%;
      aspect-ratio: 16 / 9;
    }
+
+    .post-card__content {
+      padding: var(--space-md);
+    }
+
+    .post-card__title {
+      font-size: clamp(1.15rem, 3vw, 1.5rem);
+    }
+
+    .post-card__excerpt {
+      font-size: var(--text-sm);
+      -webkit-line-clamp: 3;
+    }
+
+    .post-card--featured .post-card__content {
+      padding: var(--space-lg);
+    }
+
+    .post-card--featured .post-card__title {
+      font-size: clamp(1.3rem, 4vw, 1.7rem);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .post-card__content {
+      padding: var(--space-md) var(--space-sm);
+    }
+
+    .post-card__title {
+      font-size: clamp(1.05rem, 4vw, 1.25rem);
+    }
+
+    .post-card__excerpt {
+      font-size: var(--text-sm);
+      -webkit-line-clamp: 2;
+    }
  }
 </style>
@@ -76,6 +76,13 @@ const { pageTitle, contentClass, wide, home } = Astro.props;
    <slot name="head" />
  </head>
  <body class="wi-body">
+    <script is:inline>
+      window.addEventListener("unhandledrejection", function (e) {
+        if (e.reason && e.reason.message && e.reason.message.indexOf("Could not establish connection") !== -1) {
+          e.preventDefault();
+        }
+      });
+    </script>
    <script is:inline>
      (function(){
        try{
@@ -19,70 +19,7 @@ import LightGallery from "../components/LightGallery.astro";
        <div class="wi-moments-page__content">
          <th:block th:if="${momentFinder != null}">
            <th:block th:with="pageSize = ${theme.config?.moments?.moments_page_size ?: 10}, momentsResult = ${momentFinder.list(1, pageSize)}">
-              <div
-                class="wi-moments-page__timeline"
-                th:if="${theme.config?.moments?.moments_style == 'timeline' or theme.config?.moments?.moments_style == null}"
-              >
-                <th:block th:if="${momentsResult != null and not #lists.isEmpty(momentsResult.items)}">
-                  <div class="wi-moments-page__item" th:each="moment : ${momentsResult.items}">
-                    <div class="wi-moments-page__dot"></div>
-                    <div class="wi-moments-page__line"></div>
-                    <div class="wi-moments-page__card">
-                      <div class="wi-moments-page__text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
-                      <div class="wi-moments-page__media" th:if="${moment.spec.content.medium != null and !#lists.isEmpty(moment.spec.content.medium)}">
-                        <th:block th:each="media : ${moment.spec.content.medium}">
-                          <img
-                            th:if="${media.type.name == 'PHOTO'}"
-                            th:src="${media.url}"
-                            th:alt="''"
-                            class="wi-moments-page__image"
-                            loading="lazy"
-                            decoding="async"
-                          />
-                        </th:block>
-                      </div>
-                      <div class="wi-moments-page__footer">
-                        <time
-                          class="wi-moments-page__date"
-                          th:text="${#dates.format(moment.spec?.releaseTime ?: moment.metadata?.creationTimestamp, 'yyyy-MM-dd HH:mm')}"
-                        ></time>
-                        <div class="wi-moments-page__actions">
-                          <button
-                            class="wi-moments-page__like-btn"
-                            type="button"
-                            th:attr="data-moment-name=${moment.metadata.name}"
-                          >
-                            <svg class="wi-moments-page__like-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
-                            <span class="wi-moments-page__like-count" th:text="${moment.stats?.upvote ?: 0}">0</span>
-                          </button>
-                          <button
-                            class="wi-moments-page__comment-btn"
-                            type="button"
-                            th:attr="data-moment-name=${moment.metadata.name}"
-                          >
-                            <svg class="wi-moments-page__comment-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                            <span class="wi-moments-page__comment-count" th:text="${moment.stats?.approvedComment ?: 0}">0</span>
-                          </button>
-                        </div>
-                      </div>
-                      <div class="wi-moments-page__comment-area" th:attr="data-moment-name=${moment.metadata.name}" style="display:none;">
-                        <halo:comment
-                          group="moment.halo.run"
-                          kind="Moment"
-                          th:attr="name=${moment.metadata.name}"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </th:block>
-                <th:block th:if="${momentsResult == null or #lists.isEmpty(momentsResult.items)}">
-                  <div class="wi-moments-page__empty">
-                    <p th:text="#{moments.noMoments}">No moments yet</p>
-                  </div>
-                </th:block>
-              </div>
-
-              <div class="wi-moments-page__cards" th:if="${theme.config?.moments?.moments_style == 'cards'}">
+<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-text" th:utext="${moment.spec?.content?.html ?: moment.spec?.content?.raw ?: moment.spec?.content}"></div>
@@ -362,13 +299,12 @@ import LightGallery from "../components/LightGallery.astro";
                  ? sentinel.closest(".wi-moments-page__content").querySelector(
                      sentinel.previousElementSibling
                        ? sentinel.previousElementSibling.className.split(" ")[0]
-                        : ".wi-moments-page__timeline"
+                        : ".wi-moments-page__cards"
                    )
                  : null;

                var container = null;
                var selectors = [
-                  ".wi-moments-page__timeline",
                  ".wi-moments-page__cards",
                  ".wi-moments-page__masonry"
                ];
@@ -475,117 +411,6 @@ import LightGallery from "../components/LightGallery.astro";
    contain-intrinsic-size: auto 800px;
  }

-  .wi-moments-page__timeline {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xl);
-    padding-left: var(--space-2xl);
-  }
-
-  .wi-moments-page__item {
-    position: relative;
-  }
-
-  .wi-moments-page__dot {
-    position: absolute;
-    left: calc(-1 * var(--space-2xl) - 5px);
-    top: 10px;
-    width: 10px;
-    height: 10px;
-    border-radius: 9999px;
-    background: var(--accent);
-    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent);
-    z-index: 2;
-  }
-
-  .wi-moments-page__line {
-    position: absolute;
-    left: calc(-1 * var(--space-2xl));
-    top: 20px;
-    bottom: calc(-1 * var(--space-xl));
-    width: 1px;
-    background: var(--rule);
-    z-index: 1;
-  }
-
-  .wi-moments-page__item:last-child .wi-moments-page__line {
-    display: none;
-  }
-
-  .wi-moments-page__card {
-    background: var(--bg-raised);
-    border: 1px solid var(--rule);
-    border-radius: 16px;
-    padding: var(--space-xl);
-    transition:
-      box-shadow var(--duration-normal) var(--ease-out-expo),
-      transform var(--duration-normal) var(--ease-out-expo);
-  }
-
-  .wi-moments-page__card:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-  }
-
-  .wi-moments-page__text {
-    font-size: var(--text-base);
-    line-height: var(--leading-relaxed);
-    color: var(--ink);
-    margin-bottom: var(--space-md);
-  }
-
-  .wi-moments-page__media {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 6px;
-    margin-bottom: var(--space-md);
-  }
-
-  .wi-moments-page__image {
-    width: 100%;
-    aspect-ratio: 1;
-    object-fit: cover;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-  }
-
-  .wi-moments-page__image:hover {
-    transform: scale(1.03);
-  }
-
-  .wi-moments-page__media:has(.wi-moments-page__image:only-child) {
-    grid-template-columns: 1fr;
-  }
-
-  .wi-moments-page__media:has(.wi-moments-page__image:only-child) .wi-moments-page__image {
-    aspect-ratio: auto;
-    max-height: 300px;
-    max-width: 400px;
-  }
-
-  .wi-moments-page__media:has(.wi-moments-page__image:nth-child(2):last-child) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .wi-moments-page__media:has(.wi-moments-page__image:nth-child(4)) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .wi-moments-page__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-md);
-  }
-
-  .wi-moments-page__date {
-    font-size: var(--text-xs);
-    color: var(--ink-3);
-    letter-spacing: var(--tracking-wide);
-  }
-
  .wi-moments-page__actions {
    display: flex;
    align-items: center;
@@ -656,9 +481,11 @@ import LightGallery from "../components/LightGallery.astro";
  }

  .wi-moments-page__cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    display: flex;
+    flex-direction: column;
    gap: var(--space-lg);
+    max-width: 720px;
+    margin: 0 auto;
  }

  .wi-moments-page__card-item {
@@ -851,41 +678,20 @@ import LightGallery from "../components/LightGallery.astro";
  }

  @media (max-width: 768px) {
-    .wi-moments-page__timeline {
-      padding-left: var(--space-xl);
-    }
-
-    .wi-moments-page__dot {
-      left: calc(-1 * var(--space-xl) - 5px);
-    }
-
-    .wi-moments-page__line {
-      left: calc(-1 * var(--space-xl));
-    }
-
    .wi-moments-page__masonry {
      columns: 1;
    }

-    .wi-moments-page__cards {
-      grid-template-columns: 1fr;
+    .wi-moments-page__card-item {
+      padding: var(--space-md);
+    }
+
+    .wi-moments-page__card-text {
+      font-size: var(--text-base);
    }
  }

  @media (max-width: 480px) {
-    .wi-moments-page__timeline {
-      padding-left: var(--space-lg);
-    }
-
-    .wi-moments-page__dot {
-      left: calc(-1 * var(--space-lg) - 5px);
-    }
-
-    .wi-moments-page__line {
-      left: calc(-1 * var(--space-lg));
-    }
-
-    .wi-moments-page__media,
    .wi-moments-page__card-media,
    .wi-moments-page__masonry-media {
      grid-template-columns: repeat(3, 1fr);
@@ -896,5 +702,15 @@ import LightGallery from "../components/LightGallery.astro";
    .wi-moments-page__comment-btn {
      padding: 8px 14px;
    }
+
+    .wi-moments-page__card-item,
+    .wi-moments-page__masonry-item {
+      padding: var(--space-md) var(--space-sm);
+    }
+
+    .wi-moments-page__card-text,
+    .wi-moments-page__masonry-text {
+      font-size: var(--text-base);
+    }
  }
 </style>
@@ -587,6 +587,17 @@ import LightGallery from "../components/LightGallery.astro";
            navigator.clipboard.writeText(url).then(function () {
              copyBtn.classList.add("wi-post__share-btn--copied");
              setTimeout(function () { copyBtn.classList.remove("wi-post__share-btn--copied"); }, 2000);
+            }).catch(function () {
+              var ta = document.createElement("textarea");
+              ta.value = url;
+              ta.style.position = "fixed";
+              ta.style.left = "-9999px";
+              document.body.appendChild(ta);
+              ta.select();
+              try { document.execCommand("copy"); } catch (e) {}
+              document.body.removeChild(ta);
+              copyBtn.classList.add("wi-post__share-btn--copied");
+              setTimeout(function () { copyBtn.classList.remove("wi-post__share-btn--copied"); }, 2000);
            });
          } else {
            var ta = document.createElement("textarea");
@@ -852,8 +863,8 @@ import LightGallery from "../components/LightGallery.astro";

  .wi-post__body {
    width: 100%;
-    font-size: 1rem;
-    line-height: 1.75;
+    font-size: 1.05rem;
+    line-height: 1.8;
    color: #3d3530;
    overflow-wrap: break-word;
    word-wrap: break-word;
@@ -1491,6 +1502,21 @@ import LightGallery from "../components/LightGallery.astro";
    color: var(--ink-3);
  }

+  @media (max-width: 480px) {
+    .wi-post__related-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .wi-post__body {
+      font-size: 1.05rem;
+      line-height: 1.85;
+    }
+
+    .wi-post__title {
+      font-size: clamp(1.6rem, 5vw, 2.8rem);
+    }
+  }
+
  @media (max-width: 768px) {
    .wi-post__related-grid {
      grid-template-columns: 1fr;
@@ -1526,20 +1552,35 @@ import LightGallery from "../components/LightGallery.astro";
    .wi-post__nav-link--next {
      text-align: right;
    }
-  }
-
-  @media (max-width: 480px) {
-    .wi-post__related-grid {
-      grid-template-columns: 1fr;
-    }

    .wi-post__body {
-      font-size: 0.9375rem;
-      line-height: 1.8;
+      font-size: 1.025rem;
+      line-height: 1.82;
    }

-    .wi-post__title {
-      font-size: clamp(1.5rem, 4vw, 2.8rem);
+    .wi-post__body p {
+      margin-block-end: 1.4em;
+    }
+
+    .wi-post__body h2 {
+      font-size: 1.6rem;
+    }
+
+    .wi-post__body h3 {
+      font-size: 1.35rem;
+    }
+
+    .wi-post__body h4 {
+      font-size: 1.2rem;
+    }
+
+    .wi-post__body pre {
+      font-size: 0.9em;
+      padding: 1em;
+    }
+
+    .wi-post__body code {
+      font-size: 0.9em;
    }
  }
 </style>
@@ -3,16 +3,16 @@
  --font-body: 'LXGW WenKai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

-  --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
-  --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
-  --text-base: clamp(0.938rem, 0.89rem + 0.24vw, 1rem);
-  --text-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.125rem);
-  --text-lg: clamp(1.15rem, 1.06rem + 0.45vw, 1.25rem);
-  --text-xl: clamp(1.3rem, 1.16rem + 0.7vw, 1.5rem);
-  --text-2xl: clamp(1.55rem, 1.34rem + 1.05vw, 1.875rem);
-  --text-3xl: clamp(1.85rem, 1.52rem + 1.65vw, 2.25rem);
-  --text-4xl: clamp(2.15rem, 1.7rem + 2.25vw, 3rem);
-  --text-5xl: clamp(2.6rem, 1.9rem + 3.5vw, 3.75rem);
+  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
+  --text-sm: clamp(0.875rem, 0.82rem + 0.2vw, 0.95rem);
+  --text-base: clamp(1rem, 0.94rem + 0.25vw, 1.05rem);
+  --text-md: clamp(1.1rem, 1.02rem + 0.3vw, 1.2rem);
+  --text-lg: clamp(1.2rem, 1.1rem + 0.45vw, 1.3rem);
+  --text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
+  --text-2xl: clamp(1.65rem, 1.4rem + 1.05vw, 2rem);
+  --text-3xl: clamp(1.95rem, 1.6rem + 1.65vw, 2.4rem);
+  --text-4xl: clamp(2.3rem, 1.8rem + 2.25vw, 3.2rem);
+  --text-5xl: clamp(2.8rem, 2rem + 3.5vw, 4rem);

  --leading-none: 1;
  --leading-tight: 1.2;
@@ -222,3 +222,52 @@ table {
  width: 100%;
  margin: 0 auto;
 }
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  body {
+    font-size: var(--text-base);
+  }
+
+  p {
+    margin-block-end: 1.2em;
+  }
+
+  .wi-content-wrap {
+    padding-inline: 1.25rem;
+  }
+
+  blockquote {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--text-base);
+  }
+
+  pre {
+    padding: var(--space-md);
+    font-size: var(--text-sm);
+  }
+}
+
+@media (max-width: 480px) {
+  body {
+    font-size: var(--text-base);
+  }
+
+  .wi-content-wrap {
+    padding-inline: 1rem;
+  }
+
+  blockquote {
+    padding: var(--space-sm) var(--space-sm);
+    font-size: var(--text-base);
+  }
+
+  table {
+    font-size: var(--text-sm);
+  }
+
+  th,
+  td {
+    padding: var(--space-sm) var(--space-sm);
+  }
+}
@@ -20,7 +20,7 @@ spec:
        description: 留言板
        screenshot:
        file: page_messageboard.html
-  version: "1.1.0"
+  version: "1.1.1"
  requires: ">=2.24.0"
  license:
    - name: "GPL-3.0"