⚡ Improve page scripts configuration files.

assets/js/config.js

@@ -1,92 +1,67 @@
 if (!window.NexT) window.NexT = {};
 
 (function() {
+  const className = 'next-config';
 
-  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 }},
-    "version"    : "{{ .Site.Data.config.version }}",
-    "sidebar"    : {{ .Site.Params.sidebar | jsonify }},
-    "copybtn"    : {{ .Site.Params.codeblock.copyBtn }},
-    "bookmark"   : {{ .Site.Params.bookmark | jsonify }},
-    "comments"   : {{ .Site.Params.comments | jsonify }},
-    "lazyload"   : {{ .Site.Params.lazyload }},
-    "pangu"      : {{ .Site.Params.pangu }},
-    "stickytabs" : {{ .Site.Params.tabs.sticky }},
-    "motion"     : {{ .Site.Params.motion | jsonify }},
-    // TODO Find prismjs 
-    //"prism"    : "",
-    "i18n"       : {
-      "placeholder"  : "",
-      "empty"        : "${query}",
-      "hits_time"    : "'${hits}', '${time}'",
-      "hits"         : "${hits}"
-    },
-    {{- if .Site.Params.algoliaSearch.enable }}
-    // TODO
-    "algolia"    : {
-      "appID"        : "",
-      "apiKey"       : "",
-      "indexName"    : "",
-      "hits"         : ""
+  const staticConfig = {};
+  let variableConfig = {};
+
+  const parse = text => JSON.parse(text || '{}');
+
+  const update = name => {
+    const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+    if (!targetEle) return;
+    const parsedConfig = parse(targetEle.text);
+    if (name === 'main') {
+      Object.assign(staticConfig, parsedConfig);
+    } else {
+      variableConfig[name] = parsedConfig;
     }
-    {{- end }}
-    {{- if .Site.Params.localSearch.enable }}
-    // TODO
-    "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 }}",
-    "isHome"     : {{ .IsHome }},
-    "isPage"     : {{ .IsPage }}
   };
 
-  window.NexT.CONFIG = new Proxy(siteConfig, {});
+  update('main');
 
+  window.NexT.CONFIG = new Proxy({}, {
+    get(overrideConfig, name) {
+      let existing;
+      if (name in staticConfig) {
+        existing = staticConfig[name];
+      } else {
+        if (!(name in variableConfig)) update(name);
+        existing = variableConfig[name];
+      }
+
+      // For unset override and mixable existing
+      if (!(name in overrideConfig) && typeof existing === 'object') {
+        // Get ready to mix.
+        overrideConfig[name] = {};
+      }
+
+      if (name in overrideConfig) {
+        const override = overrideConfig[name];
+
+        // When mixable
+        if (typeof override === 'object' && typeof existing === 'object') {
+          // Mix, proxy changes to the override.
+          return new Proxy({ ...existing, ...override }, {
+            set(target, prop, value) {
+              target[prop] = value;
+              override[prop] = value;
+              return true;
+            }
+          });
+        }
+
+        return override;
+      }
+
+      // Only when not mixable and override hasn't been set.
+      return existing;
+    }
+  });
+
+  // TODO
+  // document.addEventListener('pjax:success', () => {
+  //   variableConfig = {};
+  // });
 })();

assets/js/next-boot.js

@@ -33,7 +33,7 @@ NexT.boot.registerEvents = function() {
 
 NexT.boot.refresh = function() {
 
-  if (!NexT.CONFIG.isPage) return;
+  if (!NexT.CONFIG.page.isPage) return;
   /**
    * Register JS handlers by condition option.
    * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.

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

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

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

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

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

@@ -1,12 +1,12 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const element = '#lv-container';
-  if (!NexT.CONFIG.comments.enable 
-    || !NexT.CONFIG.livere
+  if (!NexT.CONFIG.page.comments 
+    || !NexT.CONFIG.page.livere
     || !NexT.utils.checkDOMExist(element)) return; 
 
   NexT.utils.loadComments(element).then(() => {
-    NexT.utils.getScript(NexT.CONFIG.livere.js, {
+    NexT.utils.getScript(NexT.CONFIG.page.livere.js, {
       attributes: {
         async: true
       },

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

@@ -1,18 +1,18 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const element = '.utterances-container';
-  if (!NexT.CONFIG.comments.enable 
-    || !NexT.CONFIG.utterances
+  if (!NexT.CONFIG.page.comments 
+    || !NexT.CONFIG.page.utterances
     || !NexT.utils.checkDOMExist(element)) return;
 
   const { 
     repo, 
     issueterm, 
     label, 
-    theme } = NexT.CONFIG.utterances.config;
+    theme } = NexT.CONFIG.page.utterances.cfg;
 
   NexT.utils.loadComments(element)
-    .then(() => NexT.utils.getScript(NexT.CONFIG.utterances.js, {
+    .then(() => NexT.utils.getScript(NexT.CONFIG.page.utterances.js, {
       attributes: {
         'async'       : true,
         'crossorigin' : 'anonymous',

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

@@ -1,8 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const element = '.waline-container';
-  if (!NexT.CONFIG.comments.enable 
-    || !NexT.CONFIG.waline
+  if (!NexT.CONFIG.page.comments 
+    || !NexT.CONFIG.page.waline
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
@@ -13,13 +13,13 @@ document.addEventListener('DOMContentLoaded', () => {
     requiredmeta, 
     serverurl, 
     wordlimit
-  } = NexT.CONFIG.waline.config;
+  } = NexT.CONFIG.page.waline.cfg;
 
 
-  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
+  const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.css);
   NexT.utils.getStyle(waline_css, null);
 
-  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js);
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js);
 
   const locale = {
     placeholder: placeholder
@@ -39,7 +39,7 @@ document.addEventListener('DOMContentLoaded', () => {
         wordLimit     : wordlimit,
         requiredMeta  : requiredmeta,
         serverURL     : serverurl,
-        lang          : NexT.CONFIG.lang,
+        lang          : NexT.CONFIG.page.lang,
         dark          : "auto"
       });
 

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

@@ -1,9 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
 
   const element = '.addthis_inline_share_toolbox';
-  if (!NexT.CONFIG.addthis || !NexT.utils.checkDOMExist(element)) return; 
+  if (!NexT.CONFIG.page.addthis || !NexT.utils.checkDOMExist(element)) return; 
 
-  const addthis_js = NexT.CONFIG.addthis.js + '?pubid=' + NexT.CONFIG.addthis.config.pubid;
+  const addthis_js = NexT.CONFIG.page.addthis.js + '?pubid=' + NexT.CONFIG.page.addthis.cfg.pubid;
 
   NexT.utils.loadComments(element).then(() => {
     NexT.utils.getScript(addthis_js, {

assets/js/utils.js

@@ -440,7 +440,7 @@ NexT.utils = {
     }
     return new Promise(resolve => {
       const element = document.querySelector(selector);
-      if (!NexT.CONFIG.comments.lazyload || !element) {
+      if (!element) {
         resolve();
         return;
       }

layouts/partials/_thirdparty/analytics/51la.html

@@ -4,10 +4,12 @@
       
     script.charset = "UTF-8";
     script.id      = "LA_COLLECT";
-    script.src     = "{{ .ctx.Site.Data.resources.analytics.la }}";
+    script.src     = "{{ .Site.Data.resources.analytics.la }}";
     script.async   = "true"
     script.onload = function() {
-      LA.init({ id: "{{ .id }}",ck: "{{ .id }}", autoTrack:true });
+    {{ with .Site.Params.analytics.laId }}
+      LA.init({ id: "{{ . }}",ck: "{{ . }}", autoTrack:true });
+    {{ end }}
     }
 
   document.head.appendChild(script);

layouts/partials/head.html

@@ -5,4 +5,6 @@
 {{- partial "head/facebook.html" . }}
 {{- partial "head/verify.html" . }}
 {{- partialCached "head/style.html" . }}
+{{- partial "head/config.html" . }}
 {{- partialCached "head/analytics.html" . }}
+

layouts/partials/head/analytics.html

@@ -1,6 +1,3 @@
-{{ $ctx := . }}
-{{- with .Site.Params.analytics }}
-{{- if isset . "laid" }}
-  {{ partial "_thirdparty/analytics/51la.html" (dict "ctx" $ctx "id" .laId) }}  
-{{- end }}
+{{- if isset .Site.Params.analytics "laid" }}
+  {{ partial "_thirdparty/analytics/51la.html" . }}  
 {{- end }}

layouts/partials/head/config.html

@@ -0,0 +1,63 @@
+<script class="next-config" data-name="page" type="application/json">
+{{- $pageCnf := dict }}
+{{- $pageCnf = merge $pageCnf (dict
+  "isHome"    .IsHome
+  "isPage"    .IsPage
+  "lang"      .Site.LanguageCode
+  "comments"  .Site.Params.comments.enable
+  "permalink" (.Page.Permalink | absURL)
+  "path"      (.Page.Permalink | path.Base)
+  "title"     .Page.Title
+) }}
+{{- if .IsPage }}
+
+{{- with .Site.Params.waline }}
+{{- $waline := dict 
+  "js"  $.Site.Data.resources.waline.js
+  "css" $.Site.Data.resources.waline.css
+  "cfg" .
+}}
+{{- $pageCnf = merge $pageCnf (dict "waline" $waline) }}
+{{- end }} 
+
+{{- with .Site.Params.giscus }}
+{{- $giscus := dict 
+  "js"  $.Site.Data.resources.giscus.js
+  "cfg" .
+}}
+{{- $pageCnf = merge $pageCnf (dict "giscus" $giscus) }}  
+{{- end }}
+
+{{- with .Site.Params.artalk }}
+{{- $artalk := dict 
+  "js"  $.Site.Data.resources.artalk.js
+  "css" $.Site.Data.resources.artalk.css
+  "cfg" .
+}}
+{{- $pageCnf = merge $pageCnf (dict "artalk" $artalk) }}
+{{- end }}
+
+{{- with .Site.Params.livere }}
+{{- $livere := dict "js" $.Site.Data.resources.livere.js }}
+{{- $pageCnf = merge $pageCnf (dict "livere" $livere) }}
+{{- end }}
+
+{{- with .Site.Params.utterances }}
+{{- $utterances := dict 
+  "js"  $.Site.Data.resources.utterances.js
+  "cfg" .
+}}
+{{- $pageCnf = merge $pageCnf (dict "utterances" $utterances) }}
+{{- end }}
+
+{{- with .Site.Params.addThisId }}
+{{- $addthis := dict 
+  "js"  $.Site.Data.resources.addthis.js
+  "cfg" (dict "pubid" .)
+}}
+{{- $pageCnf = merge $pageCnf (dict "addthis" $addthis) }}
+{{- end }}
+
+{{- end }}
+{{- $pageCnf -}}
+</script>

layouts/partials/init.html

@@ -1,18 +1,37 @@
 {{/* Use to defind global variables */}}
 
-{{- if not hugo.IsExtended }}
-{{- warnf "Hugo NexT 主题使用了 SCSS 框架，请到官方地址下载 Hugo Extended 版本：https://github.com/gohugoio/hugo/releases" -}}  
-{{- errorf "Because that use SCSS framework in Hugo NexT, Please download Hugo extended version on offical site: https://github.com/gohugoio/hugo/releases" -}}  
-{{- end }}
+{{ if not hugo.IsExtended }}
+{{ warnf "Hugo NexT 主题使用了 SCSS 框架，请到官方地址下载 Hugo Extended 版本：https://github.com/gohugoio/hugo/releases" }}  
+{{ errorf "Because that use SCSS framework in Hugo NexT, Please download Hugo extended version on offical site: https://github.com/gohugoio/hugo/releases" }}  
+{{ end }}
 
-{{- $globalVars := newScratch -}}
+{{ $globalVars := newScratch }}
 
-{{- $globalVars.Set "postsCount" (len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections)) -}}
-{{- $globalVars.Set "catsCount" (len .Site.Taxonomies.categories) -}}
-{{- $globalVars.Set "tagsCount" (len .Site.Taxonomies.tags)  -}}
+{{ $globalVars.Set "postsCount" (len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections)) }}
+{{ $globalVars.Set "catsCount" (len .Site.Taxonomies.categories) }}
+{{ $globalVars.Set "tagsCount" (len .Site.Taxonomies.tags)  }}
 
-{{- $vendor := .Site.Params.vendors.plugins -}}
-{{- $router := index .Site.Data.resources.vendors $vendor -}}
-{{- $globalVars.Set "router" $router -}}
+{{ $vendor := .Site.Params.vendors.plugins }}
+{{ $router := index .Site.Data.resources.vendors $vendor }}
+{{ $globalVars.Set "router" $router }}
 
-{{- return $globalVars.Values -}}
+{{ $vendorDict := dict
+  "plugins" $vendor
+  "router"  $router
+}}
+{{ $config := dict
+  "hostname" .Site.BaseURL
+  "root"     "/"
+  "vendor"   $vendorDict
+  "darkmode" .Site.Params.darkmode
+  "version"  .Site.Data.config.version
+  "scheme"   .Site.Params.scheme
+  "sidebar"  .Site.Params.sidebar
+  "copybtn"  .Site.Params.codeblock.copyBtn
+  "bookmark" .Site.Params.bookmark
+  "lazyload" .Site.Params.lazyload
+  "motion"   .Site.Params.motion
+}}
+{{ $globalVars.Set "config" $config }}
+
+{{ return $globalVars.Values }}

layouts/partials/scripts.html

@@ -17,7 +17,9 @@
   <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
 {{- end }}
 
-{{- $config := resources.Get "js/config.js" | resources.ExecuteAsTemplate "config.js" . }}
+<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
+
+{{- $config := resources.Get "js/config.js" }}
 {{- $motion := resources.Get "js/motion.js" }}
 {{- $boot := resources.Get "js/next-boot.js" }}
 {{- $utils := resources.Get "js/utils.js" }}
@@ -62,7 +64,7 @@
 {{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
 {{- $nextjs = $nextjs | append $utterancesjs }}
 {{- end }}
-{{- $nextjs = $nextjs | resources.Concat "js/hugo-next.js"}}
+{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
 {{ if hugo.IsProduction }}
 {{- $nextjs = $nextjs | minify | fingerprint }}
 {{ end }}