路漫漫其修远兮，吾将上下而求索 👁 0 ← 更新日志

更新日志

Domal
Domal
2026·08·12 11:53

事不目见耳闻，而臆断其有无，可乎？
每一次的更迭、功能的增减、文字的沉淀，皆如实录于此。

2026·10·14 标题自托管衬线字体

  • 正文改无衬线后标题仍走本机衬线栈，没装思源宋体的 Windows 访客依旧看到宋体 SimSun → 自托管思源宋体（SIL OFL）按需子集（themes/domal/static/fonts/ + CSS 顶部两条 @font-face），--font-serif 把 'Domal Serif' 提到首位，本机字体只作兜底。
  • 子集只收「会被衬线渲染」的文本（页面/栏目标题、副标题、正文内 h1~h4、页脚落款、Hero、UI 文案）：1,171 个字形（汉字 1,028），woff2 体积 400 字重 200 KB / 500 字重 202 KB。
  • 配套调整：正文表格表头改无衬线（表头属正文内容，字符不可枚举）；首页打字机文字改无衬线（文字来自一言 API，字符不可预知）；相册卡片标题 600 → 500（webfont 只出 400/500 两档，600 会触发浏览器合成粗体、又变得各平台不一致）。
  • 新增 tools/build-serif-font.ps1：自动算字符集 → 子集化 → cmap 覆盖校验 → 若存在 public/ 再从真实 HTML 里抠衬线元素文本做交叉校验。以后标题出现新字，跑一次即可（换版本号需同步改 CSS 里的 -v1）。
  • 验证：用无头 Chrome 把本机字体全部从字体栈中移除后，70/70 条真实标题仍与完整栈逐像素一致（渲染已完全由 webfont 负责，各平台必然相同）；交叉校验 759 个真实字符中仅 ⚖ ✅ ️ 三个符号缺失，而思源宋体本身就没有它们（与改前行为一致）。

2026·10·13 排版重构

字体排版：正文切换无衬线字体

  • 原站点无内置字体，正文字体栈优先衬线，Windows 用户会回退到 SimSun，不同设备观感不一致。
  • 正文（文章、思考页、说说卡片等）改用 --font-sans，system-ui 前置；标题保留衬线字体，维持层次：标题保留书写质感，正文清爽易读。

2026·10·12 书库重构 · 细节修复

藏书阁：撤掉 books.yaml 登记表，建目录即上书架

  • 重构书库模块，废弃独立维护的data/books.yaml清单，改为直接读取content/books目录结构，实现「建目录即自动上架」，消除新增书籍忘记手动登记导致页面不显示的问题。

细节修复

  • Bug修复：时间轴空链接、相册标题渲染、点赞按钮键盘支持、侧边导航高亮、头像相册元数据校正、KaTeX冗余资源、章节字数统计（剔除换行干扰，统一统计口径）。

css 样式精简

  • CSS优化：清理死代码，颜色抽为CSS变量，精简样式体积；像素对比验证无破坏性视觉改动。

2026·10·01 碎碎念长图比例调整

碎碎念：长图缩略图优化

  • 问题：竖长单图说说，原图按原比例+限高480px渲染，图片细长、移动端挤占大量屏幕空间，两侧留白明显。
  • 实现：say-photos 短代码在构建阶段通过 imageConfig 获取图片尺寸；高度≥1.5倍宽度判定为长图，添加 .say-photos__item--tall CSS标记。
  • 长图预览样式：单图长图缩略图强制 1:1 方形，width: min(260px, 100%)，object-fit: cover、object-position: center top 优先截取图片上部主体，避免页面高度被大图撑开。
  • 灯箱保持原样：灯箱数据源仍使用原图尺寸，点击后正常查看完整原图，缩略图裁切仅为预览，不影响原图浏览。
  • 其他布局不变：横图、方图、3:4竖图维持原有比例（限高480px）；多图继续沿用九宫格网格规则。
  • 参数可配置：长图判定阈值、缩略图最大宽度、取景位置均可在代码内调整。

2026·09·21 说说点赞与评论计数

碎碎念：点赞 / 评论计数

  • 底部操作行：每条说说底部改为「心形图标 + 点赞数」「评论图标 + 评论数」，只显示图标与累计数量，不出现「点赞 / 评论」文字（悬停提示与读屏名称交给 title / aria-label）
  • 移除「来自 X」：原先的「来自 Web / 移动端」不再展示，并一并删除 via 字段（18 条说说内容 + archetypes/says.md 模板 + i18n 中的 via 键）
  • 点赞接入 Artalk 页面投票：服务端真实计数、同访客按 IP 判重，重复点击即取消——写 POST /api/v2/votes/page/{id}/up，读 GET /api/v2/comments（一次请求同时拿到页面 ID 与 vote_up）
  • 页面在 Artalk 里尚未建立时（列表接口返回 id=0）会先记一次 PV 建页（与 Artalk 官方客户端初始化同款机制），再投票
  • 避免打满接口：点赞数进入视口才请求（IntersectionObserver，提前 200px 预取）；评论数仍由一次 stats/page_comment 批量取得
  • 已赞状态回填：仅当 vote_up > 0 时额外请求一次 GET /votes/page/{id} 取 is_up，用于红心高亮
  • 交互细节：点赞后红心高亮 + 一次弹跳动画，行尾 1.6s 轻提示（点赞成功 / 已取消点赞 / 点赞失败）；按钮带 aria-pressed
  • 点赞与评论共用同一 pageKey（/says/<文件名>/），评论保持「手风琴 + 首次展开才挂载 Artalk 实例」
  • 图标取自 iconfont（心形 / 评论对话框），统一 fill="currentColor" 跟随主题色
  • 注意：Artalk 服务端 CORS 目前仅放行 https://domal.cc，本地 localhost 预览时点赞与评论数会被浏览器拦截（线上不受影响）

2026·09·20 首页碎碎念换行修复

首页活动区「碎碎念」显示换行

  • 现象：同一条说说，/says/ 页正常换行，首页活动区却挤成一行
  • 根因：正文用 </br> 强制换行（非标准写法，浏览器按 <br> 处理）。/says/ 页原样输出 HTML，换行生效；首页走 plainify，把 </br> 剥掉、换行也一并折叠成空格
  • 方案：首页改为「</br> / <br> → 占位符 → plainify → 还原为真实换行」，并给 .says-mini-item__text 加 white-space: pre-line
  • 覆盖 </br> / <br> / <br/> / <br /> 四种写法；图片与 shortcode 仍被剥离；原有的「超过三行省略号」保留

2026·09·12 文章右侧目录栏

桌面右侧目录栏

  • 桌面（≥1240px）：正文右侧 sticky 目录栏——滚动高亮当前章节、阅读进度 0%→100%、展开/收起全部子目录、点击平滑定位（含 URL hash 同步）
  • 工具栏含「回到顶部」按钮：平滑回顶 → 清除 URL hash
  • 修复「目录文字透出」：改为「头部固定 + 仅目录树内部滚动」，不再从头部与面板边框的缝隙透字
  • 子目录支持按组折叠：点击一级条目即展开 / 再次点击折叠本组（右侧带箭头指示），跳转不受影响；底部按钮仍可全部展开 / 收起
  • 阅读进度改以正文为基准：读完正文即 100%，不再需要滚过标签栏 / 评论区 / 页脚才满格
  • 移动端（<1240px）：目录整栏隐藏
  • 目录由 JS 从 .prose 的 h2 / h3 自动构建（标题 id 由 goldmark 生成），内容改动无需维护目录
  • 有效标题 < 3 个自动整栏隐藏；front matter 加 toc: false 可整页关闭；books（阅读器模式）与 gallery 不启用
  • 宽布局类 html.toc-enabled 在 <head> 预置（与阅读模式同思路），首帧即生效，正文宽度不跳动、底部导航不闪现
  • 适用：posts / thinking / about 共 14 页；构建侧注意——Hugo --minify 的 JS 压缩器对正则字面量与 \n \r 转义有误判，目录脚本已完全规避

2026·09·11 排版 · 书籍移动端阅读模式

首字下沉不再误伤引用（> 引文）

  • 修复：引文块首个字被意外放大下沉（如文章开头的 > 说明块）
  • 根因：原选择器 .prose p:first-child::first-letter 过于宽泛——blockquote / 列表 / 表格内的第一个段落都会被命中
  • 方案：收紧为 .prose > p:first-child::first-letter（仅命中正文首个直接段落），引文不再自动触发

首字下沉改为「按需开启」

  • 开启 goldmark 块级属性：markup.goldmark.parser.attribute.block: true
  • 在需要下沉的段落（含引文内段落）后另起一行写 {.dropcap} 即可，行内 Markdown（代码 / 粗体）不受影响；删掉该行即恢复普通排版

有序列表序号向左溢出修复

  • 修复：正文有序列表（如文章「目录」的 1. 2. 3. …）序号被挤出容器左侧、掉进页边距
  • 根因：.prose ul, .prose ol { padding-left: 0 } 对有序列表同样生效，而 ol 序号默认 list-style-position: outside，没有留下悬挂空间
  • 方案：拆开规则——ul 保留 0（改用自定义「—」伪元素）；ol 单独给 padding-left: 2em 悬挂缩进，并让序号统一为弱化灰 + 等宽字体，与「—」项目符号呼应

超长 token 撑破移动端布局修复

  • 修复：正文里的超长不可断行内容（长路径 / 类名 / 配置键）顶破容器，移动端整页出现横向滚动条
  • 根因：.prose 未声明 overflow-wrap，行内 <code> 中如 Views/ViewModels/Models/Services/Helpers/Resources/tools/（57 字符 ≈ 436px）无法折行，而移动端 main.page + article.post-shell 双层内边距后可用宽度只有约 272px
  • 方案：.prose { overflow-wrap: break-word }——长 token 仅在放不下时折行；<pre> 因 white-space: pre 不受影响仍横向滚动，表格单元格沿用更激进的 anywhere

书籍章节：取消首字下沉

  • 章节正文改用 .prose--book，重置 ::first-letter（长篇连续阅读时首字放大会打断节奏）
  • 重置写法与 .prose--thinking 保持一致；如需某段单独启用，仍可手动写 {.dropcap}

书籍章节：移动端沉浸阅读（阅读器模式）

  • ≤600px 时底部导航默认收起，轻触正文空白处唤出 / 收起，营造阅读 App 的沉浸感
  • <head> 中尽早打 html.reader-mode 标记，避免底部导航「先渲染再收起」的闪现（与主题 FOUC 处理同思路）
  • 导航收起时同步收回为其预留的 72px 底部空间，正文可占满整屏；过渡与导航滑出同节奏
  • 点按链接 / 按钮 / 代码复制 / 评论区 / 灯箱时不触发切换，避免误操作；首次进入有一次轻提示（每会话仅一次）
  • 自动收起：点击唤出后 2.5 秒无操作自动收起；页面滑动（向上 / 向下）立即收起
    • 在导航内操作（触摸 / 移动 / 聚焦）会重置这 2.5 秒，翻看章节目录不会看到一半被收走
    • 滑动判定设 200ms 宽限期 + 12px 位移阈值：唤出导航会让 .page 底部内边距变化，避免出现「刚唤出就被收走」
  • 滑到底部自动弹出：滚到距底部 24px 内自动唤出导航（方便点「下一章 / 返回目录」），且不参与 2.5 秒倒计时——触底弹出的导航保持常驻，直到离开底部（向上滑动）或轻触收起；点击唤出的导航仍按 2.5 秒自动收起

2026·09·09 明暗主题方案重构 · 点赞识别修复

明暗主题切换改为「单一 data-theme 驱动」

  • 重构：弃用此前「<html> 内联 color-scheme + JS 运行时改写 style」的方案（移动端存在竞态，切回亮色仍被浏览器压暗）
  • 最终方案：
    • <head> 加 <meta name="color-scheme" content="light dark">（HTML 级、最早生效的退出 Auto Dark 锚点）
    • color-scheme 完全交由 CSS [data-theme='light'/'dark'] 属性选择器跟随
    • JS（FOUC 初始化 / 手动切换 / 跟随系统）只切换 data-theme，不再手动写内联样式，杜绝双写竞态
  • 效果：移动端系统暗色时也能真正切回亮色，明暗分明

点赞计数按真实 IP 识别

  • 修复：换设备 / 换 IP 点赞仍只能 +1（看似只有一次赞）
  • 根因：站点经 Nginx 反代，Artalk 服务端 http.proxy_header 未配置，所有请求的 c.IP() 相同（内网地址）→ 不同访客被识别为同一人，互相"取消"
  • 方案：artalk.yml 配置 http.proxy_header: "X-Forwarded-For" 读取真实访客 IP，重启容器后不同 IP 各自独立计数

2026·09·06 阅读量修复 · 明暗主题加固 · 移动端体验优化

书籍章节页评论默认关闭

  • 章节内容下方不再默认显示评论区，页面更聚焦阅读
  • 如需某章开放讨论：该章 front matter 加 comments: true 即可

阅读量（👁）失效修复

  • 修复：评论关闭的页面阅读量恒为 0（评论挂载才会触发 Artalk 初始化，而 PV 统计依赖初始化）
  • 新增独立 PV 统计 trackPV + 公共兜底 partials/pv-fallback.html：评论关闭时直接调用 Artalk pages/pv 接口累计回填
  • 覆盖：书籍章节页、关于页、更新日志页等所有"关闭评论但仍显示阅读量"的页面，全站 PV 恢复真实计数

明暗主题跟随系统加固（移动端）

  • 修复：移动端（Android Chrome 等）系统暗色时无法切回亮色，表现两色相近
  • 根因：浏览器 Auto Dark Theme 对未强声明 color-scheme 的页面强制套暗色滤镜
  • 初版方案：<html> 内联 color-scheme + JS 切换时同步更新 + html 铺满背景色
    • 此方案后有竞态缺陷，已重构为「单一 data-theme 驱动 + meta color-scheme」，见 2026·09·09 条目

页脚备案完善

  • 页脚新增公安备案（含官方图标）
  • ICP 与公安备案、版权信息等字体间距统一
  • 备案号按网安要求指向官方查询站（beian.miit.gov.cn / beian.mps.gov.cn）

点赞与匿名评论说明

  • 点赞采用 Artalk 页面投票：同一访客（按 IP）可赞/取消 toggle，不叠加；不同访客各自累计
  • 评论支持免登录匿名（填昵称即可），邮箱字段不再必填

2026·08·23 碎碎念体验升级 · 打字机修复

碎碎念图片九宫格

  • 新增 say-photos shortcode：一句话 + 下方 1~9 张图片，微信朋友圈式布局自适应（1 张原比例 / 2 张 3:4 竖图 / 4 张 2×2 / 其余 3 列方形网格）
  • 图片点击进入 PhotoSwipe 全屏灯箱，左右翻看 / 缩放 / 键盘导航（与画廊同款，每条说说图片独立成组）
  • 用法：图片放 static/says/<说说文件名>/，正文写 {{< say-photos "1.png" "2.png" ... >}}
  • 补充（2026·10·01）：单图长图不再原比例撑高，改为方形缩略图，见「碎碎念长图比例调整」条目

碎碎念评论数徽标

  • 每条说说「💬 评论」旁新增 +N 评论数徽标：有评论才显示、无评论隐藏
  • 批量统计接口一次请求取回全部说说的评论数，不逐条轮询

首页碎碎念模块纯文字

  • 首页活动区碎碎念仅显示文字摘要（剥离图片），点击直达 /says/#say-xxx 对应锚点查看完整内容

打字机效果修复

  • 修复：一言 API 成功时仅取回 1 句，导致首页打字机永远重复同一句
  • 改为：本地 8 条语录始终为基础 + 并行拉取 4 条一言（文学/诗词/网络/影视，去重），完整实现「打出 → 停顿 → 删除 → 切换下一句」轮换

聚合时间线优化

  • 首页发丝图 Tooltip 中碎碎念条目点击直达对应说说锚点（原为跳到列表页顶部）

代码审查与清理

  • 移除已废弃的 Giscus 主题文件；清理 domal.css 旧分页死类（.pagination）
  • 清理注释代码与未使用变量（页脚导航注释、Tooltip 注释、$featured、打字机死参数等）
  • 更新关于页栏目定名与功能描述，与首页实际显示一致

2026·08·22 Artalk 评论系统上线

评论系统迁移（Giscus → Artalk）

  • 评论系统由 Giscus（需 GitHub 登录）迁移为 Artalk（Go 单二进制 + SQLite 自托管），访客免登录匿名评论
  • 覆盖范围：文墨集 / 静思笺 / 丹青匣 / 藏书阁章节页 / 关于页
  • 深浅主题自动跟随站点切换；管理面板支持评论审核、删除、防垃圾与邮件通知

阅读量升级（不蒜子 → Artalk）

  • 文章 / 思考 / 画廊 / 书籍章节页阅读量改为 Artalk 页面浏览量：真实计数、数据存于本地 SQLite 可导出备份
  • 移除不蒜子第三方脚本与 localStorage 防重复计数逻辑

点赞真实化（localStorage → Artalk 页面投票）

  • 文章 / 思考页 ♡ 点赞改为 Artalk 页面投票：服务端真实计数、同访客防重复、点击后变 ♥
  • 移除原先仅存本机浏览器的假点赞

碎碎念（Says）评论上线

  • 每条说说底部新增「💬 评论」入口，展开即见该条说说的独立评论区（QQ 空间式）
  • 手风琴交互：同一时间只展开一条评论，点击其他说说自动收起上一条，再次点击收起本条
  • 首次展开才挂载评论实例，多条说说互不串评、不重复计数

其他

  • Artalk 前端本地托管（无 CDN 依赖），非首页按需加载
  • 新增部署指南 themes/domal/README-artalk.md（服务端一键启动脚本 + 上线注意事项）

2026·08·18 正文表格窄屏自适应

表格自适应优化（About 等正文页）

  • 修复：正文表格在移动端超出屏幕宽度、撑破容器的问题
  • 根因：单元格内无空格的长路径（如 content/gallery/*/）无法断行，表格按最大内容宽度被撑开
  • 方案：保持原生表格结构不变，仅让长路径允许任意断行（overflow-wrap: anywhere），窄屏下再压缩单元格内边距与字号，表格自动收缩到容器宽度内，不再横向溢出

2026·08·13 分页功能上线 · 文章卡片化 · 代码演示组件

列表分页（全站统一）

  • 新增自定义翻页组件：← 上一页　共 X 页 · 第 Y 页　下一页 →
  • Posts 列表：每页 9 篇，超过 9 篇下方自动出现翻页按钮
  • Tags / Categories / Thinking 列表同步统一翻页样式
  • 翻页仅在多页时显示，单页不出现

文墨集（文章列表）卡片化

  • 每条文章改为一组独立卡片框（暖灰底 + 圆角 + hover 梅红），与闲谈录风格一致
  • 摘要限制最多两行，超出自动省略号

代码演示组件模板化

  • 新增通用 shortcode：html-sample（HTML 代码 / 渲染预览 / 一键复制）与 code-block（任意语言代码块 + 复制）
  • 两组件样式合并去重，视觉与主题统一

2026·08·12 文章体验优化 · 页脚导航 · 岁序谱修复

文章页体验

  • 文章详情顶部元信息栏新增返回栏目链接（← Posts / ← Gallery / ← Thinking），与画廊详情页风格统一，一键回到列表

页脚导航升级

  • 新增页脚导航链接行：About / Friends / Update / Projects / Tag
  • 桌面端：tagline 居左、链接右对齐；移动端自动居中堆叠
  • ICP 备案号在移动端自动换行显示于版权文字下方
  • 移除页脚导航行的顶部分隔线，观感更轻盈

岁序谱（首页聚合时间线）Tooltip 修复

  • 修复：悬停发丝日期时 Tooltip 被上下裁切的问题
  • 根因：原 Tooltip 内嵌于 SVG <foreignObject>，受 overflow-x: auto 滚动容器双重裁切
  • 方案：Tooltip 改为独立 HTML 浮层 + JS 动态定位（完全脱离 overflow 裁切，支持左右/上下越界自动翻转、滚动/缩放跟随重定位、移入卡片保持显示可点击）

岁序谱（时间线页）全面优化

  • 年份 Tab 切换：点击年份胶囊仅显示该年内容，其他年份自动隐藏；激活年份胶囊高亮主题色
  • 移除冗余：删除被注释禁用的 timeline-progress 年份进度条
  • 年份导航降序：2026 → 2025 → 2024 从新到旧排列
  • 年份标题显示发布月份：如 2026 (12) 八月 · 七月 · 四月，月份为可点击锚点，平滑定位并展开对应月份分组
  • 按月折叠分组：默认展开最新月份，其余折叠为紧凑胶囊（▸ 八月 (6)）
  • 视觉升级（参考 Geil.Danke! 时间线）：菱形节点（hover 旋转 + 主题色光晕）、日期标签柔和化、竖向线对齐节点中心
  • 锚点联动：#year-2025 / #month-2026-8 / #day-2026-04-15 自动切换年份、展开分组并平滑滚动

2026·08·11 画廊上线 · 首页焕新 · 主题精简

  • 废弃「手记」栏目，新增「丹青匣」画廊
  • 画廊列表：响应式相册卡片网格（封面自动取色 + hover 缩放 + 照片数/日期）
  • 相册详情：内嵌 PhotoSwipe 5 专业灯箱（左右滑动 / 缩放 / 键盘 / URL 直达 + #图片名）
  • 修复：无图/缺图相册也渲染占位卡片，不再"上传多组只显示一组"
  • 图片标题：优先 front matter title，自动去除 .jpg 扩展名

首页活动区升级

  • 四栏布局定名：文墨集 / 丹青匣 / 静思笺 / 闲谈录
  • 丹青匣：展示相册封面缩略图（可点进详情）
  • 闲谈录：点击直达 says 页面对应锚点（平滑滚动）
  • 文墨集：严格限定只展示 posts 文章

主题精简与健壮性

  • 修复 FOUC（主题初始化前置 <head>，无闪烁）
  • 修复缺失的 favicon.ico；清理 main.js / mainSections 死引用
  • 清理 domal.css 死类（旧 hero__ / btn* / 色板 / 反模式 / 代码框 / notes 残留）
  • 构建改用 --cleanDestinationDir，杜绝 public/ 旧产物残留引发的"内容消失"

页面完善

  • 关于页：同步最新功能与四栏栏目命名
  • 相册详情头：日期 + 👁 浏览量 + 返回画廊列表

2026·07·27 重构

  • 参考 Shiro 交互（弹性导航 / 首页 Hero / 活动区 / 聚合时间线）
  • 移植 Yohaku 设计 token（梅红强调色 / 十阶中性灰 / 纸面底色）
  • 实现深浅主题切换、Giscus 评论、PhotoSwipe 画廊、KaTeX 公式、不蒜子阅读量

时而直抒胸臆，时而无病呻吟