valine 按需加载

2021-03-13 23:31:52 +08:00 · 2021-03-13 23:31:52 +08:00 · 60958245ce
parent 8f414e1fc4
commit 60958245ce
5 changed files with 177 additions and 148 deletions
--- a/_config.yml
+++ b/_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:
--- a/layout/_partial/plugins/comments/valine/script.ejs
+++ b/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>
--- a/layout/_partial/scripts/index.ejs
+++ b/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: {
--- a/source/css/_plugins/comments/valine.styl
+++ b/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
--- a/source/js/main.js
+++ b/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( () => {
-      util.loadScript(stellar.plugins.sitesjs, {defer:true})
+    stellar.jQuery( () => {
+      stellar.loadScript(stellar.plugins.sitesjs, {defer:true})
    })
  }
 }
 if (stellar.plugins.friendsjs) {
  const issues_api = document.getElementById('friends-api');
  if (issues_api != undefined) {
-    util.jQuery( () => {
-      util.loadScript(stellar.plugins.friendsjs, {defer:true})
+    stellar.jQuery( () => {
+      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);
-    util.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
+    stellar.loadCSS(stellar.plugins.swiper.css);
+    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})
  }
 }