Dev 1.6.3: add support to Dark Mode, Mathjax and Mermaid #305
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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`
Thanks to #268 Here I modify MathJax support doc for better performance. Also fix polyfill support of Algolia and MathJax.
1. Choose white color for content in dark mode, instead of dark-gold color 2. Optimize color settings
Fix some css.
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.
1. Add more options to outdated threshold. 2. Fix catalog background color.
1. Unify note and block quote style. 2. Improve the mobile experience. 3. Other fix.
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.
fi3ework
approved these changes
Jul 25, 2021
…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.
Style: 1. Fix footer style sheet. 2. Make toc slower to come back when close sidebar. Feat: 1. Hide toc in specified post. (#244)
Stark-X
pushed a commit
to Stark-X/hexo-theme-archer
that referenced
this pull request
Apr 1, 2024
🛎️ 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)
allmoviestvshowslistsfilmography015
referenced
this pull request
in allmoviestvshowslistsfilmography015/hexo-theme-archer
Aug 29, 2024
🛎️ One-click translation by Google. [中文更新内容](https://github.com/fi3ework/hexo-theme-archer/pull/305)。 ## Merge PR Merged #268 and #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 (#266). - Added **Mermaid chart** support (#186). - Add support for the personal information `sticky` of the homepage to scroll with the page (#202). -Now you can set the category information of the corresponding article to be displayed on the homepage and article page (#188). - It is now possible to hide the catalog of specific articles (#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 (#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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
合并 PR
合并了 #268 和 #300.
新特性
关于模式切换按钮，考虑到用户使用后再使用的可能性较低，所以和回到首页的链接放在一起，并在滚动后消失。未来可以将同样较少使用的搜索按钮或其它有帮助的东西放到这里。
sticky随页面滚动的支持（我想问下画面滚动的时候，左侧栏可以停留在那吗 #202）。变更
padding间距。优化
outdated_threshold文章时效性添加更多配置内容。并使其样式表设计与文章的引用块部分保持统一。comments属性支持，设置为false时将不在该文章显示评论插件。sticky属性时，同样会显示置顶的图标。修复
其它
layout目录下的所有.ejs文件代码格式和缩进。const代替脚本文件中不必要的let，让代码看上去更 clever。cdn.jsdelivr.net。已知问题
在 Dark 模式下，切换或刷新页面时，由于重新加载
layout.ejs文件，会导致 <div class="contain" /> 这个组件出现短暂的白屏。预期情况是，在 Dark 模式下，在加载前就设置其背景色为暗色（如 #121212）