From 31f6e21671f3699594a15fd8811d0eb398cf9851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Fri, 22 Jul 2022 17:16:34 +0800 Subject: [PATCH] :zap: Improve page scripts configuration files. --- assets/js/config.js | 143 ++++++++---------- assets/js/next-boot.js | 2 +- assets/js/third-party/comments/artalk.js | 16 +- assets/js/third-party/comments/giscus.js | 10 +- assets/js/third-party/comments/livere.js | 6 +- assets/js/third-party/comments/utterances.js | 8 +- assets/js/third-party/comments/waline.js | 12 +- assets/js/third-party/share/addthis.js | 4 +- assets/js/utils.js | 2 +- .../partials/_thirdparty/analytics/51la.html | 10 +- layouts/partials/head.html | 4 +- layouts/partials/head/analytics.html | 7 +- layouts/partials/head/config.html | 63 ++++++++ layouts/partials/init.html | 43 ++++-- layouts/partials/scripts.html | 6 +- 15 files changed, 198 insertions(+), 138 deletions(-) create mode 100644 layouts/partials/head/config.html diff --git a/assets/js/config.js b/assets/js/config.js index ada03fb..1ca46e6 100644 --- a/assets/js/config.js +++ b/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 = {}; + // }); })(); \ No newline at end of file diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index 1eb0443..f9decbc 100644 --- a/assets/js/next-boot.js +++ b/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. diff --git a/assets/js/third-party/comments/artalk.js b/assets/js/third-party/comments/artalk.js index a037939..19e1401 100644 --- a/assets/js/third-party/comments/artalk.js +++ b/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' }); diff --git a/assets/js/third-party/comments/giscus.js b/assets/js/third-party/comments/giscus.js index 18c1995..a67bd83 100644 --- a/assets/js/third-party/comments/giscus.js +++ b/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) diff --git a/assets/js/third-party/comments/livere.js b/assets/js/third-party/comments/livere.js index 1dd9d53..8d786f6 100644 --- a/assets/js/third-party/comments/livere.js +++ b/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 }, diff --git a/assets/js/third-party/comments/utterances.js b/assets/js/third-party/comments/utterances.js index 3cf9cc1..e8e7f60 100644 --- a/assets/js/third-party/comments/utterances.js +++ b/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', diff --git a/assets/js/third-party/comments/waline.js b/assets/js/third-party/comments/waline.js index 6f52ac8..917c922 100644 --- a/assets/js/third-party/comments/waline.js +++ b/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" }); diff --git a/assets/js/third-party/share/addthis.js b/assets/js/third-party/share/addthis.js index 1a498b2..4fe8615 100644 --- a/assets/js/third-party/share/addthis.js +++ b/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, { diff --git a/assets/js/utils.js b/assets/js/utils.js index 3edb066..a53270e 100644 --- a/assets/js/utils.js +++ b/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; } diff --git a/layouts/partials/_thirdparty/analytics/51la.html b/layouts/partials/_thirdparty/analytics/51la.html index e64eb90..07e9221 100644 --- a/layouts/partials/_thirdparty/analytics/51la.html +++ b/layouts/partials/_thirdparty/analytics/51la.html @@ -4,12 +4,14 @@ 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); - }); + document.head.appendChild(script); +}); diff --git a/layouts/partials/head.html b/layouts/partials/head.html index a545428..aac885c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -5,4 +5,6 @@ {{- partial "head/facebook.html" . }} {{- partial "head/verify.html" . }} {{- partialCached "head/style.html" . }} -{{- partialCached "head/analytics.html" . }} \ No newline at end of file +{{- partial "head/config.html" . }} +{{- partialCached "head/analytics.html" . }} + diff --git a/layouts/partials/head/analytics.html b/layouts/partials/head/analytics.html index 77416e5..37a5b2f 100644 --- a/layouts/partials/head/analytics.html +++ b/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) }} +{{- if isset .Site.Params.analytics "laid" }} + {{ partial "_thirdparty/analytics/51la.html" . }} {{- end }} -{{- end }} \ No newline at end of file diff --git a/layouts/partials/head/config.html b/layouts/partials/head/config.html new file mode 100644 index 0000000..1c8b50c --- /dev/null +++ b/layouts/partials/head/config.html @@ -0,0 +1,63 @@ + \ No newline at end of file diff --git a/layouts/partials/init.html b/layouts/partials/init.html index c572261..a5b8c6c 100644 --- a/layouts/partials/init.html +++ b/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 }} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 1a87d20..0b4a23c 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -17,7 +17,9 @@ {{- end }} -{{- $config := resources.Get "js/config.js" | resources.ExecuteAsTemplate "config.js" . }} + + +{{- $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 }}