Skip to content

v1.5.1 — 性能优化与缺陷修复

Choose a tag to compare

View all tags
@zycwer zycwer released this 19 Jul 11:10
v1.5.1
3531436

概述

本次发布包含两部分：常规维护性能优化（commit 391803b）与 6 项功能缺陷修复（commit 3531436）。

建议所有 v1.5.0 用户升级。

⚡ 性能优化（commit 391803b）

运行时性能

  • toc.js 滚动节流：scroll / resize 事件改用 requestAnimationFrame 节流 + { passive: true } 监听器，避免每帧多次 reflow
  • CSS transition: all → 具体属性：8 处 transition: all 替换为 background / color / transform / opacity 等具体属性，避免触发非必要的 layout / paint

构建性能

  • Nunjucks 模板缓存：noCache: true → false，单次构建内模板不再重复编译（实测 51 文件构建从 533ms 降至 399ms）

资源加载

  • preconnect：按需为 v1.hitokoto.cn / hm.baidu.com 添加 preconnect
  • SVG width/height：补全 normal.svg 与 Timeline 动态图标的 width/height 属性，防止 CLS（Cumulative Layout Shift）

顺手修复的潜在 bug

  • normal.styl 删除重复的 @import '_variables'
  • 修复 $whitesoke-light → $whitesmoke-light、$blak-lighter → $black-lighter 两个变量拼写错误（原变量未定义，导致表格奇行背景与 figcaption 颜色静默回退到默认值）

🐛 功能缺陷修复（commit 3531436）

1. toc.js 完全失效（严重）

现象：文章目录滚动定位从未生效。
根因：选择器 #toc / #postBody 在模板中不存在（实际是 .post-toc / .post-content__body），脚本中所有元素查找都返回 null，整个 IIFE 提前 return。同时 post.njk 从未引入 toc.js。
修复：改用类选择器 + .toc-outer 作为锚点，并在 post.njk 中按 page.toc 加载脚本。

2. HeartCurve.njk 语法错误导致整段脚本失效

现象：首页心形曲线动画不工作。
根因：mobileAdjust(window.matchMedia("(hover:none")) 括号不匹配，浏览器报语法错误，整段 <script> 失效。
修复：补全括号；同时修复 r = 2 * a * ... 隐式全局变量（严格模式下报错）；addListener 废弃 API 改为 addEventListener('change', ...)；添加 #wall-main 缺失时的 null 安全检查。

3. search.js 关闭逻辑与高亮 bug

  • closeSearchDialog 中 overflow = 'inherit' 应为 ''（恢复默认）
  • display = 'None' 大小写错误，应为 'none'
  • trimeContent 在 forEach 内对 content 重新赋值，下一次迭代用错内容导致多关键词高亮错乱；改为对原始子串独立替换
  • 用户输入含正则元字符（如 ( ) *）时 new RegExp 报错，添加转义

4. post.njk 图片属性与链接

  • 文章封面图 <img width="auto" height="auto"> HTML 属性必须为数字，改为省略（由 CSS 控制），并补 loading="lazy" decoding="async"
  • "回到顶部" href="{{ page.link }}#" 在 page.link 未定义时输出 "#"（之前是空字符串拼接 #），改为 "#"

5. foot.njk 仓库链接

"致远" 链接指向已归档的原仓库 hooozen/hexo-theme-tranquility，改为 fork 仓库 zycwer/hexo-theme-tranquility。

6. category.styl .post-title-pined 深色模式不可见

硬编码颜色 rgb(75, 5, 5) 与 border: 1px solid（无颜色），深色模式下不可见；改用 var(--c-accent)。

顺手修复

  • reward.njk / layout.njk 中 <img width="100px"> / <img width="60px"> 等 HTML 属性单位问题（HTML 属性应为纯数字像素值）

📊 验证

  • 构建测试：51 文件正常生成，无警告
  • 所有 JS 文件 node --check 语法通过
  • 生成的 HTML 中验证 toc.js 已正确引入文章页
  • 生成的 CSS 中验证 .post-title-pined 已使用 var(--c-accent)
  • 生成的 HTML 中验证 HeartCurve 脚本括号匹配、addEventListener('change', ...) 已替换
  • 生成的 HTML 中验证页脚链接已指向 fork 仓库

🔗 完整变更

391803b...3531436

Assets 2
Loading