valine 按需加载

_config.yml

@@ -30,7 +30,7 @@ sidebar:
     # Recent update
     recent:
       layout: recent
-      rss: /atom.xml # npm i hexo-generator-feed
+      rss: # /atom.xml # npm i hexo-generator-feed
       limit: 5 # Count of posts
     # TOC (valid only in layout:post/wiki)
     toc:

layout/_partial/plugins/comments/valine/script.ejs

@@ -1,5 +1,5 @@
-<%- js(theme.comments.valine.js) %>
 <script>
+  function getEmojiMaps() {
     function emoji(path, idx, ext) {
       return path + "/" + path + "-" + idx + "." + ext;
     }
@@ -19,8 +19,11 @@
     for (var i = 1; i <= 4; i++) {
       emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
     }
+    return emojiMaps;
+  }
   function load_comment(){
     if(!document.getElementById("valine_container"))return;
+    stellar.loadScript('<%- theme.comments.valine.js %>', {defer:true}).then(function () {
       const el = document.getElementById("valine_container");
       var path = el.getAttribute('comment_id');
       const placeholder = "<%= theme.comments.valine.placeholder %>";
@@ -33,9 +36,13 @@
         path: path,
         placeholder: placeholder,
         emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
-      emojiMaps: emojiMaps,
+        emojiMaps: getEmojiMaps(),
       }));
-
+    });
   }
+  window.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
     load_comment();
+  });
+
 </script>

layout/_partial/scripts/index.ejs

@@ -1,5 +1,95 @@
 <script type="text/javascript">
-  stellar = {};
+  stellar = {
+    // 懒加载 css https://github.com/filamentgroup/loadCSS
+    loadCSS: (href, before, media, attributes) => {
+      var doc = window.document;
+      var ss = doc.createElement("link");
+      var ref;
+      if (before) {
+        ref = before;
+      } else {
+        var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
+        ref = refs[refs.length - 1];
+      }
+      var sheets = doc.styleSheets;
+      if (attributes) {
+        for (var attributeName in attributes) {
+          if (attributes.hasOwnProperty(attributeName)) {
+            ss.setAttribute(attributeName, attributes[attributeName]);
+          }
+        }
+      }
+      ss.rel = "stylesheet";
+      ss.href = href;
+      ss.media = "only x";
+      function ready(cb) {
+        if (doc.body) {
+          return cb();
+        }
+        setTimeout(function () {
+          ready(cb);
+        });
+      }
+      ready(function () {
+        ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
+      });
+      var onloadcssdefined = function (cb) {
+        var resolvedHref = ss.href;
+        var i = sheets.length;
+        while (i--) {
+          if (sheets[i].href === resolvedHref) {
+            return cb();
+          }
+        }
+        setTimeout(function () {
+          onloadcssdefined(cb);
+        });
+      };
+      function loadCB() {
+        if (ss.addEventListener) {
+          ss.removeEventListener("load", loadCB);
+        }
+        ss.media = media || "all";
+      }
+      if (ss.addEventListener) {
+        ss.addEventListener("load", loadCB);
+      }
+      ss.onloadcssdefined = onloadcssdefined;
+      onloadcssdefined(loadCB);
+      return ss;
+    },
+
+    // 从 butterfly 和 volantis 获得灵感
+    loadScript: (src, opt) => new Promise((resolve, reject) => {
+      var script = document.createElement('script')
+      script.src = src
+      if (opt) {
+        for (let key of Object.keys(opt)) {
+          script[key] = opt[key]
+        }
+      } else {
+        // 默认异步，如果需要同步，第二个参数传入 {} 即可
+        script.async = true
+      }
+      script.onerror = reject
+      script.onload = script.onreadystatechange = function() {
+        const loadState = this.readyState
+        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
+        script.onload = script.onreadystatechange = null
+        resolve()
+      }
+      document.head.appendChild(script)
+    }),
+
+    // https://github.com/jerryc127/hexo-theme-butterfly
+    jQuery: (fn) => {
+      if (typeof jQuery === 'undefined') {
+        stellar.loadScript(stellar.plugins.jQuery).then(fn)
+      } else {
+        fn()
+      }
+    }
+  };
   stellar.github = 'https://github.com/xaoxuu/hexo-theme-stellar/tree/<%- theme.stellar.version %>';
   stellar.config = {
     date_suffix: {

source/css/_plugins/comments/valine.styl

@@ -80,24 +80,48 @@
         padding: 8px 2rem
     .vcards
       margin-top: 0.5rem
+      .vcard
+        display: flex
+        position: relative
+        .vimg
+          width: 36px
+          height: 36px
+        .vh
+          margin-left: -46px
+          padding-bottom: 0
+          width: 100%
+          .vhead
+            line-height: 1.2
+          .vnick
+            margin-left: 44px
+            line-height: inherit
+            font-size: $fs-14
+          .vtime
+            margin-left: 44px
+            font-size: $fs-12
+            font-weight: 500
+          .vat
+            font-size: $fs-12
       >.vcard
         border-radius: $border-block
         background: var(--card)
         border: 1px dashed var(--block-border)
         padding: 1rem
         margin-bottom: 1rem
-      .vh
+        >.vh
           border-bottom: none
-      .vquote
+          >.vquote
             border-left: none
+            padding-left: 0
+            >.vcard
+              border-top: 1px dashed var(--block-border)
       .vimg
-        border: 1px solid white
         padding: 0
         background: var(--block)
       .vhead
         span
           &.vnick
-            color: var(--text-p3)
+            color: var(--text-p2)
             cursor: default
         a
           &.vnick
@@ -106,9 +130,6 @@
             &:hover
               color: $color-hover
         .vsys
-          margin: 2px
-          padding: 1px 8px
-          background-color: var(--block)
           display: none
       .vmeta
         .vat
@@ -124,6 +145,7 @@
 
       .vcontent
         padding-top: 0
+        margin-top: .75em
         blockquote
           padding-top: 1rem
           padding-bottom: 1rem

source/js/main.js

@@ -37,96 +37,6 @@ const util = {
     return result
   },
 
-  // 懒加载 css https://github.com/filamentgroup/loadCSS
-  loadCSS: (href, before, media, attributes) => {
-    var doc = window.document;
-    var ss = doc.createElement("link");
-    var ref;
-    if (before) {
-      ref = before;
-    } else {
-      var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
-      ref = refs[refs.length - 1];
-    }
-    var sheets = doc.styleSheets;
-    if (attributes) {
-      for (var attributeName in attributes) {
-        if (attributes.hasOwnProperty(attributeName)) {
-          ss.setAttribute(attributeName, attributes[attributeName]);
-        }
-      }
-    }
-    ss.rel = "stylesheet";
-    ss.href = href;
-    ss.media = "only x";
-    function ready(cb) {
-      if (doc.body) {
-        return cb();
-      }
-      setTimeout(function () {
-        ready(cb);
-      });
-    }
-    ready(function () {
-      ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
-    });
-    var onloadcssdefined = function (cb) {
-      var resolvedHref = ss.href;
-      var i = sheets.length;
-      while (i--) {
-        if (sheets[i].href === resolvedHref) {
-          return cb();
-        }
-      }
-      setTimeout(function () {
-        onloadcssdefined(cb);
-      });
-    };
-    function loadCB() {
-      if (ss.addEventListener) {
-        ss.removeEventListener("load", loadCB);
-      }
-      ss.media = media || "all";
-    }
-    if (ss.addEventListener) {
-      ss.addEventListener("load", loadCB);
-    }
-    ss.onloadcssdefined = onloadcssdefined;
-    onloadcssdefined(loadCB);
-    return ss;
-  },
-
-  // 从 butterfly 和 volantis 获得灵感
-  loadScript: (src, opt) => new Promise((resolve, reject) => {
-    var script = document.createElement('script')
-    script.src = src
-    if (opt) {
-      for (let key of Object.keys(opt)) {
-        script[key] = opt[key]
-      }
-    } else {
-      // 默认异步，如果需要同步，第二个参数传入 {} 即可
-      script.async = true
-    }
-    script.onerror = reject
-    script.onload = script.onreadystatechange = function() {
-      const loadState = this.readyState
-      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
-      script.onload = script.onreadystatechange = null
-      resolve()
-    }
-    document.head.appendChild(script)
-  }),
-
-  // https://github.com/jerryc127/hexo-theme-butterfly
-  jQuery: (fn) => {
-    if (typeof jQuery === 'undefined') {
-      util.loadScript(stellar.plugins.jQuery).then(fn)
-    } else {
-      fn()
-    }
-  },
-
   copy: (id, msg) => {
     const el = document.getElementById(id);
     if (el) {
@@ -178,7 +88,7 @@ const sidebar = {
 
 const init = {
   toc: () => {
-    util.jQuery(() => {
+    stellar.jQuery(() => {
       const scrollOffset = 32;
       var segs = [];
       $("article.md :header").each(function (idx, node) {
@@ -212,7 +122,7 @@ const init = {
     })
   },
   sidebar: () => {
-    util.jQuery(() => {
+    stellar.jQuery(() => {
       $("#toc a.toc-link").click(function(e) {
         l_body.classList.remove("sidebar");
       });
@@ -271,7 +181,7 @@ init.registerTabsTag()
 
 // scrollreveal
 if (stellar.plugins.scrollreveal) {
-  util.loadScript(stellar.plugins.scrollreveal.js).then(function () {
+  stellar.loadScript(stellar.plugins.scrollreveal.js).then(function () {
     ScrollReveal().reveal("body .reveal", {
       distance: stellar.plugins.scrollreveal.distance,
       duration: stellar.plugins.scrollreveal.duration,
@@ -284,7 +194,7 @@ if (stellar.plugins.scrollreveal) {
 
 // lazyload
 if (stellar.plugins.lazyload) {
-  util.loadScript(stellar.plugins.lazyload.js, {defer:true})
+  stellar.loadScript(stellar.plugins.lazyload.js, {defer:true})
   // https://www.npmjs.com/package/vanilla-lazyload
   // Set the options globally
   // to make LazyLoad self-initialize
@@ -309,16 +219,16 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.sitesjs) {
   const issues_api = document.getElementById('sites-api');
   if (issues_api != undefined) {
-    util.jQuery( () => {
+    stellar.jQuery( () => {
-      util.loadScript(stellar.plugins.sitesjs, {defer:true})
+      stellar.loadScript(stellar.plugins.sitesjs, {defer:true})
     })
   }
 }
 if (stellar.plugins.friendsjs) {
   const issues_api = document.getElementById('friends-api');
   if (issues_api != undefined) {
-    util.jQuery( () => {
+    stellar.jQuery( () => {
-      util.loadScript(stellar.plugins.friendsjs, {defer:true})
+      stellar.loadScript(stellar.plugins.friendsjs, {defer:true})
     })
   }
 }
@@ -327,8 +237,8 @@ if (stellar.plugins.friendsjs) {
 if (stellar.plugins.swiper) {
   const swiper_api = document.getElementById('swiper-api');
   if (swiper_api != undefined) {
-    util.loadCSS(stellar.plugins.swiper.css);
+    stellar.loadCSS(stellar.plugins.swiper.css);
-    util.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
+    stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
       var swiper = new Swiper('.swiper-container', {
         slidesPerView: 'auto',
         spaceBetween: 8,
@@ -350,7 +260,7 @@ if (stellar.plugins.swiper) {
 // preload
 if (stellar.plugins.preload) {
   if (stellar.plugins.preload.service == 'instant_page') {
-    util.loadScript(stellar.plugins.preload.instant_page, {
+    stellar.loadScript(stellar.plugins.preload.instant_page, {
       defer: true,
       type: 'module',
       integrity: 'sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1'
@@ -362,7 +272,7 @@ if (stellar.plugins.preload) {
       maxRPS: 5,
       hoverDelay: 25
     };
-    util.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
+    stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
   }
 }