hexo-theme-fluid 1.9.4 → 1.9.5

package/README.md

@@ -106,29 +106,66 @@ layout: about
 - [x] 支持 LaTeX 数学公式
 - [x] 支持 mermaid 流程图
 
-## 支持我们
-
-你可以扫描下方微信赞赏码支持我们的开源创作，让我们可以补贴服务器及域名等日常开销。
-
-<img src="https://github.com/fluid-dev/static/blob/master/hexo-theme-fluid/sponsor.png?s=200&v=4" width="200" alt="微信赞赏码">
+## 鸣谢
 
-同时我们正在**寻求商业赞助**，如果贵司想在本页显著位置展示广告位（每月 6K+ Views 定向流量曝光），或者有其他赞助形式，可将联系方式发送邮件至 zkqiang#126.com (#替换为@)。
+<table>
+  <thead>
+    <tr>
+      <th align="center" style="width: 240px;">
+        <a href="https://flowus.cn/share/eebf2144-8db7-4d68-b31e-bc2c116871de">
+          <img src="https://github-production-user-asset-6210df.s3.amazonaws.com/32983588/243899272-092eeb46-9172-4c10-9e72-53561ff37a00.png" height="200px"><br>
+          <sub>首席赞助商 ORENCEAI</sub><br>
+          <sub>全新的 ChatGPT 人工智能对话平台</sub>
+        </a>
+      </th>
+      <th align="center" style="width: 240px;">
+        <a href="https://www.jetbrains.com/?from=hexo-theme-fluid">
+          <img src="https://raw.githubusercontent.com/fluid-dev/static/690616966f34a58d66aa15ac7b550dd7bbc03967/hexo-theme-fluid/jetbrains.svg" height="200px"><br>
+          <sub>免费开发工具提供方 JetBrains</sub><br>
+          <sub>专注于创建智能开发工具</sub>
+        </a>
+      </th>
+    </tr>
+  </thead>
+</table>
 
 ## 贡献者
 
 [![contributors](https://opencollective.com/hexo-theme-fluid/contributors.svg?width=890&button=false)](https://github.com/fluid-dev/hexo-theme-fluid/graphs/contributors)
 
-英文文档翻译：[@EatRice](https://eatrice.top/) [@橙子杀手](https://ruru.eatrice.top)
+英文文档翻译：[@EatRice](https://eatrice.top/) [@橙子杀手](https://ruru.eatrice.top) [@Sinetian](https://sinetian.github.io/)
 
 其他贡献：[@zhugaoqi](https://github.com/zhugaoqi) [@julydate](https://github.com/julydate)
 
 如你也想贡献代码，可参照[贡献指南](https://hexo.fluid-dev.com/docs/contribute/)
 
-## 鸣谢
+## 支持我们
 
-<a title="鸣谢 JetBrains 免费授权开发工具" href="https://www.jetbrains.com/?from=hexo-theme-fluid" target="_blank">
-  <img src="https://raw.githubusercontent.com/fluid-dev/static/690616966f34a58d66aa15ac7b550dd7bbc03967/hexo-theme-fluid/jetbrains.svg" width="150" alt="JetBrains">
-</a>
+如果你觉得这个项目有帮助，并愿意支持它的发展，可以通过以下方式支持我们的开源创作：
+
+<table>
+  <thead>
+    <tr>
+      <th align="center" style="width: 240px;">
+        <div>
+          <img src="https://github.com/fluid-dev/static/blob/master/hexo-theme-fluid/sponsor.png?s=200&v=4" height="200px" alt="微信赞赏码"><br>
+          <sub>微信赞赏码</sub>
+        </div>
+      </th>
+      <th align="center" style="width: 240px;">
+        <div>
+          <a href="https://etherscan.io/address/0x0021395954710be29c0BFDCB3f98f4D2fa5A1448">
+            <img src="https://avatars.githubusercontent.com/u/6250754?s=200&v=4" height="200px" alt="ERC20 Token">
+          </a>
+          <br>
+          <sub>ERC20 Token: 0x0021395954710<br>be29c0BFDCB3f98f4D2fa5A1448</sub>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</table>
+
+同时我们正在**寻求商业赞助**，如果贵司想在本页显著位置展示广告位（每月 6K+ Views 定向流量曝光），或者有其他赞助形式，可将联系方式发送邮件至 zkqiang#126.com (#替换为@)。
 
 ## Star 趋势
 

package/_config.yml

@@ -252,15 +252,11 @@ web_analytics:  # 网页访问统计
   # See: https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376
   baidu:
 
-  # Google 统计的 Tracking ID
-  # Google analytics, set Tracking ID
-  # See: https://developers.google.com/analytics/devguides/collection/analyticsjs
+  # Google Analytics 4 的媒体资源 ID
+  # Google Analytics 4 MEASUREMENT_ID
+  # See: https://support.google.com/analytics/answer/9744165#zippy=%2Cin-this-article
   google:
-
-  # Google gtag.js 的媒体资源 ID
-  # Google gtag.js GA_MEASUREMENT_ID
-  # See: https://developers.google.com/analytics/devguides/collection/gtagjs/
-  gtag:
+    measurement_id:
 
   # 腾讯统计的 H5 App ID，开启高级功能才有cid
   # Tencent analytics, set APP ID
@@ -727,7 +723,7 @@ post:
     enable: false
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
-    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
+    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
     type: disqus
 
 
@@ -847,7 +843,7 @@ remark42:
   components: ['embed']
 
 # Twikoo
-# 基于腾讯云开发
+# 支持腾讯云、Vercel、Railway 等多种平台部署
 # Based on Tencent CloudBase
 # See: https://twikoo.js.org
 twikoo:
@@ -881,6 +877,15 @@ giscus:
   input-position: top
   lang: zh-CN
 
+# Discuss
+# 多平台、多数据库、自托管、免费开源评论系统
+# Self-hosted, small size, multi-platform, multi-database, free and open source commenting system
+# See: https://discuss.js.org
+discuss:
+  serverURLs:
+  path: window.location.pathname
+
+
 #---------------------------
 # 归档页
 # Archive Page
@@ -1031,7 +1036,7 @@ links:
     enable: false
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
-    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
+    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
     type: disqus
 
 
@@ -1056,13 +1061,13 @@ static_prefix:
 
   github_markdown: https://lib.baomitu.com/github-markdown-css/4.0.0/
 
-  jquery: https://lib.baomitu.com/jquery/3.6.0/
+  jquery: https://lib.baomitu.com/jquery/3.6.4/
 
   bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/
 
   prismjs: https://lib.baomitu.com/prism/1.29.0/
 
-  tocbot: https://lib.baomitu.com/tocbot/4.18.2/
+  tocbot: https://lib.baomitu.com/tocbot/4.20.1/
 
   typed: https://lib.baomitu.com/typed.js/2.0.12/
 
@@ -1082,7 +1087,7 @@ static_prefix:
 
   valine: https://lib.baomitu.com/valine/1.5.1/
 
-  waline: https://lib.baomitu.com/waline/2.14.1/
+  waline: https://cdn.staticfile.org/waline/2.15.5/
 
   gitalk: https://lib.baomitu.com/gitalk/1.8.0/
 
@@ -1090,4 +1095,6 @@ static_prefix:
 
   twikoo: https://lib.baomitu.com/twikoo/1.6.8/
 
+  discuss: https://lib.baomitu.com/discuss/1.2.1/
+
   hint: https://lib.baomitu.com/hint.css/2.7.0/

package/layout/_partials/comments/discuss.ejs

@@ -0,0 +1,17 @@
+<% if (theme.discuss && theme.discuss.serverURLs) { %>
+  <div id="discuss-comments"></div>
+  <script type="text/javascript">
+    Fluid.utils.loadComments('#comments', function() {
+      Fluid.utils.createScript('<%= url_join(theme.static_prefix.discuss, 'discuss.js') %>', function() {
+        var options = Object.assign(
+          <%- JSON.stringify(theme.discuss || {}) %>,
+          { el: '#discuss-comments',
+            path: <%= theme.discuss.path %>
+          }
+        )
+        discuss.init(options)
+      });
+    });
+  </script>
+  <noscript>Please enable JavaScript to view the comments</noscript>
+<% } %>

package/layout/_partials/comments/twikoo.ejs

@@ -9,9 +9,11 @@
             el: '#twikoo',
             path: '<%= theme.twikoo.path %>',
             onCommentLoaded: function() {
-              var imgSelector = '#twikoo .tk-content img:not(.tk-owo-emotion)';
-              Fluid.plugins.imageCaption(imgSelector);
-              Fluid.plugins.fancyBox(imgSelector);
+              Fluid.utils.listenDOMLoaded(function() {
+                var imgSelector = '#twikoo .tk-content img:not(.tk-owo-emotion)';
+                Fluid.plugins.imageCaption(imgSelector);
+                Fluid.plugins.fancyBox(imgSelector);
+              });
             }
           }
         )

package/layout/_partials/plugins/analytics.ejs

@@ -16,28 +16,16 @@
   <% } %>
 
   <% if (theme.web_analytics.google){ %>
-    <!-- Google Analytics -->
+    <!-- Google tag (gtag.js) -->
     <script async>
       if (!Fluid.ctx.dnt) {
-        Fluid.utils.createScript('https://www.google-analytics.com/analytics.js', function() {
-          window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments) };
-          ga.l = +new Date;
-          ga('create', '<%= theme.web_analytics.google %>', 'auto');
-          ga('send', 'pageview');
-        });
-      }
-    </script>
-  <% } %>
-
-  <% if (theme.web_analytics.gtag){ %>
-    <!-- Google gtag.js -->
-    <script async>
-      if (!Fluid.ctx.dnt) {
-        Fluid.utils.createScript('https://www.googletagmanager.com/gtag/js?id=<%= theme.web_analytics.gtag %>', function() {
+        Fluid.utils.createScript("https://www.googletagmanager.com/gtag/js?id=<%= theme.web_analytics.google.measurement_id %>", function() {
           window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
+          function gtag() {
+            dataLayer.push(arguments);
+          }
           gtag('js', new Date());
-          gtag('config', '<%- theme.web_analytics.gtag %>');
+          gtag('config', '<%- theme.web_analytics.google.measurement_id %>');
         });
       }
     </script>

package/layout/_partials/plugins/encrypt.ejs

@@ -1,7 +1,7 @@
 <%
 import_script(`
   <script defer>
-    if (document.getElementById('hbePass')) {
+    if (document.getElementById('hbePass') || document.querySelector('hbe-prefix')) {
       Fluid.utils.waitElementLoaded('hbe-prefix', function() {
         var hbePrefix = document.querySelector('hbe-prefix');
         hbePrefix.parentElement.classList.add('markdown-body');

package/layout/_partials/plugins/mermaid.ejs

@@ -2,10 +2,12 @@
   Fluid.utils.createScript('<%= url_join(theme.static_prefix.mermaid, 'mermaid.min.js') %>', function() {
     mermaid.initialize(<%- JSON.stringify(theme.post.mermaid.options || {}) %>);
 
-    Fluid.events.registerRefreshCallback(function() {
-      if ('mermaid' in window) {
-        mermaid.init();
-      }
+    Fluid.utils.listenDOMLoaded(function() {
+      Fluid.events.registerRefreshCallback(function() {
+        if ('mermaid' in window) {
+          mermaid.init();
+        }
+      });
     });
   });
 </script>

package/layout/_partials/plugins/typed.ejs

@@ -11,7 +11,7 @@
       <% if (is_home() && theme.index.slogan.api && theme.index.slogan.api.enable) { %>
         jQuery.ajax({
           type: '<%= theme.index.slogan.api.method %>',
-          url: '<%= theme.index.slogan.api.url %>',
+          url: '<%- theme.index.slogan.api.url %>',
           headers: <%- JSON.stringify(theme.index.slogan.api.headers || {}) %>,
           dataType: 'json',
           success: function(result) {

package/layout/_partials/post/copyright.ejs

@@ -40,7 +40,7 @@
             <% if (['BY', 'BY-SA', 'BY-ND', 'BY-NC', 'BY-NC-SA', 'BY-NC-ND'].indexOf(license) !== -1) { %>
               <% var items = license.split('-') %>
               <% for (var idx = 0; idx < items.length; idx++) { %>
-                <a target="_blank" href="https://creativecommons.org/licenses/<%= license.toLowerCase() %>/4.0/">
+                <a class="print-no-link" target="_blank" href="https://creativecommons.org/licenses/<%= license.toLowerCase() %>/4.0/">
                   <span class="hint--top hint--rounded" aria-label="<%- __('post.copyright.' + items[idx]) %>">
                     <i class="iconfont icon-<%= items[idx].toLowerCase() %>"></i>
                   </span>

package/layout/_partials/post/meta-bottom.ejs

@@ -9,7 +9,7 @@
     <div class="post-meta">
       <i class="iconfont icon-tags"></i>
       <% page.tags.each(function(tag) { %>
-        <a href="<%= url_for(tag.path) %>">#<%- tag.name %></a>
+        <a href="<%= url_for(tag.path) %>" class="print-no-link">#<%- tag.name %></a>
       <% }) %>
     </div>
   <% } %>

package/layout/index.ejs

@@ -18,14 +18,14 @@ page.banner_mask_alpha = theme.index.banner_mask_alpha
       </div>
     <% } %>
     <article class="col-12 col-md-<%= index_img ? '8' : '12' %> mx-auto index-info">
-      <h1 class="index-header">
+      <h2 class="index-header">
         <% if (theme.index.post_sticky && theme.index.post_sticky.enable && post.sticky > 0) { %>
           <i class="index-pin <%= theme.index.post_sticky && theme.index.post_sticky.icon %>" title="Pin on top"></i>
         <% } %>
         <a href="<%= post_url %>" target="<%- theme.index.post_url_target %>">
           <%= post.title %>
         </a>
-      </h1>
+      </h2>
 
       <% var excerpt = post.description || post.excerpt || (theme.index.auto_excerpt.enable && post.content) %>
       <a class="index-excerpt <%= index_img ? '' : 'index-excerpt__noimg' %>" href="<%= post_url %>" target="<%- theme.index.post_url_target %>">

package/layout/post.ejs

@@ -14,8 +14,7 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
       <div class="container nopadding-x-md" id="board-ctn">
         <div id="board">
           <article class="post-content mx-auto">
-            <!-- SEO header -->
-            <h1 style="display: none"><%= page.subtitle || page.title %></h1>
+            <h1 id="seo-header"><%= page.subtitle || page.title %></h1>
             <% if (theme.post.updated.enable && theme.post.updated && compare_date(page.date, page.updated)) { %>
               <p class="note note-<%= theme.post.updated.note_class || 'info' %>">
                 <% if (theme.post.updated.relative) { %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-fluid",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "An elegant Material-Design theme for Hexo.",
   "main": "package.json",
   "files": [

package/scripts/events/lib/footnote.js

@@ -6,8 +6,10 @@ const { stripHTML } = require('hexo-util');
 module.exports = (hexo) => {
   const config = hexo.theme.config;
   if (config.post.footnote.enable) {
-    hexo.extend.filter.register('before_post_render', function(page) {
-      page.content = renderFootnotes(page.content, page.footnote);
+    hexo.extend.filter.register('before_post_render', (page) => {
+      if (page.footnote !== false) {
+        page.content = renderFootnotes(page.content, page.footnote);
+      }
       return page;
     });
   }
@@ -24,8 +26,17 @@ module.exports = (hexo) => {
     const reFootnoteContent = /\[\^(\d+)]: ?([\S\s]+?)(?=\[\^(?:\d+)]|\n\n|$)/g;
     const reInlineFootnote = /\[\^(\d+)]\((.+?)\)/g;
     const reFootnoteIndex = /\[\^(\d+)]/g;
+    const reCodeBlock = /<pre>[\s\S]*?<\/pre>/g;
+
     let footnotes = [];
     let html = '';
+    let codeBlocks = [];
+
+    // extract code block
+    text = text.replace(reCodeBlock, function(match) {
+      codeBlocks.push(match);
+      return 'CODE_BLOCK_PLACEHOLDER';
+    });
 
     // threat all inline footnotes
     text = text.replace(reInlineFootnote, function(match, index, content) {
@@ -95,6 +106,12 @@ module.exports = (hexo) => {
       text += '<ol>' + html + '</ol>';
       text += '</div></section>';
     }
+
+    // restore code block
+    text = text.replace(/CODE_BLOCK_PLACEHOLDER/g, function() {
+      return codeBlocks.shift();
+    });
+
     return text;
   }
 };

package/scripts/events/lib/highlight.js

@@ -1,7 +1,17 @@
 'use strict';
 
+let css;
+try {
+  css = require('css');
+} catch (error) {
+  if (error.code === 'MODULE_NOT_FOUND') {
+    css = require('@adobe/css-tools');
+  } else {
+    throw error;
+  }
+}
+
 const fs = require('fs');
-const css = require('css');
 const objUtil = require('../../utils/object');
 const resolveModule = require('../../utils/resolve');
 

package/scripts/filters/post-filter.js

@@ -26,10 +26,12 @@ hexo.extend.filter.register('before_generate', function() {
   });
   const hidePosts = allPosts.filter(post => post.hide);
   const normalPosts = allPosts.filter(post => !post.hide);
+  const indexPost = allPosts.filter(post => !post.hide && !post.archive)
 
   this.locals.set('all_posts', allPosts);
   this.locals.set('hide_posts', hidePosts);
   this.locals.set('posts', normalPosts);
+  this.locals.set('index_posts', indexPost);
 });
 
 const original_post_generator = hexo.extend.generator.get('post');

package/scripts/generators/index-generator.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const pagination = require('hexo-pagination');
+
+module.exports = function(locals) {
+  const config = this.config;
+  const posts = locals.index_posts.sort(config.index_generator.order_by);
+
+  posts.data.sort((a, b) => (b.sticky || 0) - (a.sticky || 0));
+
+  const paginationDir = config.pagination_dir || 'page';
+  const path = config.index_generator.path || '';
+
+  return pagination(path, posts, {
+    perPage: config.index_generator.per_page,
+    layout: 'index',
+    format: paginationDir + '/%d/',
+    data: {
+      __index: true
+    }
+  });
+};

package/scripts/generators/local-search.js

@@ -35,7 +35,7 @@ hexo.extend.generator.register('_hexo_generator_search', function(locals) {
 
   const searchConfig = config.search;
   let searchField = searchConfig.field;
-  const content = searchConfig.content || true;
+  const content = searchConfig.content && true;
 
   let posts, pages;
 

package/scripts/generators/pages.js

@@ -50,3 +50,6 @@ hexo.extend.generator.register('_links', function(locals) {
     };
   }
 });
+
+// generate index page
+hexo.extend.generator.register('index', require('./index-generator'));

package/scripts/helpers/export-config.js

@@ -8,23 +8,24 @@ const urlJoin = require('../utils/url-join');
 /**
  * Export theme config to js
  */
-hexo.extend.helper.register('export_config', function() {
+hexo.extend.helper.register('export_config', function () {
   let { config, theme, fluid_version } = this;
   const exportConfig = {
-    hostname     : url.parse(config.url).hostname || config.url,
-    root         : config.root,
-    version      : fluid_version,
-    typing       : theme.fun_features.typing,
-    anchorjs     : theme.fun_features.anchorjs,
-    progressbar  : theme.fun_features.progressbar,
+    hostname: url.parse(config.url).hostname || config.url,
+    root: config.root,
+    version: fluid_version,
+    typing: theme.fun_features.typing,
+    anchorjs: theme.fun_features.anchorjs,
+    progressbar: theme.fun_features.progressbar,
     code_language: theme.code.language,
-    copy_btn     : theme.code.copy_btn,
+    copy_btn: theme.code.copy_btn,
     image_caption: theme.post.image_caption,
-    image_zoom   : theme.post.image_zoom,
-    toc          : theme.post.toc,
-    lazyload     : theme.lazyload,
+    image_zoom: theme.post.image_zoom,
+    toc: theme.post.toc,
+    lazyload: theme.lazyload,
     web_analytics: theme.web_analytics,
-    search_path  : urlJoin(config.root, theme.search.path)
+    search_path: urlJoin(config.root, theme.search.path),
+    include_content_in_search: theme.search.content,
   };
   return `<script id="fluid-configs">
     var Fluid = window.Fluid || {};

package/scripts/tags/note.js

@@ -3,8 +3,8 @@
 'use strict';
 
 const note = (args, content) => {
-  if (!args || !args[0]) {
-    args = ['default'];
+  if (!args || !args[0] || args[0].toLowerCase() === "default") {
+    args = [ hexo.theme.config.post.updated.note_class || "info"];
   }
   return `<div class="note note-${args.join(' ')}">
             ${hexo.render.renderSync({ text: content, engine: 'markdown' }).split('\n').join('')}

package/source/css/_pages/_base/color-schema.styl

@@ -59,12 +59,13 @@ dark-colors()
     transition background-color .2s ease-in-out
 
 if (hexo-config("dark_mode.enable"))
-  @media (prefers-color-scheme: dark)
+  @media not print and (prefers-color-scheme: dark)
     :root
       --color-mode "dark"
 
     :root:not([data-user-color-scheme])
       dark-colors()
 
-  [data-user-color-scheme="dark"]
-    dark-colors()
+  @media not print
+    [data-user-color-scheme="dark"]
+      dark-colors()

package/source/css/_pages/_base/print.styl

@@ -0,0 +1,38 @@
+@media print
+  header, footer, .side-col, #scroll-top-button, .post-prevnext, #comments
+    display none !important
+
+  .markdown-body
+    a:not([href^='#']):not([href^='javascript:']):not(.print-no-link)::after
+      content ' (' attr(href) ')'
+      font-size 0.8rem
+      color var(--post-text-color)
+      opacity 0.8
+
+    & > h1, h2
+      border-bottom-color transparent !important
+
+    & > h1, h2, h3, h4, h5, h6
+      margin-top 1.25em !important
+      margin-bottom 0.25em !important
+
+    [data-anchorjs-icon]::after
+      display none
+
+    figure.highlight
+      table, tbody, tr, td.code, td.code pre
+        width 100% !important
+        display block !important
+
+      pre > code
+        white-space pre-wrap
+
+      .gutter, .code-widget
+        display none !important
+
+  .post-metas a
+    text-decoration none
+
+@media not print
+  #seo-header
+    display none

package/source/css/_pages/_post/post-page.styl

@@ -125,6 +125,16 @@
     -webkit-transform translateX(0)
     transform translateX(0)
 
+#seo-header
+  color var(--post-heading-color)
+  font-weight bold
+  margin-top 0.5em
+  margin-bottom 0.75em
+  border-bottom-color var(--line-color)
+  border-bottom-style solid
+  border-bottom-width 2px
+  line-height 1.5
+
 .custom, #comments
   margin-top 2rem
 

package/source/js/local-search.js

@@ -62,9 +62,11 @@
             var index_title = -1;
             var index_content = -1;
             var first_occur = -1;
-            // only match articles with not empty contents
-            if (data_content !== '') {
-              keywords.forEach(function(keyword, i) {
+            // Skip matching when content is included in search and content is empty
+            if (CONFIG.include_content_in_search && data_content === '') {
+              isMatch = false;
+            } else {
+              keywords.forEach(function (keyword, i) {
                 index_title = data_title.indexOf(keyword);
                 index_content = data_content.indexOf(keyword);
 
@@ -77,11 +79,8 @@
                   if (i === 0) {
                     first_occur = index_content;
                   }
-                  //content_index.push({index_content:index_content, keyword_len:keyword_len});
                 }
               });
-            } else {
-              isMatch = false;
             }
             // 0x05. show search results
             if (isMatch) {

package/source/js/utils.js

@@ -15,6 +15,16 @@ Fluid.utils = {
     window.removeEventListener('scroll', callback);
   },
 
+  listenDOMLoaded(callback) {
+    if (document.readyState !== 'loading') {
+      callback();
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        callback();
+      });
+    }
+  },
+
   scrollToElement: function(target, offset) {
     var of = jQuery(target).offset();
     if (of) {
@@ -28,10 +38,11 @@ Fluid.utils = {
   elementVisible: function(element, offsetFactor) {
     offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0;
     var rect = element.getBoundingClientRect();
-    var height = window.innerHeight || document.documentElement.clientHeight;
-    var top = rect.top;
-    return (top >= 0 && top <= height * (offsetFactor + 1))
-      || (top <= 0 && top >= -(height * offsetFactor) - rect.height);
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    return (
+      (rect.top >= 0 && rect.top <= viewportHeight * (1 + offsetFactor) + rect.height / 2) ||
+      (rect.bottom >= 0 && rect.bottom <= viewportHeight * (1 + offsetFactor) + rect.height / 2)
+    );
   },
 
   waitElementVisible: function(selectorOrElement, callback, offsetFactor) {
@@ -45,29 +56,31 @@ Fluid.utils = {
     offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0;
 
     function waitInViewport(element) {
-      if (Fluid.utils.elementVisible(element, offsetFactor)) {
-        callback();
-        return;
-      }
-      if ('IntersectionObserver' in window) {
-        var io = new IntersectionObserver(function(entries, ob) {
-          if (entries[0].isIntersecting) {
-            callback();
-            ob.disconnect();
-          }
-        }, {
-          threshold : [0],
-          rootMargin: (window.innerHeight || document.documentElement.clientHeight) * offsetFactor + 'px'
-        });
-        io.observe(element);
-      } else {
-        var wrapper = Fluid.utils.listenScroll(function() {
-          if (Fluid.utils.elementVisible(element, offsetFactor)) {
-            Fluid.utils.unlistenScroll(wrapper);
-            callback();
-          }
-        });
-      }
+      Fluid.utils.listenDOMLoaded(function() {
+        if (Fluid.utils.elementVisible(element, offsetFactor)) {
+          callback();
+          return;
+        }
+        if ('IntersectionObserver' in window) {
+          var io = new IntersectionObserver(function(entries, ob) {
+            if (entries[0].isIntersecting) {
+              callback();
+              ob.disconnect();
+            }
+          }, {
+            threshold : [0],
+            rootMargin: (window.innerHeight || document.documentElement.clientHeight) * offsetFactor + 'px'
+          });
+          io.observe(element);
+        } else {
+          var wrapper = Fluid.utils.listenScroll(function() {
+            if (Fluid.utils.elementVisible(element, offsetFactor)) {
+              Fluid.utils.unlistenScroll(wrapper);
+              callback();
+            }
+          });
+        }
+      });
     }
 
     if (typeof selectorOrElement === 'string') {
@@ -97,7 +110,7 @@ Fluid.utils = {
       });
       mo.observe(document, { childList: true, subtree: true });
     } else {
-      document.addEventListener('DOMContentLoaded', function() {
+      Fluid.utils.listenDOMLoaded(function() {
         var waitLoop = function() {
           var ele = document.querySelector(selector);
           if (ele) {
@@ -141,8 +154,8 @@ Fluid.utils = {
     l.setAttribute('type', 'text/css');
     l.setAttribute('href', url);
     var e = document.getElementsByTagName('link')[0]
-    || document.getElementsByTagName('head')[0]
-    || document.head || document.documentElement;
+      || document.getElementsByTagName('head')[0]
+      || document.head || document.documentElement;
     e.parentNode.insertBefore(l, e);
   },
 
@@ -186,7 +199,7 @@ Fluid.utils = {
       }
     };
     setTimeout(next, interval);
-  },
+  }
 
 };
 
@@ -199,6 +212,7 @@ function Debouncer(callback) {
   this.callback = callback;
   this.ticking = false;
 }
+
 Debouncer.prototype = {
   constructor: Debouncer,