Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev 1.6.4: Add and fix toc scroll event #307

Merged
merged 24 commits into from
Aug 24, 2021
Merged

Dev 1.6.4: Add and fix toc scroll event #307

merged 24 commits into from
Aug 24, 2021

Conversation

LolipopJ
Copy link
Collaborator

@LolipopJ LolipopJ commented Aug 11, 2021

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

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

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

详细的更新内容如下:

新特性 / Feat

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

变更 / Change

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

修复 / Fix

  1. 修复文章页面 License 处原文链接的中文分词不自动断行的问题
  2. 修复在某些页面下打开 Algolia 搜索时,页面可能显示异常的问题
  3. 在尚未加载完成的情况下,不再错误显示侧边栏打开动画了
  4. 修复文章页面 Toc 随页面滚动高亮显示错误的问题
  5. 修复文章页中,浮动元素可能错误显示的情况([CSS]article 元素增加 overflow:hidden 或overflow: auto #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 失败报错。

Post page float element may be wrongly displayed in some case.
1. Remove fontawsome link in base-head.ejs to reduce package size.
2. Update deps.
3. Update prettier script to fix code lint.
1. Use $base-font-family as default title font-family.
2 Improve mobile exp.
1. In index page, there will be a read more button in each post item which has excerpt or abstract.
2. Hide anchor link in index page's post items. Also limit the max-height of these images.
more:
1. fix dark mode performance
2. fix webpack settings
3. remove background-holder
4. other style fix
@LolipopJ
Copy link
Collaborator Author

非常奇怪,在这个 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
Copy link
Collaborator Author

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

@LolipopJ LolipopJ merged commit 7bc7eea into master Aug 24, 2021
@fi3ework
Copy link
Owner

非常奇怪,在这个 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
Copy link
Collaborator Author

LolipopJ commented Aug 24, 2021

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

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

@LolipopJ LolipopJ deleted the dev-1.6.4 branch August 25, 2021 12:41
Stark-X pushed a commit to Stark-X/hexo-theme-archer that referenced this pull request Apr 1, 2024
🛎️ One-click translation by Google. 中文更新内容见 fi3ework#307 

## Feat

1. Now you can set the avatar on the homepage to be borderless
2. The Hash value of the address bar is automatically modified to the corresponding Toc value as the article page scrolls
3. When the Toc is too long, the Toc directory will [scroll] as the article page scrolls (https://github.com/fi3ework/hexo-theme-archer/projects/1#card-64443923)
4. Add support for floating elements
5. The article with summary content enabled can be configured to display the "read more" button
6. Now you can configure the search function in the Profile bar to check the SEO status of your blog
7. Now the Profile bar can be customized to add more menus or links (fi3ework#308)

## Change

1. The breakpoint on the mobile terminal is changed from `980px` to `960px`
2. When you click the Toc directory of the article page to jump, the banner is forced to be displayed, and space for the banner is reserved
3. The threshold for scrolling up the article page to display the Banner is changed from `500px` to `200px`
4. Part of the theme configuration of `Other` in `_config.yml` is moved to `Theme`.
5. Remove the Anchor button of the title in the homepage summary

## Fix

1. Fix the [Issue](fi3ework#306 (comment)) that the Chinese word segmentation of the original link in the article page License does not automatically break.
2. Fix the problem that the page may display abnormally when opening Algolia search under certain pages
3. When the loading is not completed, the sidebar opening animation is no longer displayed incorrectly
4. Fix the problem that the Toc of the article page scrolls with the page to highlight the error
5. Fix the situation where floating elements may be displayed incorrectly on the article page (fi3ework#309)

## Style

1. Adapt the color of the table in the article in Dark mode
2. Optimize the color configuration of Dark mode
3. Optimize the style of the 404 page
4. Optimize the display of the article page on the mobile terminal
5. Optimize the display of the sidebar on the mobile terminal
6. Optimize the display of the homepage summary and limit the height of the picture
7. Optimize the display effect when switching pages in Dark mode

## Perf

1. Improve browser scrolling performance
2. Optimize page loading performance

## Revert

1. Feature font is no longer used in sidebar article titles
2. Remove the useless Background-holder

## Chore

1. Put the content of the update log in the `CHANGELOG.md file instead of ` README.md`

## Dev

1. Provide `source_version` configuration, one-click to modify the source file version date
2. Add `.editorconfig` file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants