⚡ Improved the comments plug-in load function, close #12

assets/js/bookmark.js

@@ -52,5 +52,5 @@ document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener('pjax:success', scrollToMark);
   };
 
-  init(CONFIG.bookmark.save);
+  init(NexT.CONFIG.bookmark.save);
 });

assets/js/comments-buttons.js

@@ -7,13 +7,13 @@
     element.addEventListener('click', () => {
       commentButton.forEach(active => active.classList.toggle('active', active === element));
       document.querySelectorAll('.comment-position').forEach(active => active.classList.toggle('active', active.classList.contains(commentClass)));
-      if (CONFIG.comments.storage) {
+      if (NexT.CONFIG.comments.storage) {
         localStorage.setItem('comments_active', commentClass);
       }
     });
   });
-  let { activeClass } = CONFIG.comments;
+  let { activeClass } = NexT.CONFIG.comments;
-  if (CONFIG.comments.storage) {
+  if (NexT.CONFIG.comments.storage) {
     activeClass = localStorage.getItem('comments_active') || activeClass;
   }
   if (activeClass) {

assets/js/comments.js

@@ -1,8 +1,8 @@
 /* global CONFIG */
 
 window.addEventListener('tabs:register', () => {
-  let { activeClass } = CONFIG.comments;
+  let { activeClass } = NexT.CONFIG.comments;
-  if (CONFIG.comments.storage) {
+  if (NexT.CONFIG.comments.storage) {
     activeClass = localStorage.getItem('comments_active') || activeClass;
   }
   if (activeClass) {
@@ -12,7 +12,7 @@ window.addEventListener('tabs:register', () => {
     }
   }
 });
-if (CONFIG.comments.storage) {
+if (NexT.CONFIG.comments.storage) {
   window.addEventListener('tabs:click', event => {
     if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
     const commentClass = event.target.classList[1];

assets/js/config.js

@@ -5,6 +5,10 @@ if (!window.NexT) window.NexT = {};
   const siteConfig = {
     "hostname"   : "{{ .Site.BaseURL }}",
     "root"       : "/",
+    "vendor"     : {
+      "plugins" : "{{ .Site.Params.vendors.plugins }}",
+      "router"  : "{{ .Scratch.Get "router" }}"
+    },
     "images"     : "{{ .Site.Params.images }}",
     "scheme"     : "{{ .Site.Params.scheme }}",
     "darkmode"   : {{ .Site.Params.darkmode }},
@@ -39,6 +43,43 @@ if (!window.NexT) window.NexT = {};
     "path"       : "/search.json",
     "localsearch": {{ .Site.Params.localSearch | jsonify }},
     {{- end }}
+    {{- with .Site.Params.waline }}
+    "waline"     : { 
+      "js"     : {{ $.Site.Data.resources.waline.js | jsonify }},
+      "css"    : {{ $.Site.Data.resources.waline.css | jsonify }},
+      "config" : {{ . | jsonify }}
+    },  
+    {{- end }}
+    {{- with .Site.Params.artalk }}
+    "artalk"     : { 
+      "js"     : {{ $.Site.Data.resources.artalk.js | jsonify }},
+      "css"    : {{ $.Site.Data.resources.artalk.css | jsonify }},
+      "config" : {{ . | jsonify }}
+    },
+    {{- end }}
+    {{- with .Site.Params.giscus }}
+    "giscus"     : { 
+      "js"     : "{{ $.Site.Data.resources.giscus.js }}",
+      "config" : {{ . | jsonify }}
+    },
+    {{- end }}
+    {{- with .Site.Params.livere }}
+    "livere"     : { 
+      "js"     : "{{ $.Site.Data.resources.livere.js }}"
+    },
+    {{- end }}
+    {{- with .Site.Params.utterances }}
+    "utterances"     : { 
+      "js"     : "{{ $.Site.Data.resources.utterances.js }}",
+      "config" : {{ . | jsonify }}
+    },
+    {{- end }}
+    {{- with .Site.Params.addThisId }}
+    "addthis"     : { 
+      "js"     : "{{ $.Site.Data.resources.addthis.js }}",
+      "config" : { "pubid" : "{{ . }}" }
+    },
+    {{- end }}
     "lang"       : "{{ .Site.LanguageCode }}",
     "permalink"  : "{{ .Page.Permalink | absURL }}",
     "title"      : "{{ .Page.Title }}",
@@ -46,6 +87,6 @@ if (!window.NexT) window.NexT = {};
     "isPage"     : {{ .IsPage }}
   };
   
-  window.CONFIG = new Proxy(siteConfig, {});
+  window.NexT.CONFIG = new Proxy(siteConfig, {});
 
 })();

assets/js/motion.js

@@ -10,12 +10,12 @@ NexT.motion.integrator = {
   },
   add: function(fn) {
     const sequence = fn();
-    if (CONFIG.motion.async) this.queue.push(sequence);
+    if (NexT.CONFIG.motion.async) this.queue.push(sequence);
     else this.queue = this.queue.concat(sequence);
     return this;
   },
   bootstrap: function() {
-    if (!CONFIG.motion.async) this.queue = [this.queue];
+    if (!NexT.CONFIG.motion.async) this.queue = [this.queue];
     this.queue.forEach(sequence => {
       const timeline = window.anime.timeline({
         duration: 200,
@@ -52,12 +52,12 @@ NexT.motion.middleWares = {
     }
 
     pushToSequence('header.header');
-    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
+    NexT.CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
-    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
+    NexT.CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
     pushToSequence('.site-title');
     pushToSequence('.site-brand-container .toggle', true);
     pushToSequence('.site-subtitle');
-    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
+    (NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
 
     document.querySelectorAll('.menu-item').forEach(targets => {
       sequence.push({
@@ -82,7 +82,7 @@ NexT.motion.middleWares = {
 
   postList: function() {
     const sequence = [];
-    const { postblock, postheader, postbody, collheader } = CONFIG.motion.transition;
+    const { postblock, postheader, postbody, collheader } = NexT.CONFIG.motion.transition;
 
     function animate(animation, selector) {
       if (!animation) return;
@@ -105,9 +105,9 @@ NexT.motion.middleWares = {
 
   sidebar: function() {
     const sidebar = document.querySelector('.sidebar');
-    const sidebarTransition = CONFIG.motion.transition.sidebar;
+    const sidebarTransition = NexT.CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
-    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+    if (sidebarTransition && (NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini')) {
       return [{
         targets : sidebar,
         complete: () => sidebar.classList.add('animated', sidebarTransition)

assets/js/next-boot.js

@@ -4,8 +4,8 @@ NexT.boot = {};
 
 NexT.boot.registerEvents = function() {
 
-  NexT.utils.registerScrollPercent();
+  // NexT.utils.registerScrollPercent();
-  NexT.utils.registerCanIUseTag();
+  // NexT.utils.registerCanIUseTag();
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
@@ -33,33 +33,35 @@ NexT.boot.registerEvents = function() {
 
 NexT.boot.refresh = function() {
 
+  if (!NexT.CONFIG.isPage) return;
   /**
    * Register JS handlers by condition option.
    * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
    */
-  //CONFIG.prism && window.Prism.highlightAll();
+  //NexT.CONFIG.prism && window.Prism.highlightAll();
-  /*CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
+  /*NexT.CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
     background: 'var(--content-bg-color)'
   });*/
-  CONFIG.lazyload && window.lozad('.post-body img').observe();
+  // NexT.CONFIG.lazyload && window.lozad('.post-body img').observe();
-  CONFIG.pangu && window.pangu.spacingPage();
+  // NexT.CONFIG.pangu && window.pangu.spacingPage();
 
-  CONFIG.isPage && NexT.utils.replacePostCRLink();
+  NexT.utils.replacePostCRLink();
-  CONFIG.isPage && CONFIG.copybtn && NexT.utils.registerCopyCode();
+  NexT.utils.initCommontesDispaly();
-  NexT.utils.registerTabsTag();
+  NexT.CONFIG.copybtn && NexT.utils.registerCopyCode();
-  /*NexT.utils.registerActiveMenuItem();
+  /*NexT.utils.registerTabsTag();
+  NexT.utils.registerActiveMenuItem();
   NexT.utils.registerLangSelect();*/
-  CONFIG.isPage && NexT.utils.registerSidebarTOC();
+  NexT.utils.registerSidebarTOC();
-  CONFIG.isPage && NexT.utils.registerPostReward();
+  NexT.utils.registerPostReward();
-  CONFIG.isPage && NexT.utils.initCommontesDispaly();
+  NexT.utils.registerCommonSwitch();
-  CONFIG.isPage && NexT.utils.registerCommonSwitch();
+  /*NexT.utils.wrapTableWithBox();
-  NexT.utils.wrapTableWithBox();
+  NexT.utils.registerVideoIframe();*/
-  NexT.utils.registerVideoIframe();
+
 };
 
 NexT.boot.motion = function() {
   // Define Motion Sequence & Bootstrap Motion.
-  if (CONFIG.motion.enable) {
+  if (NexT.CONFIG.motion.enable) {
     NexT.motion.integrator
       .add(NexT.motion.middleWares.header)
       .add(NexT.motion.middleWares.postList)
@@ -72,6 +74,6 @@ NexT.boot.motion = function() {
 
 document.addEventListener('DOMContentLoaded', () => {
   NexT.boot.registerEvents();
-  NexT.boot.refresh();
   NexT.boot.motion();
+  NexT.boot.refresh();
 });

assets/js/pjax.js

@@ -11,21 +11,21 @@ const pjax = new Pjax({
   ],
   analytics: false,
   cacheBust: false,
-  scrollTo : !CONFIG.bookmark.enable
+  scrollTo : !NexT.CONFIG.bookmark.enable
 });
 
 document.addEventListener('pjax:success', () => {
   pjax.executeScripts(document.querySelectorAll('script[data-pjax]'));
   NexT.boot.refresh();
   // Define Motion Sequence & Bootstrap Motion.
-  if (CONFIG.motion.enable) {
+  if (NexT.CONFIG.motion.enable) {
     NexT.motion.integrator
       .init()
       .add(NexT.motion.middleWares.subMenu)
       .add(NexT.motion.middleWares.postList)
       .bootstrap();
   }
-  if (CONFIG.sidebar.display !== 'remove') {
+  if (NexT.CONFIG.sidebar.display !== 'remove') {
     const hasTOC = document.querySelector('.post-toc');
     document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
     NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);

assets/js/schemes/muse.js

@@ -2,7 +2,7 @@
 
 document.addEventListener('DOMContentLoaded', () => {
 
-  const isRight = CONFIG.sidebar.position === 'right';
+  const isRight = NexT.CONFIG.sidebar.position === 'right';
 
   const sidebarToggleMotion = {
     mouse: {},
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
       document.body.classList.remove('sidebar-active');
     }
   };
-  if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
+  if (NexT.CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
 
   function updateFooterPosition() {
     const footer = document.querySelector('.footer');

assets/js/third-party/comments/artalk.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const element = '.artalk-container';
+  if (!NexT.CONFIG.comments.enable 
+    || !NexT.CONFIG.artalk
+    || !NexT.utils.checkDOMExist(element)) return; 
+
+  const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css);
+  NexT.utils.getStyle(artalk_css, null);
+
+  const artalk_js = NexT.utils.getCDNResource(NexT.CONFIG.artalk.js);
+  const {
+    site,
+    placeholder,
+    server,
+  } = NexT.CONFIG.artalk.config;
+
+  NexT.utils.loadComments(element)
+    .then(() => NexT.utils.getScript(artalk_js, {
+    }))
+    .then(() => {
+
+      new Artalk({
+        el          : element,
+        pageKey     : NexT.CONFIG.permalink,
+        pageTitle   : NexT.CONFIG.title,
+        server      : server,
+        site        : site,
+        locale      : NexT.CONFIG.lang,
+        placeholder : placeholder,
+        darkMode    : 'auto'
+      });
+
+      NexT.utils.hiddeLodingCmp(element);
+  });
+});

assets/js/third-party/comments/changyan.js

@@ -1,39 +0,0 @@
-/* global NexT, CONFIG */
-
-document.addEventListener('page:loaded', () => {
-  const { appid, appkey } = CONFIG.changyan;
-  const mainJs = 'https://cy-cdn.kuaizhan.com/upload/changyan.js';
-  const countJs = `https://cy-cdn.kuaizhan.com/upload/plugins/plugins.list.count.js?clientId=${appid}`;
-
-  // Get the number of comments
-  setTimeout(() => {
-    return NexT.utils.getScript(countJs, {
-      attributes: {
-        async: true,
-        id   : 'cy_cmt_num'
-      }
-    });
-  }, 0);
-
-  // When scroll to comment section
-  if (CONFIG.page.comments && !CONFIG.page.isHome) {
-    NexT.utils.loadComments('#SOHUCS')
-      .then(() => {
-        return NexT.utils.getScript(mainJs, {
-          attributes: {
-            async: true
-          }
-        });
-      })
-      .then(() => {
-        window.changyan.api.config({
-          appid,
-          conf: appkey
-        });
-      })
-      .catch(error => {
-        // eslint-disable-next-line no-console
-        console.error('Failed to load Changyan', error);
-      });
-  }
-});

assets/js/third-party/comments/disqus.js

@@ -1,41 +0,0 @@
-/* global NexT, CONFIG, DISQUS */
-
-document.addEventListener('page:loaded', () => {
-
-  if (CONFIG.disqus.count) {
-    const loadCount = () => {
-      NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/count.js`, {
-        attributes: { id: 'dsq-count-scr' }
-      });
-    };
-
-    // defer loading until the whole page loading is completed
-    window.addEventListener('load', loadCount, false);
-  }
-
-  if (CONFIG.page.comments) {
-    // `disqus_config` should be a global variable
-    // See https://help.disqus.com/en/articles/1717084-javascript-configuration-variables
-    window.disqus_config = function() {
-      this.page.url = CONFIG.page.permalink;
-      this.page.identifier = CONFIG.page.path;
-      this.page.title = CONFIG.page.title;
-      if (CONFIG.disqus.i18n.disqus !== 'disqus') {
-        this.language = CONFIG.disqus.i18n.disqus;
-      }
-    };
-    NexT.utils.loadComments('#disqus_thread').then(() => {
-      if (window.DISQUS) {
-        DISQUS.reset({
-          reload: true,
-          config: window.disqus_config
-        });
-      } else {
-        NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/embed.js`, {
-          attributes: { dataset: { timestamp: '' + +new Date() } }
-        });
-      }
-    });
-  }
-
-});

assets/js/third-party/comments/disqusjs.js

@@ -1,18 +0,0 @@
-/* global NexT, CONFIG, DisqusJS */
-
-document.addEventListener('page:loaded', () => {
-  if (!CONFIG.page.comments) return;
-
-  NexT.utils.loadComments('#disqus_thread')
-    .then(() => NexT.utils.getScript(CONFIG.disqusjs.js, { condition: window.DisqusJS }))
-    .then(() => {
-      window.dsqjs = new DisqusJS({
-        api       : CONFIG.disqusjs.api || 'https://disqus.com/api/',
-        apikey    : CONFIG.disqusjs.apikey,
-        shortname : CONFIG.disqusjs.shortname,
-        url       : CONFIG.page.permalink,
-        identifier: CONFIG.page.path,
-        title     : CONFIG.page.title
-      });
-    });
-});

assets/js/third-party/comments/giscus.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const element = '.giscus-container';
+  if (!NexT.CONFIG.comments.enable 
+    || !NexT.CONFIG.giscus
+    || !NexT.utils.checkDOMExist(element)) return;
+
+  const { 
+    category, 
+    categoryid, 
+    emit, 
+    inputposition, 
+    mapping, 
+    reactions, 
+    repo, 
+    repoid, 
+    theme } = NexT.CONFIG.giscus.config;
+
+
+  NexT.utils.loadComments(element)
+    .then(() => NexT.utils.getScript(NexT.CONFIG.giscus.js, {
+      attributes: {
+        'async'                  : true,
+        'crossorigin'            : 'anonymous',
+        'data-repo'              : repo,
+        'data-repo-id'           : repoid,
+        'data-category'          : category,
+        'data-category-id'       : categoryid,
+        'data-mapping'           : mapping,
+        'data-reactions-enabled' : reactions ? 1:0,
+        'data-emit-metadata'     : emit ? 1:0,
+        'data-input-position'    : inputposition,
+        'data-theme'             : theme,
+        'data-lang'              : NexT.CONFIG.lang,
+        'data-loading'           : 'lazy'
+      },
+      parentNode: document.querySelector(element)
+    }));
+
+    NexT.utils.hiddeLodingCmp(element);
+});

assets/js/third-party/comments/gitalk.js

@@ -1,24 +0,0 @@
-/* global NexT, CONFIG, Gitalk */
-
-document.addEventListener('page:loaded', () => {
-  if (!CONFIG.page.comments) return;
-
-  NexT.utils.loadComments('.gitalk-container')
-    .then(() => NexT.utils.getScript(CONFIG.gitalk.js, {
-      condition: window.Gitalk
-    }))
-    .then(() => {
-      const gitalk = new Gitalk({
-        clientID           : CONFIG.gitalk.client_id,
-        clientSecret       : CONFIG.gitalk.client_secret,
-        repo               : CONFIG.gitalk.repo,
-        owner              : CONFIG.gitalk.github_id,
-        admin              : [CONFIG.gitalk.admin_user],
-        id                 : CONFIG.gitalk.path_md5,
-        proxy              : CONFIG.gitalk.proxy,
-        language           : CONFIG.gitalk.language || window.navigator.language,
-        distractionFreeMode: CONFIG.gitalk.distraction_free_mode
-      });
-      gitalk.render(document.querySelector('.gitalk-container'));
-    });
-});

assets/js/third-party/comments/isso.js

@@ -1,15 +0,0 @@
-/* global NexT, CONFIG */
-
-document.addEventListener('page:loaded', () => {
-  if (!CONFIG.page.comments) return;
-
-  NexT.utils.loadComments('#isso-thread')
-    .then(() => NexT.utils.getScript(`${CONFIG.isso}js/embed.min.js`, {
-      attributes: {
-        dataset: {
-          isso: `${CONFIG.isso}`
-        }
-      },
-      parentNode: document.querySelector('#isso-thread')
-    }));
-});

assets/js/third-party/comments/livere.js

@@ -1,19 +1,18 @@
-/* global NexT, CONFIG, LivereTower */
+document.addEventListener('DOMContentLoaded', () => {
 
-document.addEventListener('page:loaded', () => {
+  const element = '#lv-container';
-  if (!CONFIG.page.comments) return;
+  if (!NexT.CONFIG.comments.enable 
+    || !NexT.CONFIG.livere
+    || !NexT.utils.checkDOMExist(element)) return; 
 
-  NexT.utils.loadComments('#lv-container').then(() => {
+  NexT.utils.loadComments(element).then(() => {
-    window.livereOptions = {
+    NexT.utils.getScript(NexT.CONFIG.livere.js, {
-      refer: CONFIG.page.path.replace(/index\.html$/, '')
-    };
-
-    if (typeof LivereTower === 'function') return;
-
-    NexT.utils.getScript('https://cdn-city.livere.com/js/embed.dist.js', {
       attributes: {
         async: true
-      }
+      },
+      parentNode: document.querySelector(element)
     });
+
+    NexT.utils.hiddeLodingCmp(element);
   });
 });

assets/js/third-party/comments/utterances.js

@@ -1,17 +1,27 @@
-/* global NexT, CONFIG */
+document.addEventListener('DOMContentLoaded', () => {
 
-document.addEventListener('page:loaded', () => {
+  const element = '.utterances-container';
-  if (!CONFIG.page.comments) return;
+  if (!NexT.CONFIG.comments.enable 
+    || !NexT.CONFIG.utterances
+    || !NexT.utils.checkDOMExist(element)) return;
 
-  NexT.utils.loadComments('.utterances-container')
+  const { 
-    .then(() => NexT.utils.getScript('https://utteranc.es/client.js', {
+    repo, 
+    issueterm, 
+    label, 
+    theme } = NexT.CONFIG.utterances.config;
+
+  NexT.utils.loadComments(element)
+    .then(() => NexT.utils.getScript(NexT.CONFIG.utterances.js, {
       attributes: {
-        async       : true,
+        'async'       : true,
-        crossOrigin : 'anonymous',
+        'crossorigin' : 'anonymous',
-        'repo'      : CONFIG.utterances.repo,
+        'repo'        : repo,
-        'issue-term': CONFIG.utterances.issue_term,
+        'issue-term'  : issueterm,
-        'theme'     : CONFIG.utterances.theme
+        'theme'       : theme
       },
-      parentNode: document.querySelector('.utterances-container')
+      parentNode: document.querySelector(element)
     }));
+
+    NexT.utils.hiddeLodingCmp(element);
 });

assets/js/third-party/comments/waline.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const element = '.waline-container';
+  if (!NexT.CONFIG.comments.enable 
+    || !NexT.CONFIG.waline
+    || !NexT.utils.checkDOMExist(element)) return; 
+  
+  const {
+    emoji, 
+    imguploader, 
+    pageview, 
+    placeholder, 
+    requiredmeta, 
+    serverurl, 
+    wordlimit
+  } = NexT.CONFIG.waline.config;
+
+
+  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
+  NexT.utils.getStyle(waline_css, null);
+
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
+
+  const locale = {
+    placeholder: placeholder
+  };
+
+  NexT.utils.loadComments(element)
+    .then(() => NexT.utils.getScript(waline_js, {
+    }))
+    .then(() => {
+
+      Waline.init({
+        locale,
+        el            : element,
+        pageview      : pageview,
+        emoji         : emoji,
+        imageUploader : imguploader,
+        wordLimit     : wordlimit,
+        requiredMeta  : requiredmeta,
+        serverURL     : serverurl,
+        lang          : NexT.CONFIG.lang,
+        dark          : "auto"
+      });
+
+      NexT.utils.hiddeLodingCmp(element);
+  });
+});

assets/js/third-party/share/addthis.js

@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const element = '.addthis_inline_share_toolbox';
+  if (!NexT.CONFIG.addthis || !NexT.utils.checkDOMExist(element)) return; 
+
+  const addthis_js = NexT.CONFIG.addthis.js + '?pubid=' + NexT.CONFIG.addthis.config.pubid;
+
+  NexT.utils.loadComments(element).then(() => {
+    NexT.utils.getScript(addthis_js, {
+      attributes: {
+        async: true
+      },
+      parentNode: document.querySelector(element)
+    });
+  });
+});

assets/js/utils.js

@@ -23,8 +23,31 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
+  checkDOMExist: function(selector) {
+    return document.querySelector(selector) != null;
+  },
+
+  getCDNResource: function(res) {
+    let { plugins, router } = NexT.CONFIG.vendor;
+    let { name, version, file, alias } = res;
+
+    let npm_name = name;
+    let res_src = '';
+    switch(plugins) {
+      case 'cdnjs':
+        let cdnjs_name = alias || name;
+        let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, '');
+        res_src = `${router}/${cdnjs_name}/${version}/${cdnjs_file}`
+        break;
+      default:
+        res_src = `${router}/${npm_name}@${version}/${file}`
+    }
+
+    return res_src;
+  },
+
   replacePostCRLink: function() {
-    if (CONFIG.hostname.startsWith('http')) return;
+    if (NexT.CONFIG.hostname.startsWith('http')) return;
     // Try to support mutli domain without base URL sets.
     let href = window.location.href;
     if (href.indexOf('#')>-1){
@@ -41,7 +64,7 @@ NexT.utils = {
    */
   registerCopyCode: function() {
     let figure = document.querySelectorAll('.highlight pre');
-    if (figure.length === 0 || !CONFIG.copybtn) return;
+    if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
     figure.forEach(element => {
       let cn = element.querySelector('code').className;
       // TODO seems hard code need find other ways fixed it.
@@ -170,13 +193,14 @@ NexT.utils = {
         // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
         const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
         [...tActive.parentNode.children].forEach(target => {
+        // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
           target.classList.toggle('active', target === tActive);
         });
         // Trigger event
         tActive.dispatchEvent(new Event('tabs:click', {
           bubbles: true
         }));
-        if (!CONFIG.stickytabs) return;
+        if (!NexT.CONFIG.stickytabs) return;
         const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
         window.anime({
           targets  : document.scrollingElement,
@@ -204,7 +228,7 @@ NexT.utils = {
   /*registerActiveMenuItem: function() {
     document.querySelectorAll('.menu-item a[href]').forEach(target => {
       const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
-      const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
+      const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
       target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
     });
   },
@@ -212,7 +236,7 @@ NexT.utils = {
   registerLangSelect: function() {
     const selects = document.querySelectorAll('.lang-select');
     selects.forEach(sel => {
-      sel.value = CONFIG.page.lang;
+      sel.value = NexT.CONFIG.page.lang;
       sel.addEventListener('change', () => {
         const target = sel.options[sel.selectedIndex];
         document.querySelectorAll('.lang-select-label span').forEach(span => {
@@ -278,6 +302,11 @@ NexT.utils = {
     });
   },
 
+  hiddeLodingCmp: function(selector) {
+    const loadding = document.querySelector(selector).previousElementSibling;
+    loadding.style.display = 'none';
+  },
+
   activateNavByIndex: function(index) {
     const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
     if (!target || target.classList.contains('active-current')) return;
@@ -303,13 +332,13 @@ NexT.utils = {
   },
 
   updateSidebarPosition: function() {
-    if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
+    if (window.innerWidth < 992 || NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');
-    let display = CONFIG.sidebar;
+    let display = NexT.CONFIG.sidebar;
     if (typeof display !== 'boolean') {
       // There's no definition sidebar in the page front-matter.
-      display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);
+      display = NexT.CONFIG.sidebar.display === 'always' || (NexT.CONFIG.sidebar.display === 'post' && hasTOC);
     }
     if (display) {
       window.dispatchEvent(new Event('sidebar:show'));
@@ -344,6 +373,15 @@ NexT.utils = {
     });
   },
 
+  getStyle: function(src, parent) {    
+    const link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    link.setAttribute('href', src);
+
+    (parent || document.head).appendChild(link);
+  },
+
   getScript: function(src, options = {}, legacyCondition) {
     if (typeof options === 'function') {
       return this.getScript(src, {
@@ -362,6 +400,7 @@ NexT.utils = {
       } = {},
       parentNode = null
     } = options;
+    
     return new Promise((resolve, reject) => {
       if (condition) {
         resolve();
@@ -401,7 +440,7 @@ NexT.utils = {
     }
     return new Promise(resolve => {
       const element = document.querySelector(selector);
-      if (!CONFIG.comments.lazyload || !element) {
+      if (!NexT.CONFIG.comments.lazyload || !element) {
         resolve();
         return;
       }

data/resources.yaml

@@ -1,12 +1,11 @@
+# CDN 公共资源商列表
 # Public CDN vendor list
-#
 vendors: 
-  cdnjs: "//cdnjs.cloudflare.com/ajax/libs/${name}/${version}/${file}"
+  cdnjs: "https://cdnjs.cloudflare.com/ajax/libs"
-  unpkg: "//unpkg.com/${name}@${version}/${file}"
+  unpkg: "https://unpkg.com"
 
-
+# JavaScript 资源
-# Javascript Resources
+# JavaScript Resources
-#
 js:
   - name: animejs
     version: 3.2.1
@@ -15,8 +14,8 @@ js:
     version: 3.2.0
     file: es5/tex-mml-chtml.js
 
+# CSS 资源
 # CSS Resources
-#
 css:
   - name: '@fortawesome/fontawesome-free'
     version: 6.1.1
@@ -25,3 +24,44 @@ css:
   - name: animate.css
     version: 3.1.1
     file: animate.min.css
+
+# 第三方服务组件资源
+# 3rd servcies Resource
+
+# 文章分享
+# Share
+addthis:
+  js: https://s7.addthis.com/js/300/addthis_widget.js
+
+# 评论组件资源
+# Comment component Resources
+waline:
+  js:
+    name: '@waline/client'
+    version: 2.6.1
+    file: dist/waline.js
+    alias: waline
+  css:
+    name: '@waline/client'
+    version: 2.6.1
+    file: dist/waline.css
+    alias: waline
+
+artalk:
+  js:
+    name: artalk
+    version: 2.3.4
+    file: dist/Artalk.js
+  css:
+    name: artalk
+    version: 2.3.4
+    file: dist/Artalk.css
+
+giscus:
+  js: https://giscus.app/client.js
+
+utterances:
+  js: https://utteranc.es/client.js
+
+livere:
+  js: https://cdn-city.livere.com/js/embed.dist.js

exampleSite/start.sh

@@ -20,4 +20,4 @@ EOT
 
 next `cat ../VERSION`
 
-hugo server -D -t ../.. --port 1414 --panicOnWarning
+hugo server -D -t ../.. --port 1414 --panicOnWarning --config config.dev.yaml

layouts/partials/_thirdparty/comment/artalk.html

@@ -1,20 +1 @@
-{{- with .Site.Params.artalk }}
+<div class="artalk-container"></div> 
-<link href="//unpkg.com/artalk@2.3.4/dist/Artalk.css" rel="stylesheet">
-<script src="//unpkg.com/artalk@2.3.4/dist/Artalk.js"></script>
-
-<!-- Artalk -->
-<div id="Comments"></div>
-
-<script>
-  new Artalk({
-    el          : '#Comments',
-    pageKey     : '{{ $.Page.RelPermalink }}',
-    pageTitle   : '{{ $.Page.Title }}',
-    server      : '{{ .server }}',
-    site        : '{{ .site }}',
-    locale      : 'auto',
-    placeholder : '{{ .placeholder }}'
-  })
-</script>  
-{{- end }}
-

layouts/partials/_thirdparty/comment/giscus.html

@@ -1,18 +1 @@
-{{- with .Site.Params.giscus }}
+<div class="giscus-container"></div>
-<div class="giscus" style="position: relative;"></div>
-<script src="https://giscus.app/client.js"
-        data-repo="{{ .repo }}"
-        data-repo-id="{{ .repoId }}"
-        data-category="{{ .category }}"
-        data-category-id="{{ .categoryId }}"
-        data-mapping="{{ .mapping }}"
-        data-reactions-enabled="{{ int .reactions }}"
-        data-emit-metadata="{{ int .emit }}"
-        data-input-position="{{ .inputPosition }}"
-        data-theme="{{ .theme }}"
-        data-lang="{{ $.Site.LanguageCode }}"
-        data-loading="lazy"
-        crossorigin="anonymous"
-        async>
-</script>        
-{{- end }}

layouts/partials/_thirdparty/comment/livere.html

@@ -1,13 +1 @@
-{{- with .Site.Params.LiveRe }}
+<div id="lv-container" data-id="city" data-uid="{{ .Site.Params.livere.uid }}"></div>
-<div id="lv-container" data-id="city" data-uid="{{ .uid }}"></div>
-<script type="text/javascript">
-(function(d, s) {
-     var j, e = d.getElementsByTagName(s)[0];
-     if (typeof LivereTower === 'function') { return; }
-     j = d.createElement(s);
-     j.src = '//cdn-city.livere.com/js/embed.dist.js';
-     j.async = true;
-     e.parentNode.insertBefore(j, e);
- })(document, 'script');
-</script>
-{{- end }}

layouts/partials/_thirdparty/comment/utterances.html

@@ -1,9 +1 @@
-{{- with .Site.Params.utterances }}
+<div class="utterances-container"></div>
-<script src="https://utteranc.es/client.js" 
-repo="{{ .repo }}" 
-issue-term="{{ .issueTerm }}" 
-label="{{ .label }}" 
-crossorigin="anonymous" 
-theme="{{ .theme }}" async>
-</script>
-{{- end }}

layouts/partials/_thirdparty/comment/waline.html

@@ -1,23 +1 @@
-{{- with .Site.Params.waline }}
+<div class="waline-container"></div>
-<div id="waline"></div>
-
-<link rel="stylesheet" href="//unpkg.com/@waline/client@v2/dist/waline.css"/>
-<script src="//unpkg.com/@waline/client@v2/dist/waline.js"></script>
-<script type="text/javascript">
-  const locale = {
-    placeholder: "{{ .placeholder }}"
-  };
-  Waline.init({
-    locale,
-    el            : "#waline",
-    pageview      : {{ .pageView }},
-    emoji         : {{ .emoji }},
-    imageUploader : {{ .imgUploader }},
-    wordLimit     : {{ .wordLimit }},
-    requiredMeta  : {{ .requiredMeta }},
-    serverURL     : "{{ .serverURL }}",
-    lang          : "{{ $.Lang }}",
-    dark          : "auto"
-  });
-</script>
-{{- end }}

layouts/partials/_thirdparty/share/addthis.html

@@ -1,5 +1,3 @@
-{{- with .Site.Params.addThisId }}
+{{- if isset .Site.Params "addthisid" }}
-  <div class="addthis_inline_share_toolbox" style="text-align: center;">
+<div class="addthis_inline_share_toolbox" style="text-align: center;"></div>
-    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ . }}" async="async"></script>
-  </div>
 {{- end }}

layouts/partials/head/favicon.html

@@ -1,7 +1,9 @@
 <!-- Website icons -->
-  <link rel="shortcut icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
+{{- with .Site.Params.favicon }}
-  <link rel="icon" type="image/x-icon" href="{{ .Site.Params.favicon.icon }}">
+<link rel="shortcut icon" type="image/x-icon" href="{{ .icon }}">
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon.small }}">
+<link rel="icon" type="image/x-icon" href="{{ .icon }}">
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon.medium }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ .small }}">
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon.appleTouchIcon }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ .medium }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ .appleTouchIcon }}">
+{{- end }}
 <!-- Website icons -->

layouts/partials/head/style.html

@@ -1,9 +1,9 @@
 <!-- Plugin style files -->
 {{- $cssRes := .Site.Data.resources.css }}
 {{- $vendor := .Site.Params.vendors.plugins }}
-{{- $vendorCDN := .Scratch.Get "pluginCDN" }}
+{{- $router := .Scratch.Get "router" }}
+{{ $cssFmt := "%s/%s@%s/%s" }}
 {{- range $css := $cssRes }}
-  {{- $pluginCSS := $vendorCDN }}
   {{- $npm := $css.name }}
   {{- $file := $css.file }}
   {{- if eq $vendor "cdnjs" }}
@@ -11,12 +11,12 @@
       {{- $npm = . }}
     {{- end }}   
     {{- $file = replaceRE `(dist|lib|source\/js)\/` "" $css.file }}
+    {{- $cssFmt = "%s/%s/%s/%s" }}
   {{- end }}
-  {{- $pluginCSS = replace $pluginCSS "${name}" $npm }}
+  {{- $pluginCSS := printf $cssFmt $router $npm $css.version $file }}
-  {{- $pluginCSS = replace $pluginCSS "${version}" $css.version }}
+  <link type="text/css" rel="stylesheet" href="{{ $pluginCSS }}" /> 
-  {{- $pluginCSS = replace $pluginCSS "${file}" $file }}
-  <link rel="stylesheet" href="{{ $pluginCSS }}">
 {{- end }}
+
 <!-- Main Style file -->
 {{- $scss := resources.Get "css/main.scss" }}
 {{- $scss = $scss | resources.ExecuteAsTemplate "main.scss" .  }}

layouts/partials/init.html

@@ -8,7 +8,6 @@
 {{- .Scratch.Set "postsCount" (len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections)) -}}
 {{- .Scratch.Set "catsCount" (len .Site.Taxonomies.categories) -}}
 {{- .Scratch.Set "tagsCount" (len .Site.Taxonomies.tags)  -}}
-{{- $vendors := .Site.Data.resources.vendors -}}
+{{- $vendor := .Site.Params.vendors.plugins -}}
-{{- $pluginVen := .Site.Params.vendors.plugins -}}
+{{- $router := index .Site.Data.resources.vendors $vendor -}}
-{{- $pluginCDN := index $vendors $pluginVen -}}
+{{- .Scratch.Set "router" $router -}}
-{{- .Scratch.Set "pluginCDN" $pluginCDN -}}

layouts/partials/scripts.html

@@ -1,9 +1,9 @@
 <!-- Plugin scripts files -->
 {{- $jsRes := .Site.Data.resources.js }}
 {{- $vendor := .Site.Params.vendors.plugins }}
-{{- $vendorCDN := .Scratch.Get "pluginCDN" }}
+{{- $router := .Scratch.Get "router" }}
+{{ $jsFmt := "%s/%s@%s/%s" }}
 {{- range $js := $jsRes }}
-  {{- $pluginJS := $vendorCDN }}
   {{- $npm := $js.name }}
   {{- $file := $js.file }}
   {{- if eq $vendor "cdnjs" }}
@@ -11,10 +11,9 @@
       {{- $npm = . }}
     {{- end }}   
     {{- $file = replaceRE `(dist|lib|source\/js)\/` "" $js.file }}
+    {{- $jsFmt = "%s/%s/%s/%s" }}
   {{- end }}
-  {{- $pluginJS = replace $pluginJS "${name}" $npm }}
+  {{- $pluginJS := printf $jsFmt $router $npm $js.version $file }}
-  {{- $pluginJS = replace $pluginJS "${version}" $js.version }}
-  {{- $pluginJS = replace $pluginJS "${file}" $file }}
   <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
 {{- end }}
 
@@ -39,6 +38,30 @@
 {{- $pjaxjs := resources.Get "js/pjax.js" }}
 {{- $nextjs = $nextjs | append $pjaxjs }}
 {{- end }}
+{{- if isset .Site.Params "addthisid" }}
+{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
+{{- $nextjs = $nextjs | append $addthisjs }}
+{{- end }}
+{{- if isset .Site.Params "waline" }}
+{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
+{{- $nextjs = $nextjs | append $walinejs }}
+{{- end }}
+{{- if isset .Site.Params "giscus" }}
+{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
+{{- $nextjs = $nextjs | append $giscusjs }}
+{{- end }}
+{{- if isset .Site.Params "livere" }}
+{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
+{{- $nextjs = $nextjs | append $liverejs }}
+{{- end }}
+{{- if isset .Site.Params "artalk" }}
+{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
+{{- $nextjs = $nextjs | append $artalkjs }}
+{{- end }}
+{{- if isset .Site.Params "utterances" }}
+{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
+{{- $nextjs = $nextjs | append $utterancesjs }}
+{{- end }}
 {{- $nextjs = $nextjs | resources.Concat "js/hugo-next.js"}}
 {{ if hugo.IsProduction }}
 {{- $nextjs = $nextjs | minify | fingerprint }}