From 0d1b00f7b0291b1c2bcf7ed3d7abc48e558ba014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Thu, 27 Oct 2022 15:57:42 +0800 Subject: [PATCH] :zap: :fire: Refactor struct & code for loading 3rd scripts. --- .../components/third-party/search.scss | 22 ++- assets/js/config.js | 9 ++ assets/js/third-party/others/lawidget.js | 16 ++ assets/js/third-party/others/math.js | 38 +++++ assets/js/third-party/others/mermaid.js | 15 ++ assets/js/third-party/others/translate.js | 9 ++ assets/js/utils.js | 4 +- data/resources.yaml | 20 +-- layouts/partials/_funs/get_plugin.html | 11 ++ .../partials/_thirdparty/analytics/51la.html | 28 ++-- .../partials/_thirdparty/analytics/baidu.html | 16 +- .../_thirdparty/analytics/busuanzi.html | 16 +- .../_thirdparty/analytics/google.html | 28 ++-- layouts/partials/_thirdparty/others/math.html | 28 ---- .../partials/_thirdparty/others/mermaid.html | 15 -- layouts/partials/head/config.html | 28 +++- layouts/partials/init.html | 8 + layouts/partials/scripts.html | 24 +-- layouts/partials/scripts/global.html | 140 +++++++++++------- layouts/partials/scripts/plugins.html | 20 +-- layouts/partials/sidebar/siteinfo.html | 17 +-- 21 files changed, 302 insertions(+), 210 deletions(-) create mode 100644 assets/js/third-party/others/lawidget.js create mode 100644 assets/js/third-party/others/math.js create mode 100644 assets/js/third-party/others/mermaid.js create mode 100644 assets/js/third-party/others/translate.js create mode 100644 layouts/partials/_funs/get_plugin.html delete mode 100644 layouts/partials/_thirdparty/others/math.html delete mode 100644 layouts/partials/_thirdparty/others/mermaid.html diff --git a/assets/css/_common/components/third-party/search.scss b/assets/css/_common/components/third-party/search.scss index a3416f6..33d16fd 100644 --- a/assets/css/_common/components/third-party/search.scss +++ b/assets/css/_common/components/third-party/search.scss @@ -24,11 +24,13 @@ .search-popup { background: var(--card-bg-color); border-radius: 5px; - height: 80%; + height: 60%; margin: auto; transform: scale(0); transition: transform .4s; width: 700px; + //display: flex; + //flex-wrap: wrap; .search-active & { transform: scale(1); @@ -75,7 +77,10 @@ } .search-result-container { - height: calc(100% - 55px); + /* height: calc(100% - 65px); + @include mobile() { + height: calc(100% - 105px); + } */ overflow: auto; padding: 0px 25px; } @@ -89,23 +94,28 @@ .search-meta-info { height: 26px; - display: flex; padding: 5px 0; .search-hit-stats { - font-size: $font-size-smaller; - width: 65%; + font-size: $font-size-smaller; padding: 2px 8px; + float: left; } .search-vendor { - width: 34%; text-align: right; font-size: $font-size-small; + @include mobile() { + font-size: $font-size-smaller; + } font-weight: bold; + float: right; img { width: 68px; + @include mobile() { + width: 48px; + } margin: 5px; vertical-align: middle; display: inline; diff --git a/assets/js/config.js b/assets/js/config.js index 00da52e..41169df 100644 --- a/assets/js/config.js +++ b/assets/js/config.js @@ -31,6 +31,15 @@ NexT.plugins.share.register = function() { }; } +// Defined other plugin & add register event +NexT.plugins.others = {} +NexT.plugins.others.register = function() { + for(var o in NexT.plugins.others) { + if (o === 'register') continue; + eval('NexT.plugins.others.'+o)(); + }; +} + // Add event to register all third party plugins NexT.plugins.register = function() { for(var p in NexT.plugins) { diff --git a/assets/js/third-party/others/lawidget.js b/assets/js/third-party/others/lawidget.js new file mode 100644 index 0000000..5e1598e --- /dev/null +++ b/assets/js/third-party/others/lawidget.js @@ -0,0 +1,16 @@ +/* 51La sidebar data widget */ +NexT.plugins.others.lawidget = function() { + const element = '#siteinfo-card-widget'; + const lawt_js = NexT.CONFIG.lawidget.js.replace('laId', NexT.CONFIG.lawidget.id); + + NexT.utils.lazyLoadComponent(element, function () { + NexT.utils.getScript(lawt_js,{ + attributes: { + id: 'LA-DATA-WIDGET', + crossorigin: 'anonymous', + charset: 'UTF-8', + defer: true + } + }); + }); +} \ No newline at end of file diff --git a/assets/js/third-party/others/math.js b/assets/js/third-party/others/math.js new file mode 100644 index 0000000..5ec5639 --- /dev/null +++ b/assets/js/third-party/others/math.js @@ -0,0 +1,38 @@ +/* Math render plugin */ +NexT.plugins.others.math = function() { + const render = NexT.CONFIG.page.math.render; + + if (render === 'mathjax') { + const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js); + NexT.utils.getScript(render_js, function(){ + window.MathJax = { + tex: { + inlineMath: [["$", "$"]], + } + }; + }); + } + + if (render === 'katex') { + const render_css = NexT.utils.getCDNResource(NexT.CONFIG.page.math.css); + NexT.utils.getStyle(render_css); + const render_js_list = NexT.CONFIG.page.math.js; + render_js_list.forEach(js => { + const js_loader = NexT.utils.getScript(NexT.utils.getCDNResource(js)); + if(js.name === 'auto-render') { + js_loader.then(function(){ + renderMathInElement(document.body, { + delimiters: [ + {left: '$$', right: '$$', display: true}, + {left: '$', right: '$', display: false}, + {left: '\\(', right: '\\)', display: false}, + {left: '\\[', right: '\\]', display: true} + ], + + throwOnError : false + }) + }); + } + }); + } +} \ No newline at end of file diff --git a/assets/js/third-party/others/mermaid.js b/assets/js/third-party/others/mermaid.js new file mode 100644 index 0000000..69a4a93 --- /dev/null +++ b/assets/js/third-party/others/mermaid.js @@ -0,0 +1,15 @@ +/* Mermaid plugin */ +NexT.plugins.others.mermaid = function() { + const mermaid_js = NexT.utils.getCDNResource(NexT.CONFIG.page.mermaid.js); + + NexT.utils.getScript(mermaid_js, function(){ + mermaid.initialize({ + sequence: { + showSequenceNumbers: true, + actorMargin: 50, + diagramMarginX:10, + diagramMarginY:10 + } + }); + }); +} \ No newline at end of file diff --git a/assets/js/third-party/others/translate.js b/assets/js/third-party/others/translate.js new file mode 100644 index 0000000..6dee18e --- /dev/null +++ b/assets/js/third-party/others/translate.js @@ -0,0 +1,9 @@ +/* Google translate plugin */ +NexT.plugins.others.translate = function() { + const element = '#gtranslate'; + if (!NexT.utils.checkDOMExist(element)) return; + NexT.utils.lazyLoadComponent(element, function() { + window.translateelement_styles='/css/google-translate.min.css'; + NexT.utils.getScript('/js/third-party/google-translate.min.js'); + }); +} \ No newline at end of file diff --git a/assets/js/utils.js b/assets/js/utils.js index 31b548d..f9c66e1 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -179,9 +179,10 @@ NexT.utils = { getCDNResource: function (res) { let { plugins, router } = NexT.CONFIG.vendor; - let { name, version, file, alias } = res; + let { name, version, file, alias, alias_name } = res; let npm_name = name; + if (alias_name) npm_name = alias_name; let res_src = ''; switch (plugins) { case 'cdnjs': @@ -522,7 +523,6 @@ NexT.utils = { link.setAttribute('href', src); const head = (parent || document.head); - console.log(head) if (position === 'before') { head.prepend(link); } else { diff --git a/data/resources.yaml b/data/resources.yaml index 9159733..68d8b58 100644 --- a/data/resources.yaml +++ b/data/resources.yaml @@ -87,27 +87,27 @@ plugins: # 数学公式渲染 mathjax: js: - - name: mathjax - version: 3.2.0 - file: es5/tex-mml-chtml.js + name: mathjax + version: 3.2.0 + file: es5/tex-mml-chtml.js katex: js: - name: katex version: 0.16.0 file: dist/katex.min.js - name: auto-render - alias2: katex + alias_name: katex version: 0.16.0 file: dist/contrib/auto-render.min.js css: - - name: katex - version: 0.16.0 - file: dist/katex.min.css + name: katex + version: 0.16.0 + file: dist/katex.min.css # 画图渲染 mermaid: js: - - name: mermaid - version: 9.1.7 - file: dist/mermaid.min.js + name: mermaid + version: 9.1.7 + file: dist/mermaid.min.js diff --git a/layouts/partials/_funs/get_plugin.html b/layouts/partials/_funs/get_plugin.html new file mode 100644 index 0000000..e25a3ef --- /dev/null +++ b/layouts/partials/_funs/get_plugin.html @@ -0,0 +1,11 @@ +{{/* Get third party js plugins resource */}} + +{{ $pluginPath := printf "%s/%s/%s" "js/third-party" .class .plugin }} +{{ $targetPath := printf "js/%s" .plugin }} +{{ $plugin := resources.Get $pluginPath | resources.ExecuteAsTemplate $targetPath .ctx }} + +{{ if hugo.IsProduction }} +{{ $plugin = $plugin | minify | fingerprint }} +{{ end }} + + \ No newline at end of file diff --git a/layouts/partials/_thirdparty/analytics/51la.html b/layouts/partials/_thirdparty/analytics/51la.html index 63d0886..8946f02 100644 --- a/layouts/partials/_thirdparty/analytics/51la.html +++ b/layouts/partials/_thirdparty/analytics/51la.html @@ -1,17 +1,17 @@ diff --git a/layouts/partials/_thirdparty/analytics/baidu.html b/layouts/partials/_thirdparty/analytics/baidu.html index 7795e0c..c68fc11 100644 --- a/layouts/partials/_thirdparty/analytics/baidu.html +++ b/layouts/partials/_thirdparty/analytics/baidu.html @@ -1,11 +1,11 @@ \ No newline at end of file diff --git a/layouts/partials/_thirdparty/analytics/busuanzi.html b/layouts/partials/_thirdparty/analytics/busuanzi.html index 2bdda46..c61ee65 100644 --- a/layouts/partials/_thirdparty/analytics/busuanzi.html +++ b/layouts/partials/_thirdparty/analytics/busuanzi.html @@ -1,11 +1,11 @@ diff --git a/layouts/partials/_thirdparty/analytics/google.html b/layouts/partials/_thirdparty/analytics/google.html index 103dd4c..2bbc612 100644 --- a/layouts/partials/_thirdparty/analytics/google.html +++ b/layouts/partials/_thirdparty/analytics/google.html @@ -1,18 +1,18 @@ \ No newline at end of file diff --git a/layouts/partials/_thirdparty/others/math.html b/layouts/partials/_thirdparty/others/math.html deleted file mode 100644 index e1eb956..0000000 --- a/layouts/partials/_thirdparty/others/math.html +++ /dev/null @@ -1,28 +0,0 @@ - -{{ $math := .Params.math | default .Site.Params.math }} -{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" $math) }} -{{ if eq $math "katex" }} - -{{ end }} -{{ if eq $math "mathjax" }} - -{{ end }} \ No newline at end of file diff --git a/layouts/partials/_thirdparty/others/mermaid.html b/layouts/partials/_thirdparty/others/mermaid.html deleted file mode 100644 index bd61ca9..0000000 --- a/layouts/partials/_thirdparty/others/mermaid.html +++ /dev/null @@ -1,15 +0,0 @@ -{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" "mermaid") }} - - - diff --git a/layouts/partials/head/config.html b/layouts/partials/head/config.html index be3caaf..6b559ff 100644 --- a/layouts/partials/head/config.html +++ b/layouts/partials/head/config.html @@ -1,5 +1,4 @@ - \ No newline at end of file + +{{/* Append mermaid plugin */}} +{{ if .Params.mermaid }} +{{ $mermaid := dict + "js" .Site.Data.resources.plugins.mermaid.js +}} +{{ $pageCfg = merge $pageCfg (dict "mermaid" $mermaid) }} +{{ end }} + +{{/* Append math render plugin */}} +{{ with or .Params.math .Site.Params.math }} +{{ $math := dict + "render" . + "js" (index $.Site.Data.resources.plugins .).js +}} + +{{ if eq . "katex" }} + {{ $math = merge $math ( dict "css" $.Site.Data.resources.plugins.katex.css ) }} +{{ end }} + +{{ $pageCfg = merge $pageCfg (dict "math" $math) }} +{{ end }} + + \ No newline at end of file diff --git a/layouts/partials/init.html b/layouts/partials/init.html index 431b4a9..e286081 100644 --- a/layouts/partials/init.html +++ b/layouts/partials/init.html @@ -114,6 +114,14 @@ {{ $config = merge $config (dict "addthis" $addthis) }} {{ end }} +{{ with .Site.Params.analytics.laId }} +{{ $lawidget := dict + "js" $.Site.Data.resources.analytics.laWidget + "id" . +}} +{{ $config = merge $config (dict "lawidget" $lawidget) }} +{{ end }} + {{ $globalVars.Set "config" $config }} {{ with .Site.Params.customFilePath }} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 5ad58aa..9f052a3 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,22 +1,2 @@ -{{ partialCached "scripts/global.html" . }} - -{{ if or .Params.math .Site.Params.math }} - {{ partialCached "_thirdparty/others/math.html" . }} -{{ end }} - -{{ if .Params.mermaid }} - {{ partialCached "_thirdparty/others/mermaid.html" . }} -{{ end }} - -{{ if .Site.Params.footer.translate }} - -{{ end }} \ No newline at end of file +{{- partialCached "scripts/global.html" . -}} +{{- partial "scripts/plugins.html" . -}} \ No newline at end of file diff --git a/layouts/partials/scripts/global.html b/layouts/partials/scripts/global.html index 384c6d9..676297c 100644 --- a/layouts/partials/scripts/global.html +++ b/layouts/partials/scripts/global.html @@ -1,69 +1,97 @@ -{{- $jsRes := .Site.Data.resources.js }} -{{- $vendor := .Site.Params.vendors.plugins }} -{{- $router := .Scratch.Get "router" }} -{{- range $jsRes }} +{{/* Loading all page need scripts */}} +{{ $jsRes := .Site.Data.resources.js }} +{{ $vendor := .Site.Params.vendors.plugins }} +{{ $router := .Scratch.Get "router" }} +{{ range $jsRes }} {{ $pluginJS := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }} -{{- end }} +{{ end }} - + -{{- $config := resources.Get "js/config.js" }} -{{- $utils := resources.Get "js/utils.js" }} -{{- $boot := resources.Get "js/next-boot.js" }} -{{- $nextjs := (slice $config $utils $boot ) }} -{{- if .Site.Params.motion.enable }} +{{/* Core scripts */}} +{{ $config := resources.Get "js/config.js" }} +{{ $utils := resources.Get "js/utils.js" }} +{{ $boot := resources.Get "js/next-boot.js" }} +{{ $nextjs := slice $config $utils $boot }} + +{{/* Animation scripts */}} +{{ if .Site.Params.motion.enable }} {{ $motionjs := resources.Get "js/motion.js" }} {{ $nextjs = $nextjs | append $motionjs }} -{{- end }} -{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }} +{{ end }} + +{{/* Special scheme scripts */}} +{{ if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }} {{ $musejs := resources.Get "js/schemes/muse.js" }} {{ $nextjs = $nextjs | append $musejs }} -{{- end }} -{{- if .Site.Params.bookmark.enable }} -{{- $bookmarkjs := resources.Get "js/bookmark.js" }} -{{- $nextjs = $nextjs | append $bookmarkjs }} -{{- end }} -{{- if .Site.Params.pjax }} -{{- $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 }} -{{- if .Site.Params.localSearch.enable }} -{{- $search := resources.Get "js/third-party/search/local.js" }} -{{- $nextjs = $nextjs | append $search }} -{{ end }} -{{- if .Site.Params.algoliaSearch.enable }} -{{- $search := resources.Get "js/third-party/search/algolia.js" }} -{{- $nextjs = $nextjs | append $search }} {{ end }} -{{- $nextjs = $nextjs | resources.Concat "js/main.js"}} +{{/* Bookmark scripts */}} +{{ if .Site.Params.bookmark.enable }} +{{ $bookmarkjs := resources.Get "js/bookmark.js" }} +{{ $nextjs = $nextjs | append $bookmarkjs }} +{{ end }} + +{{/* Pjax scripts */}} +{{ if .Site.Params.pjax }} +{{ $pjaxjs := resources.Get "js/pjax.js" }} +{{ $nextjs = $nextjs | append $pjaxjs }} +{{ end }} + +{{/* Share scripts */}} +{{ if isset .Site.Params "addthisid" }} +{{ $addthisjs := resources.Get "js/third-party/share/addthis.js" }} +{{ $nextjs = $nextjs | append $addthisjs }} +{{ end }} + +{{/* Comments scripts */}} +{{ 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 }} + +{{/* Search engin scripts */}} +{{ if .Site.Params.localSearch.enable }} +{{ $search := resources.Get "js/third-party/search/local.js" }} +{{ $nextjs = $nextjs | append $search }} +{{ end }} +{{ if .Site.Params.algoliaSearch.enable }} +{{ $search := resources.Get "js/third-party/search/algolia.js" }} +{{ $nextjs = $nextjs | append $search }} +{{ end }} + +{{/* Other not useful scripts, eg: 51la widget, translate */}} +{{ with .Site.Params.siteState.statistic }} + {{ if and .enable (eq .plugin "51la") }} + {{ $lawt := resources.Get "js/third-party/others/lawidget.js" }} + {{ $nextjs = $nextjs | append $lawt }} + {{ end }} +{{ end }} +{{ if .Site.Params.footer.translate }} +{{ $translate := resources.Get "js/third-party/others/translate.js" }} +{{ $nextjs = $nextjs | append $translate }} +{{ end }} + + +{{ $nextjs = $nextjs | resources.Concat "js/main.js"}} {{ if hugo.IsProduction }} -{{- $nextjs = $nextjs | minify | fingerprint }} +{{ $nextjs = $nextjs | minify | fingerprint }} {{ end }} - \ No newline at end of file diff --git a/layouts/partials/scripts/plugins.html b/layouts/partials/scripts/plugins.html index ddb791a..4587138 100644 --- a/layouts/partials/scripts/plugins.html +++ b/layouts/partials/scripts/plugins.html @@ -1,17 +1,9 @@ +{{/* Defind loading plugin scripts which only need in pages */}} -{{- $vendor := .vendor }} -{{- $router := .router }} -{{- $res := (index .res .index) }} -{{- $cssRes := $res.css }} -{{ if $cssRes }} - {{ range $cssRes }} - {{ $css := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }} - - {{ end }} -{{ end }} -{{- $jsRes := $res.js }} -{{ range $jsRes }} - {{ $js := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }} - +{{ if or .Params.math .Site.Params.math }} + {{ partial "_funs/get_plugin.html" (dict "ctx" . "class" "others" "plugin" "math.js") }} {{ end }} +{{ if .Params.mermaid }} + {{ partial "_funs/get_plugin.html" (dict "ctx" . "class" "others" "plugin" "mermaid.js") }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/sidebar/siteinfo.html b/layouts/partials/sidebar/siteinfo.html index 65aa8f4..7024bdd 100644 --- a/layouts/partials/sidebar/siteinfo.html +++ b/layouts/partials/sidebar/siteinfo.html @@ -1,5 +1,5 @@ {{ $scratch := partialCached "_funs/cal_siteinfo.html" . }} -
+