🌈 style: 样式优化

🌈 style: 阅读状态样式优化

🐞 fix: IntersectionObserver 监听失效

🦄 refactor: 修改esc唤起搜索

🌈 style(移动端样式优化):

🌈 style: 样式优化

.editorconfig

@@ -0,0 +1,17 @@
+# 通用配置
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+indent_size = 2
+tab_width = 2
+
+[*.js]
+[*.ts]
+quote_type = single 
+
+[*.less]
+indent_style = space
+indent_size = 4

README.md

@@ -21,6 +21,7 @@ A simple & lightweight theme for Hexo.
   <a title="Hexo Version" target="_blank" href="https://hexo.io/zh-cn/">
     <img src="https://img.shields.io/badge/hexo-6.3.0+-0e83c?logo=hexo" alt="hexo version">
   </a>
+  <img src="https://img.shields.io/badge/v14.x-x?logo=node.js&label=node" alt="node version">
   <img src="https://img.shields.io/github/languages/code-size/MaLuns/hexo-theme-async?logo=Visual Studio Code&logoColor=blue" alt="GitHub code size in bytes">
   <a title="GitHub Discussions" target="_blank" href="https://github.com/MaLuns/hexo-theme-async/discussions">
     <img src="https://img.shields.io/github/discussions/MaLuns/hexo-theme-async?color=9cf&logo=github" alt="GitHub Discussions">

README_zh-CN.md

@@ -21,6 +21,7 @@
   <a title="Hexo Version" target="_blank" href="https://hexo.io/zh-cn/">
     <img src="https://img.shields.io/badge/hexo-6.3.0+-0e83c?logo=hexo" alt="hexo version">
   </a>
+	<img src="https://img.shields.io/badge/v14.x-x?logo=node.js&label=node" alt="node version">
   <img src="https://img.shields.io/github/languages/code-size/MaLuns/hexo-theme-async?logo=Visual Studio Code&logoColor=blue" alt="GitHub code size in bytes">
   <a title="GitHub Discussions" target="_blank" href="https://github.com/MaLuns/hexo-theme-async/discussions">
     <img src="https://img.shields.io/github/discussions/MaLuns/hexo-theme-async?color=9cf&logo=github" alt="GitHub Discussions">

demo/layout/fixed-btn.pug

@@ -38,7 +38,7 @@ div(class="trm-fixed-container")
         ) !{icon(theme.icons.read)}
     if theme.rightside.aside && !page.single_column
         div(
-            class="trm-fixed-btn"
+            class="trm-fixed-btn hidden-md"
             data-title=`${ __('rightside.aside')}`
             onclick="asyncFun.switchSingleColumn()"
         ) !{icon(theme.icons.arrows)}

demo/source/customize_page/index.md

@@ -7,28 +7,28 @@ comments: false
 
 <div class="row">
   <div class="col-lg-3"><!-- counter -->
-    <div class="trm-counter-up trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-counter-up trm-scroll-animation">
       <div class="trm-counter-number"><span class="trm-counter">74</span><span class="trm-counter-symbol">+</span></div>
       <div class="trm-divider trm-mb-20 trm-mt-20"></div>
       <div class="trm-label">Completed projects</div>
     </div>
     <!-- counter end --></div>
   <div class="col-lg-3"><!-- counter -->
-    <div class="trm-counter-up trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-counter-up trm-scroll-animation">
       <div class="trm-counter-number"><span class="trm-counter">50</span><span class="trm-counter-symbol">+</span></div>
       <div class="trm-divider trm-mb-20 trm-mt-20"></div>
       <div class="trm-label">Completed projects</div>
     </div>
     <!-- counter end --></div>
   <div class="col-lg-3"><!-- counter -->
-    <div class="trm-counter-up trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-counter-up trm-scroll-animation">
       <div class="trm-counter-number"><span class="trm-counter">14</span><span class="trm-counter-symbol">+</span></div>
       <div class="trm-divider trm-mb-20 trm-mt-20"></div>
       <div class="trm-label">Honors and Awards</div>
     </div>
     <!-- counter end --></div>
   <div class="col-lg-3"><!-- counter -->
-    <div class="trm-counter-up trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-counter-up trm-scroll-animation">
       <div class="trm-counter-number"><span class="trm-counter">140</span><span class="trm-counter-symbol">+</span></div>
       <div class="trm-divider trm-mb-20 trm-mt-20"></div>
       <div class="trm-label">Honors and Awards</div>
@@ -38,7 +38,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html
-<div class="trm-counter-up trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+<div class="trm-counter-up trm-scroll-animation">
   <div class="trm-counter-number">
     <span class="trm-counter">140</span>
     <span class="trm-counter-symbol">+</span>
@@ -56,7 +56,7 @@ comments: false
   <div class="col-lg-4">
     <!-- portfolio item -->
     <a data-fancybox="portfolio" href="/demosite/img/1.jpg"
-      class="trm-portfolio-item trm-scroll-animation" data-scroll data-scroll-offset="40">
+      class="trm-portfolio-item trm-scroll-animation">
       <div class="trm-cover-frame">
         <img class="trm-cover" src="/demosite/img/1.jpg" alt="item">
       </div>
@@ -70,7 +70,7 @@ comments: false
   <div class="col-lg-4">
     <!-- portfolio item -->
     <a data-fancybox="portfolio" href="/demosite/img/2.jpg"
-      class="trm-portfolio-item trm-scroll-animation" data-scroll data-scroll-offset="40">
+      class="trm-portfolio-item trm-scroll-animation">
       <div class="trm-cover-frame">
         <img class="trm-cover" src="/demosite/img/2.jpg" alt="item">
       </div>
@@ -84,7 +84,7 @@ comments: false
   <div class="col-lg-4">
     <!-- portfolio item -->
     <a data-fancybox="portfolio" href="/demosite/img/3.gif"
-      class="trm-portfolio-item trm-scroll-animation" data-scroll data-scroll-offset="40">
+      class="trm-portfolio-item trm-scroll-animation">
       <div class="trm-cover-frame">
         <img class="trm-cover" src="/demosite/img/3.gif" alt="item">
       </div>
@@ -99,7 +99,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html 这是标题 https://www.imalun.com 地址
-<a data-fancybox="portfolio" href="/demosite/img/1.jpg" class="trm-portfolio-item trm-scroll-animation" data-scroll data-scroll-offset="40">
+<a data-fancybox="portfolio" href="/demosite/img/1.jpg" class="trm-portfolio-item trm-scroll-animation">
   <div class="trm-cover-frame">
     <img class="trm-cover" src="/demosite/img/1.jpg" alt="item">
   </div>
@@ -116,7 +116,7 @@ comments: false
     <h5 class="trm-mb-40 trm-mt-20  trm-title-with-divider">订单卡片 <span data-number="02"></span></h5>
   </div>
   <div class="col-lg-4"><!-- price table -->
-    <div class="trm-price trm-popular trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40"><!-- card header -->
+    <div class="trm-price trm-popular trm-scroll-animation"><!-- card header -->
       <div class="trm-price-header">
         <h6>Hourly Payment</h6>
       </div>
@@ -134,7 +134,7 @@ comments: false
       <!-- price list end --><a href="#trm-order" class="trm-btn">Order now <i class="fas fa-arrow-right"></i></a></div>
     <!-- price table --></div>
    <div class="col-lg-4"><!-- price table -->
-    <div class="trm-price trm-popular trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40"><!-- card header -->
+    <div class="trm-price trm-popular trm-scroll-animation"><!-- card header -->
       <div class="trm-price-header">
         <h6>Hourly Payment</h6>
       </div>
@@ -152,7 +152,7 @@ comments: false
       <!-- price list end --><a href="#trm-order" class="trm-btn">Order now <i class="fas fa-arrow-right"></i></a></div>
     <!-- price table --></div>
   <div class="col-lg-4"><!-- price table -->
-    <div class="trm-price trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40"><!-- card header -->
+    <div class="trm-price trm-scroll-animation"><!-- card header -->
       <div class="trm-price-header">
         <h6>Full Time</h6>
       </div>
@@ -173,7 +173,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html
-<div class="trm-price trm-popular trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+<div class="trm-price trm-popular trm-scroll-animation">
   <!-- card header -->
   <div class="trm-price-header">
     <h6>Hourly Payment</h6>
@@ -201,7 +201,7 @@ comments: false
     <h5 class="trm-mb-40 trm-mt-20 trm-title-with-divider">百分比卡片 <span data-number="03"></span></h5>
   </div>
   <div class="col-lg-8">
-    <div class="trm-skill-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-skill-card trm-scroll-animation">
       <div class="trm-mb-40">
         <div class="trm-skill-header">
           <h6 class="trm-mb-15">Html</h6>
@@ -229,7 +229,7 @@ comments: false
     </div>
   </div>
   <div class="col-lg-4">
-    <div class="trm-skill-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-skill-card trm-scroll-animation">
       <div class="trm-mb-40">
         <div class="trm-skill-header">
           <h6 class="trm-mb-15">jQuery</h6>
@@ -260,7 +260,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html
-<div class="trm-skill-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+<div class="trm-skill-card trm-scroll-animation">
   <div class="trm-mb-40">
     <div class="trm-skill-header">
       <h6 class="trm-mb-15">Html</h6>
@@ -294,7 +294,7 @@ comments: false
     <h5 class="trm-mb-40 trm-mt-20 trm-title-with-divider">文章列表卡片<span data-number="04"></span></h5>
   </div>
   <div class="col-lg-4">
-    <div class="trm-older-publications-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-older-publications-card trm-scroll-animation">
       <div class="trm-older-publication trm-mb-20"><a class="trm-op-top trm-anima-link" href="publication.html"><span class="trm-op-cover"><img src="/demosite/img/1.jpg" alt="cover"></span>
         <h6 class="trm-op-title">Make a resume for yourself today</h6>
         </a>
@@ -328,7 +328,7 @@ comments: false
     </div>
   </div>
   <div class="col-lg-8">
-    <div class="trm-older-publications-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-older-publications-card trm-scroll-animation">
       <div class="trm-older-publication trm-mb-20"><a class="trm-op-top trm-anima-link" href="publication.html"><span class="trm-op-cover"><img src="/demosite/img/1.jpg" alt="cover"></span>
         <h6 class="trm-op-title">Make a resume for yourself today</h6>
         </a>
@@ -365,7 +365,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html
- <div class="trm-older-publications-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+ <div class="trm-older-publications-card trm-scroll-animation">
   <div class="trm-older-publication trm-mb-20">
     <a class="trm-op-top trm-anima-link" href="publication.html">
       <span class="trm-op-cover">
@@ -417,7 +417,7 @@ comments: false
     <h5 class="trm-mb-40 trm-mt-20 trm-title-with-divider">视频卡片<span data-number="05"></span></h5>
   </div>
   <div class="col-lg-12"><!-- video -->
-    <div class="trm-video trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+    <div class="trm-video trm-scroll-animation">
       <div class="trm-video-content trm-overlay"><img src="/demosite/img/3.gif" alt="video-cover">
         <div class="trm-button-puls"></div>
         <a data-fancybox="" href="https://cdn.moji.com/websrc/video/autumn20190924.mp4" class="trm-play-button"><i class="fas fa-play"></i></a></div>
@@ -427,7 +427,7 @@ comments: false
 
 <div class="trm-publication">
 ``` html
-<div class="trm-video trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+<div class="trm-video trm-scroll-animation">
   <div class="trm-video-content trm-overlay">
     <img src="/demosite/img/3.gif" alt="video-cover">
     <div class="trm-button-puls"></div>

docs/demo/index.md

@@ -2,7 +2,7 @@
 
 ![npm (tag)](https://img.shields.io/npm/dm/hexo-theme-async?color=red&label=hexo-theme-async%40latest&logo=npm&style=for-the-badge)
 
-如果你已经使用了本主题，欢迎前往 [Demo Sites | 示例站点 | Discussions](https://github.com/MaLuns/hexo-theme-async/discussions/7) 留下你的站点，我将会将其添加到下方的示例站点中。
+如果您已经使用了本主题，欢迎前往 [Demo Sites | 示例站点 | Discussions](https://github.com/MaLuns/hexo-theme-async/discussions/7) 留下您的站点，我将会将其添加到下方的示例站点中。
 
 ---
 

docs/en/guide/additional-package-support.md

@@ -105,7 +105,7 @@ $E = mc^2$
 ```
 
 ::: tip
-注意，在 Markdown 文件中直接书写时，你需要多一个 `\` 来转译 `\`。（或者使用 `$E=mc^2$` 的方式）
+注意，在 Markdown 文件中直接书写时，您需要多一个 `\` 来转译 `\`。（或者使用 `$E=mc^2$` 的方式）
 
 使用 `\\[ E = mc^2 \\]` 而不是 `\[ E = mc^2 \]`。
 

docs/en/guide/third-party-support.md

@@ -109,7 +109,7 @@ Part I:
 You'll need a `layout/_third-party/comment/twikoo.ejs` file where you'll write the HTML-related code used by the comment plug-in.
 
 ```html
-<div class="trm-card trm-scroll-animation comment-container" data-scroll data-scroll-offset="50">
+<div class="trm-card trm-scroll-animation comment-container">
 	<div id="tcomment"></div>
 </div>
 ```

docs/guide/additional-package-support.md

@@ -43,7 +43,7 @@ sidebar:
 
 ## 置顶
 
-> 确保你的 [hexo-generator-index](https://github.com/hexojs/hexo-generator-index) 为 `2.0.0` 或以上
+> 确保您的 [hexo-generator-index](https://github.com/hexojs/hexo-generator-index) 为 `2.0.0` 或以上
 
 通过设置文章 Front Matter 中 `sticky` 属性以进行置顶，数值 >0 时越高，越靠前，数值 <0 时，越靠后。
 
@@ -63,7 +63,7 @@ sticky: 100
 > 其主要采用 CDN 的方式实现。
 
 - `copy_tex`: 复制 KaTeX 文本，默认开启
-- `global`: 如果你想要在全局页面使用 `KaTeX`，（譬如首页的文章摘要），那么你可以开启它。（当然，这也意味着你的页面每次需要加载更多的资源。）
+- `global`: 如果您想要在全局页面使用 `KaTeX`，（譬如首页的文章摘要），那么您可以开启它。（当然，这也意味着您的页面每次需要加载更多的资源。）
 - `options`: 传入 KaTeX 渲染器的选项。具体选项参考[这里](https://katex.org/docs/options.html)。
 
 ```yaml
@@ -73,8 +73,8 @@ katex:
   options: {}
 ```
 
-只有在使用了 `katex` 的文章或页面才会加载 KaTeX 的库，所以你需要在使用 KaTeX 的文章或头部进行设置。
-（当你开启全局加载时，将不再需要设置此选项。）
+只有在使用了 `katex` 的文章或页面才会加载 KaTeX 的库，所以您需要在使用 KaTeX 的文章或头部进行设置。
+（当您开启全局加载时，将不再需要设置此选项。）
 
 ```yaml {3}
 ---
@@ -85,7 +85,7 @@ katex: true
 
 头部中的 `katex` 类型可以是 `bool | object`，如果是 `object`，那只有 `options` 选项有效果，具体参数与全局设置一样，并且会与全局设置合并与替换。
 
-你可以使用如下方式包裹公式。
+您可以使用如下方式包裹公式。
 
 如下包裹，公式将被居中展示。
 
@@ -102,11 +102,11 @@ $E = mc^2$
 ```
 
 ::: tip
-注意，在 Markdown 文件中直接书写时，你需要多一个 `\` 来转译 `\`。（或者使用 `$E=mc^2$` 的方式）
+注意，在 Markdown 文件中直接书写时，您需要多一个 `\` 来转译 `\`。（或者使用 `$E=mc^2$` 的方式）
 
 使用 `\\[ E = mc^2 \\]` 而不是 `\[ E = mc^2 \]`。
 
-如果你有过多需要转译的字符，你可以直接使用 HTML 标签包裹它（内部的字符将不会被作为 Markdown 解析），而无需使用多个 `\` 来转译。
+如果您有过多需要转译的字符，您可以直接使用 HTML 标签包裹它（内部的字符将不会被作为 Markdown 解析），而无需使用多个 `\` 来转译。
 
 譬如：
 

docs/guide/config.md

@@ -41,7 +41,7 @@ en:
 zh-Hans:
     site:
         title: 本站信息
-# 你也可以扩展其他语言
+# 您也可以扩展其他语言
 ```
 
 如果仅使用中文语言，除 `zh-Hans` 项均可删除。
@@ -424,8 +424,8 @@ footer:
 开启后，将在每篇文章 `post` 末尾显示打赏按钮。
 
 -   `enable`: 开启打赏
--   `comment`: 在打赏按钮下显示你想说的话
--   `url`: 你的打赏链接（当你开启打赏链接时，将自动跳转你的外部链接而不是展开二维码）
+-   `comment`: 在打赏按钮下显示您想说的话
+-   `url`: 您的打赏链接（当您开启打赏链接时，将自动跳转您的外部链接而不是展开二维码）
 -   `methods`: 数组，打赏方式
 
 #### 打赏二维码
@@ -510,7 +510,7 @@ creative_commons:
     clipboard: false
 ```
 
-> 你的 `url` 请在 Hexo 工作目录下的 `_config.yml` 中设置。
+> 您的 `url` 请在 Hexo 工作目录下的 `_config.yml` 中设置。
 > [配置｜ Hexo](https://hexo.io/zh-cn/docs/configuration#%E7%BD%91%E5%9D%80)
 
 ```yaml
@@ -585,7 +585,7 @@ error_img:
 
 -   `enable`: 是否开启
 -   `len`: 需要显示分类数量，默认为 2 个
--   `list`: 如果你需要固定显示分类，可以通过这个字段配置
+-   `list`: 如果您需要固定显示分类，可以通过这个字段配置
 
 ```yaml
 categorie_card:
@@ -740,7 +740,7 @@ icons:
 
 ### `1.2.x` 版本
 
--   新建 `source/_data/style/index.less`，开始编写你的自定义样式了。
+-   新建 `source/_data/style/index.less`，开始编写您的自定义样式了。
 
 ```text {5}
 ┌── blog
@@ -786,7 +786,7 @@ icons:
 
 ### `1.1.x` 版本
 
--   新建 source/_data/style/dark.less、source/_data/style/light.less，开始编写你的自定义样式了。他们分别默认会合并到 `dark`、`light` 两种模式中去。
+-   新建 source/_data/style/dark.less、source/_data/style/light.less，开始编写您的自定义样式了。他们分别默认会合并到 `dark`、`light` 两种模式中去。
 -   如果需要覆盖变量可以添加 source/_data/style/dark.variables.less、source/_data/style/light.variables.less，进行覆盖。
 
 ```text {4,5,6,7,8}
@@ -968,4 +968,4 @@ sw: true
 
 ## 更多配置
 
-你可以直接查看 [\_config.yml ｜ hexo-theme-async](https://github.com/MaLuns/hexo-theme-async/blob/master/packages/hexo-theme-async/_config.yml) 文件及相关注释。
+您可以直接查看 [\_config.yml ｜ hexo-theme-async](https://github.com/MaLuns/hexo-theme-async/blob/master/packages/hexo-theme-async/_config.yml) 文件及相关注释。

docs/guide/faq.md

@@ -38,7 +38,7 @@ root: /
 
 ## 配置项不生效？
 
-你可以参考查看 [\_config.yml ｜ hexo-theme-async](https://github.com/MaLuns/hexo-theme-async/blob/master/packages/hexo-theme-async/_config.yml) 文件及相关注释，确保你配置正确性。
+您可以参考查看 [\_config.yml ｜ hexo-theme-async](https://github.com/MaLuns/hexo-theme-async/blob/master/packages/hexo-theme-async/_config.yml) 文件及相关注释，确保您配置正确性。
 
 -   初始安装后不生效？
 
@@ -53,7 +53,7 @@ root: /
 如图：
 ![示例](/imgs/node.png)
 
-说明您 Node 版本低于 14.x，请升级你的 Node 版本。
+说明您 Node 版本低于 14.x，请升级您的 Node 版本。
 
 ## About 页面不显示？