search

fi3ework / hexo-theme-archer

🎯 A smart and modern theme for Hexo.
https://fi3ework.github.io/hexo-theme-archer
MIT License
1.49k stars 274 forks source link

Dev 1.6.4: Add and fix toc scroll event #307

Closed LolipopJ closed 2 years ago

LolipopJ commented 2 years ago

这个版本添加了几个新的配置项，并且修复了已知的可能影响体验的问题。

例如，修复了之前版本（#305）中由于提前渲染 Toc 导致的标题 OffsetTop 值偏差的问题。这个问题由当 Loading 组件尚未移除时，就计算了标题 Y 轴方向绝对值引起。

又如，在默认情况下，点击文章页面 Toc 目录的内容向上跳转时，可能会出现 Banner 遮挡文本内容。从这个版本开始，通过 Toc 目录跳转时，将预留出这一部分的空间，避免遮挡文本内容。

详细的更新内容如下：

新特性 / Feat

  1. 现在可以设置主页的 Avatar 头像无边框了
  2. 地址栏 Hash 值随文章页面滚动自动修改为对应的 Toc 值
  3. 当 Toc 过长时，Toc 目录随文章页面滚动而滚动
  4. 添加对浮动元素的支持
  5. 启用摘要内容的文章可以配置显示“阅读更多”按钮
  6. 现在 Profile 栏可配置搜索功能，查看自己博客的 SEO 状态
  7. 现在 Profile 栏可以自定义添加更多菜单或链接（[#308])

变更 / Change

  1. 移动端的断点由 980px 修改为 960px
  2. 点击文章页面 Toc 目录跳转时，强制显示 Banner，并预留出 Banner 的空间
  3. 文章页面向上滚动显示 Banner 的阈值由 500px 修改为 200px
  4. _config.yml 中 Other 的部分主题配置移动到 Theme 下。
  5. 移除主页摘要中标题的 Anchor 按钮

修复 / Fix

  1. 修复文章页面 License 处原文链接的中文分词不自动断行的问题
  2. 修复在某些页面下打开 Algolia 搜索时，页面可能显示异常的问题
  3. 在尚未加载完成的情况下，不再错误显示侧边栏打开动画了
  4. 修复文章页面 Toc 随页面滚动高亮显示错误的问题
  5. 修复文章页中，浮动元素可能错误显示的情况（#309）

样式 / Style

  1. 适配 Dark 模式下文章中表格的颜色
  2. 优化 Dark 模式颜色配置
  3. 优化 404 页面的样式
  4. 优化文章页在移动端的显示
  5. 优化侧边栏在移动端的显示
  6. 优化主页摘要的显示，限制图片的高度
  7. 优化 Dark 模式切换页面时的显示效果

性能 / Perf

  1. 提高浏览器滚动性能
  2. 优化页面加载性能

回滚 / Revert

  1. 侧边栏文章标题不再使用 Feature 字体
  2. 移除没有用的 Background-holder

其它 / Chore

  1. 将更新日志内容放到 CHANGELOG.md 文件下，而不是 README.md

开发者 / Dev

  1. 提供 source_version 配置，一键修改源文件版本日期
  2. 添加 .editorconfig 文件

实验性配置 / Experimental Options

现在用户可以自定义引入页面首选字体了。将覆盖 Base 字体配置，而不会覆盖 Feature 字体。

由于此特性基于 CSS Variables，不兼容 IE 和部分常见的浏览器，因此作为实验性配置使用。

已知问题 / Known Issues

由于采用了特殊的地址栏 Hash 来避免 window.location.hash 赋值时自动跳转到页面对应位置的默认行为，并通过如下代码在链接访问时读取当前页面 Hash 值跳转：

// src/js/init.js 
const currentHash = window.location.hash
window.location.hash = archerUtil.getWindowHash()
window.location.hash = currentHash

在识别前，浏览器可能会首先获取 http://someurl/undefined，并返回 Get 失败报错。

LolipopJ commented 2 years ago

非常奇怪，在这个 Github Action 里我提交的代码在 Build 步骤出现了错误。

ERROR {
  err: SyntaxError: Unexpected token '.' in /home/runner/work/LolipopJ.github.io/LolipopJ.github.io/themes/archer/layout/_partial/experimental-options.ejs while compiling ejs

  If the above error is not helpful, you may want to try EJS-Lint:
  https://github.com/RyanZim/EJS-Lint
  Or, if you meant to create an async function, pass async: true as an option.
...

把构建的 Node.js 版本从 12.x 切换到 14.x，就能够构建成功了。

考虑到代码新增的是无关紧要的功能，我将暂时注释掉此部分内容。

LolipopJ commented 2 years ago

@fi3ework 我觉得现在应该没有什么问题了，博客主题在我的主页运行得很好。我将合并此 PR 到 master 分支，如果之后出现任何的问题，just revert the submit. 🗃

fi3ework commented 2 years ago

非常奇怪，在这个 Github Action 里我提交的代码在 Build 步骤出现了错误。

ERROR {
  err: SyntaxError: Unexpected token '.' in /home/runner/work/LolipopJ.github.io/LolipopJ.github.io/themes/archer/layout/_partial/experimental-options.ejs while compiling ejs

  If the above error is not helpful, you may want to try EJS-Lint:
  https://github.com/RyanZim/EJS-Lint
  Or, if you meant to create an async function, pass async: true as an option.
...

把构建的 Node.js 版本从 12.x 切换到 14.x，就能够构建成功了。

考虑到代码新增的是无关紧要的功能，我将暂时注释掉此部分内容。

是不是用了 optional chaining 的语法（没找到代码纯瞎猜的）😅

LolipopJ commented 2 years ago

是不是用了 optional chaining 的语法（没找到代码纯瞎猜的）😅

Absolutely right. 查了查 node 13 及以下不兼容，还是不在 ejs 代码里写了。🤯