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.

Sign up for GitHub

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

Jump to bottom

Dev 1.6.3: add support to Dark Mode, Mathjax and Mermaid #305

Merged
merged 25 commits into from
Jul 28, 2021
Merged

Dev 1.6.3: add support to Dark Mode, Mathjax and Mermaid #305

merged 25 commits into from
Jul 28, 2021

Conversation

LolipopJ
Copy link
Collaborator

@LolipopJ LolipopJ commented Jul 24, 2021 •
edited
Loading

合并 PR

合并了 #268 和 #300.

新特性

变更

  • 适配 Dark 模式，调整了文本的 padding 间距。
  • 对于移动端，当滚动到页面顶部部分时，为 <header /> 部分添加暗色背景。有助于避免按钮被页面标题信息所干扰。
  • 页面滚动切换临界点选择为头图和 <container /> 交界处。

优化

  • 为浮动按钮添加渐入渐出的动画效果。
  • 为 outdated_threshold 文章时效性添加更多配置内容。并使其样式表设计与文章的引用块部分保持统一。
  • 为文章添加对 Hexo 的 comments 属性支持，设置为 false 时将不在该文章显示评论插件。
  • 设置文章 sticky 属性时，同样会显示置顶的图标。
  • 文章页的 Toc 将更快就绪。
  • 优化 Babel 与 Eslint 的配置。

修复

  • 启用 Algolia 时，在页面尚未加载好时，不再显示未经处理的图标内容。
  • 打开 Algolia 搜索界面时，阻止页面滚动行为。
  • 修复包括 Steam 图标在内的 social icon 对齐（「反馈 Bug」steam图标偏上 #301）。

其它

  • 修复了 layout 目录下的所有 .ejs 文件代码格式和缩进。
  • 使用 const 代替脚本文件中不必要的 let，让代码看上去更 clever。
  • 统一绝大部分 CDN 链接为 cdn.jsdelivr.net。
  • 更新包括 jQuery 在内的第三方依赖包，修复兼容问题；移除不必要或已弃用的依赖。
  • 更新仓库的文档和二次开发文档。

已知问题

在 Dark 模式下，切换或刷新页面时，由于重新加载 layout.ejs 文件，会导致 <div class="contain" /> 这个组件出现短暂的白屏。预期情况是，在 Dark 模式下，在加载前就设置其背景色为暗色（如 #121212）

vsxd and others added 19 commits April 30, 2020 19:54
@vsxd
supported mathjax
abdb37c
@vsxd
updated README
953319f
fix bug: Uncaught ReferenceError: process is not defined
e638323
enhance: add dark mode feature
e16f0fb
enhancement: add dark mode feature.
3cc07c1
enhancement: support mermaid diagram
bb2e857
@LolipopJ
Merge branch 'pr/300' into dev-1.6.3
3147f89
@LolipopJ
chore: fix code style & udpate deps version & update docs
8c242d6 
1. Fix code style: fix .ejs files' code style, as a must be done thing.
2. Update deps version: update jquery, fancybox, instantsearch.js and so on.
3. Update docs: there are so many issues (like #168, #231) caused by installing instruction, so I just update related docs.
4. One more thing: unify the majority of CDN links to `cdn.jsdelivr.net`
@LolipopJ
docs: update README.md
350e631
@LolipopJ
Merge branch 'pr/268' into dev-1.6.3
1e899d0
@LolipopJ
feat(MathJax): add MathJax support
6edd6d9 
Thanks to #268

Here I modify MathJax support doc for better performance.

Also fix polyfill support of Algolia and MathJax.
@LolipopJ
style(dark): udpate dark mode default settings
7eb1dda 
1. Choose white color for content in dark mode, instead of dark-gold color
2. Optimize color settings
@LolipopJ
style(float button): add transition animation to float buttons
76bcf2c
@LolipopJ
feat(profile): now profile can be sticky
0b8fa73 
#202
@LolipopJ
chore(style): unify scss variables
f4f261b 
Fix some css.
@LolipopJ
docs: update develop guide (zh)
306d120
@LolipopJ
docs: update README.md
fe28068
@LolipopJ
docs: update README.md
e5dbc22
@LolipopJ
feat(dark mode): add full support to dark mode
9fb83b0 
1. Add theme mode switch button to header.
2. Update style.
3. Update deps.

Unsolved issue:
After switching to a new page, there will be a short white screen at the container element.
@LolipopJ LolipopJ requested review from fi3ework, Stark-X and removeif and removed request for Stark-X July 24, 2021 11:51
@LolipopJ LolipopJ self-assigned this Jul 24, 2021
@LolipopJ
chore: subcontract the dark style code & fix some issues
5d96ca4 
1. Add more options to outdated threshold.
2. Fix catalog background color.
@LolipopJ LolipopJ requested a review from Stark-X July 24, 2021 15:24
LolipopJ added 3 commits July 25, 2021 00:24
@LolipopJ
style: update and fix style settings
7794575 
1. Unify note and block quote style.
2. Improve the mobile experience.
3. Other fix.
@LolipopJ
style: improve mobile experience
cf7a796
@LolipopJ
feat(category tag): add support to category tag in index and post page
17ee2b3 
Feat:
1. Now category tag can be displayed in index and post page.
2. Set `comments: false` to disable comment in specified post.
3. Set `sticky: ${num}` to show top article in index page.

Change:
1. Scroll switch point is selected between the top image and the container.

Fix:
1. Fix suddenly disappear of sidebar, caused by quick click on open menu button.
2. Fix known style sheet issues.

Chore:
1. Use `const` to make JavaScript code more clever.
2. Improve mobile experience.
3. Update docs.
LolipopJ added 2 commits July 28, 2021 17:17
@LolipopJ
fix(algolia, babel, toc, eslint) & chore(deps, code lint) & style(dar…
3e0e968 
…k, social)

Fix:
1. Make babel and eslint work better.
2. No longer show Algolia elements when site not ready.
3. Prevent body from scrolling when open algolia search.
4. Init toc before site fully loaded.

Chore:
1. Update and remove useless deps.
2. More `const` !

Style:
1. Improve algolia dark mode style sheet.
2. Fix social icon align (#301).
3. Add background color for article in light mode.
4. Improve social display in mobile mode.
@LolipopJ
style(footer, toc) & feat(toc)
8847574 
Style:
1. Fix footer style sheet.
2. Make toc slower to come back when close sidebar.

Feat:
1. Hide toc in specified post. (#244)
@LolipopJ LolipopJ merged commit e43746b into master Jul 28, 2021
@LolipopJ LolipopJ deleted the dev-1.6.3 branch July 29, 2021 04:31
@LolipopJ LolipopJ mentioned this pull request Aug 11, 2021
Merged
Stark-X pushed a commit to Stark-X/hexo-theme-archer that referenced this pull request Apr 1, 2024
@LolipopJ
Merge pull request fi3ework#305 from fi3ework/dev-1.6.3
8c98574 
🛎️ One-click translation by Google. [中文更新内容](https://github.com/fi3ework/hexo-theme-archer/pull/305)。

## Merge PR

Merged fi3ework#268 and fi3ework#300.

## Feature

- Added **Dark mode** support, and can be switched by the button at \<header \/\>.
  Regarding the mode switch button, considering that the user is less likely to use it after use, it is put together with the link back to the home page and disappears after scrolling. In the future, you can put the same less frequently used search button or other helpful things here.
- Add **MathJax mathematical formula** support, and update related documents (fi3ework#266).
- Added **Mermaid chart** support (fi3ework#186).
- Add support for the personal information `sticky` of the homepage to scroll with the page (fi3ework#202).
-Now you can set the category information of the corresponding article to be displayed on the homepage and article page (fi3ework#188).
- It is now possible to hide the catalog of specific articles (fi3ework#244).

## Change

- Adapt to Dark mode, adjust the spacing of text `padding`.
- For mobile, when scrolling to the top part of the page, add a dark background to the \<header \/\> part. Helps to avoid buttons being disturbed by page title information.
- The critical point of page scroll switching is selected as the junction of the header image and \<container \/\>.

## Optimization

- Add a fade-in and fade-out animation effect to the floating button.
- Add more configuration content for the timeliness of `outdated_threshold` articles. And keep the style sheet design consistent with the quote block part of the article.
- Add support for Hexo's `comments` property to the article. When set to `false`, the comment plugin will not be displayed for the article.
- When setting the post `sticky` property, the sticky icon will also be displayed.
- The Toc of the article page will be ready sooner.
- Optimize the configuration of Babel and Eslint.

## Fix

- When Algolia is enabled, the unprocessed icon content will no longer be displayed when the page has not been loaded.
- When opening the Algolia search interface, prevent page scrolling.
- Fix the alignment of social icon including Steam icon (fi3ework#301).

## Chore

- Fixed the code format and indentation of all `.ejs` files in the `layout` directory.
- Use `const` instead of unnecessary `let` in the script file to make the code look more clever.
- Unify most of the CDN links as `cdn.jsdelivr.net`.
- Update third-party dependency packages including jQuery to fix compatibility issues; remove unnecessary or deprecated dependencies.
- Update the warehouse documentation and secondary development documentation.

## Known issues

In dark mode, when switching or refreshing the page, due to the reload of the `layout.ejs` file, the component \<div class="contain" \/\> will cause a short white screen. The expected situation is that in Dark mode, set its background color to dark before loading (such as \#121212)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fi3ework fi3ework fi3ework approved these changes

@removeif removeif Awaiting requested review from removeif

@Stark-X Stark-X Awaiting requested review from Stark-X

Assignees

@LolipopJ LolipopJ

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@LolipopJ @fi3ework @vsxd