fix(#781): content_visibility: false

_config.yml

@@ -61,6 +61,10 @@ cdn_version: false
 # https://github.com/volantis-x/volantis-static
 volantis_static_cdn: https://unpkg.com/[email protected]/
 ########################################################################
+#  https://web.dev/content-visibility/
+#  https://www.caniuse.com/?search=content-visibility
+content_visibility: false
+
 # 全局页面字符串替换  A => B (可用于临时修改错字等)
 replace:
   - https://cdn.jsdelivr.net/npm/ => https://unpkg.com/

layout/_partial/scripts/index.ejs

@@ -136,7 +136,9 @@
 
 <%- partial('toc') %>
 
-<%- partial('content-visibility-scroll-fix') %>
+<% if (theme.content_visibility) { %>
+  <%- partial('content-visibility-scroll-fix') %>
+<% } %>
 
 <%- partial('../../_plugins/slow-network/script') %>
 

scripts/filters/content-visibility.js

@@ -2,24 +2,26 @@
 // https://www.caniuse.com/?search=content-visibility
 // 在文章内容渲染时将每两个 <h2> 之间的内容分为一块 用 <div class="post-story"></div> 包裹起来。然后为 .post-story 声明 content-visibility: auto
 hexo.extend.filter.register('after_post_render', function (data) {
-  let dataList = data.content.split('\n')
-  let mydata = ``
-  let flag = 1
-  dataList.forEach(e => {
-    let yy = e.replace(/<h2.*?>.*?<\/h2>/, function (str) {
-      if (flag) {
-        flag = 0
-        return `<div class="story post-story">` + str
-      } else {
-        return `</div><div class="story post-story">` + str
-      }
-    })
-    mydata += yy
-    mydata += "\n"
-  });
-  if (!flag) {
-    mydata += `</div>`
+  if (this.theme.config.content_visibility) {
+    let dataList = data.content.split('\n')
+    let mydata = ``
+    let flag = 1
+    dataList.forEach(e => {
+      let yy = e.replace(/<h2.*?>.*?<\/h2>/, function (str) {
+        if (flag) {
+          flag = 0
+          return `<div class="story post-story">` + str
+        } else {
+          return `</div><div class="story post-story">` + str
+        }
+      })
+      mydata += yy
+      mydata += "\n"
+    });
+    if (!flag) {
+      mydata += `</div>`
+    }
+    data.content = mydata
   }
-  data.content = mydata
   return data;
 });

source/css/first.styl

@@ -1,17 +1,19 @@
 #safearea {
   display: none
 }
-// https://web.dev/content-visibility/
-// https://www.caniuse.com/?search=content-visibility
-/*
-  * Workaround for Chrome bug, part 1
-  * Chunk rendering for all but the first article.
-  * /layout/_partial/scripts/content-visibility-scroll-fix.ejs
-*/
-.post-story + .post-story{
-  content-visibility: auto;
-  contain-intrinsic-size: 10px 500px;
-}
+
+if hexo-config('content_visibility')
+  // https://web.dev/content-visibility/
+  // https://www.caniuse.com/?search=content-visibility
+  /*
+    * Workaround for Chrome bug, part 1
+    * Chunk rendering for all but the first article.
+    * /layout/_partial/scripts/content-visibility-scroll-fix.ejs
+  */
+  .post-story + .post-story{
+    content-visibility: auto;
+    contain-intrinsic-size: 10px 500px;
+  }
 
 @import '_defines/*'