feat: support host customization for third-party libraries (#389)

Co-authored-by: reuixiy <reuixiy@gmail.com>
reuixiy · Jul 2, 2022 · a6111f9 · a6111f9
1 parent 790d2ab
commit a6111f9
Show file tree

Hide file tree

Showing 18 changed files with 295 additions and 41 deletions.
diff --git a/assets/js/copy.js b/assets/js/copy.js
@@ -1,3 +1,5 @@
+{{ $src := partial "utils/lib.html" (dict "type" "clipboard") }}
+
 // Copy Button for Code Blocks
 
 // References
@@ -9,7 +11,7 @@ window.addEventListener("DOMContentLoaded", event => {
     const copiedText = '{{ i18n "copied" }}';
 
     document.querySelectorAll('.post-body > pre').forEach((e) => {
-        let div = document.createElement('div');
+        const div = document.createElement('div');
         e.parentNode.replaceChild(div, e);
         div.appendChild(e);
     });
@@ -25,10 +27,11 @@ window.addEventListener("DOMContentLoaded", event => {
             button.type = 'button';
             button.innerText = copyText;
 
+            let codeBlock;
             if (containerEl.classList.contains('lntable')) {
-                var codeBlock = containerEl.querySelectorAll('.lntd')[1];
+                codeBlock = containerEl.querySelectorAll('.lntd')[1];
             } else {
-                var codeBlock = containerEl.querySelector('code');
+                codeBlock = containerEl.querySelector('code');
             }
 
             button.addEventListener('click', () => {
@@ -67,7 +70,7 @@ window.addEventListener("DOMContentLoaded", event => {
         addCopyButtons(navigator.clipboard);
     } else {
         const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js';
+        script.src = '{{ $src }}';
         script.defer = true;
         script.onload = function() {
             addCopyButtons(clipboard);

diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
@@ -1411,3 +1411,38 @@ uglyURLs = false
     fofVideoMp4 = ""
     # Note: you can leave these two
     #       options empty("")
+
+
+    ######################################
+    # Customize host for third-party libraries
+
+    [params.lib]
+        host = "https://cdn.jsdelivr.net"
+        # Note: leave it empty("") and set
+        #       the path below to absolute
+        #       path if you want to host
+        #       the lib directly from “local”.
+        #       I.e. set path to "/js/lib.min.js",
+        #       and put this file to your
+        #       /static/js/lib.min.js
+    [params.lib.path]
+        clipboard = "/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js"
+        instantsearch = "/npm/instantsearch.js@2/dist/instantsearch.min.js"
+        gitalk = "/npm/gitalk@1/dist/gitalk.min.js"
+        gitalk-css = "/npm/gitalk@1/dist/gitalk.css"
+        instantpage = "/npm/instant.page@5.1.0/instantpage.min.js"
+        katex = "/npm/katex@0.13.0/dist/katex.min.js"
+        katex-css = "/npm/katex@0.13.0/dist/katex.min.css"
+        katex-mhchem = "/npm/katex@0.13.0/dist/contrib/mhchem.min.js"
+        katex-auto-render = "/npm/katex@0.13.0/dist/contrib/auto-render.min.js"
+        lunr = "/npm/lunr@2.3.9/lunr.min.js"
+        lunr-tinyseg = "/npm/lunr-languages@1.4.0/tinyseg.js"
+        lunr-stemmer = "/npm/lunr-languages@1.4.0/min/lunr.stemmer.support.min.js"
+        lunr-lang = "/npm/lunr-languages@1.4.0/min/lunr.de.min.js"
+        mathjax = "/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"
+        medium-zoom = "/npm/medium-zoom@latest/dist/medium-zoom.min.js"
+        mermaid = "/npm/mermaid@8.8.3/dist/mermaid.min.js"
+        qrcode = "/npm/qrcode-generator@1.4.4/qrcode.min.js"
+        valine = "/npm/valine@1.4.14/dist/Valine.min.js"
+        busuanzi = "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
+        utterances = "https://utteranc.es/client.js"
diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1380,3 +1380,36 @@ uglyURLs = false
     fofVideoWebm = ""
     fofVideoMp4 = ""
     # 说明：视频地址可留空（""）
+
+
+    ######################################
+    # 定制第三方库的地址
+
+    [params.lib]
+        host = "https://cdn.jsdelivr.net"
+        # 说明：留空（""）且将下方对应 path 设
+        #      置为绝对路径，如果你想要直接从
+        #      「本地」加载某个库的话。比如：
+        #      将 path 设置为 "/js/lib.min.js"，
+        #      并将文件放到你的 /static/js/lib.min.js
+    [params.lib.path]
+        clipboard = "/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js"
+        instantsearch = "/npm/instantsearch.js@2/dist/instantsearch.min.js"
+        gitalk = "/npm/gitalk@1/dist/gitalk.min.js"
+        gitalk-css = "/npm/gitalk@1/dist/gitalk.css"
+        instantpage = "/npm/instant.page@5.1.0/instantpage.min.js"
+        katex = "/npm/katex@0.13.0/dist/katex.min.js"
+        katex-css = "/npm/katex@0.13.0/dist/katex.min.css"
+        katex-mhchem = "/npm/katex@0.13.0/dist/contrib/mhchem.min.js"
+        katex-auto-render = "/npm/katex@0.13.0/dist/contrib/auto-render.min.js"
+        lunr = "/npm/lunr@2.3.9/lunr.min.js"
+        lunr-tinyseg = "/npm/lunr-languages@1.4.0/tinyseg.js"
+        lunr-stemmer = "/npm/lunr-languages@1.4.0/min/lunr.stemmer.support.min.js"
+        lunr-lang = "/npm/lunr-languages@1.4.0/min/lunr.de.min.js"
+        mathjax = "/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"
+        medium-zoom = "/npm/medium-zoom@latest/dist/medium-zoom.min.js"
+        mermaid = "/npm/mermaid@8.8.3/dist/mermaid.min.js"
+        qrcode = "/npm/qrcode-generator@1.4.4/qrcode.min.js"
+        valine = "/npm/valine@1.4.14/dist/Valine.min.js"
+        busuanzi = "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
+        utterances = "https://utteranc.es/client.js"
diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
@@ -1380,3 +1380,36 @@ uglyURLs = false
     fofVideoWebm = ""
     fofVideoMp4 = ""
     # 說明：影片地址可留空（""）
+
+
+    ######################################
+    # 定制第三方庫的地址
+
+    [params.lib]
+        host = "https://cdn.jsdelivr.net"
+        # 說明：留空（""）且將下方對應 path 設
+        #      置為絕對路徑，如果你想要直接從
+        #      「本地」加載某個庫的話。比如：
+        #      將 path 設置為 "/js/lib.min.js"，
+        #      並將文件放到你的 /static/js/lib.min.js
+    [params.lib.path]
+        clipboard = "/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js"
+        instantsearch = "/npm/instantsearch.js@2/dist/instantsearch.min.js"
+        gitalk = "/npm/gitalk@1/dist/gitalk.min.js"
+        gitalk-css = "/npm/gitalk@1/dist/gitalk.css"
+        instantpage = "/npm/instant.page@5.1.0/instantpage.min.js"
+        katex = "/npm/katex@0.13.0/dist/katex.min.js"
+        katex-css = "/npm/katex@0.13.0/dist/katex.min.css"
+        katex-mhchem = "/npm/katex@0.13.0/dist/contrib/mhchem.min.js"
+        katex-auto-render = "/npm/katex@0.13.0/dist/contrib/auto-render.min.js"
+        lunr = "/npm/lunr@2.3.9/lunr.min.js"
+        lunr-tinyseg = "/npm/lunr-languages@1.4.0/tinyseg.js"
+        lunr-stemmer = "/npm/lunr-languages@1.4.0/min/lunr.stemmer.support.min.js"
+        lunr-lang = "/npm/lunr-languages@1.4.0/min/lunr.de.min.js"
+        mathjax = "/npm/mathjax@3.1.2/es5/tex-mml-chtml.js"
+        medium-zoom = "/npm/medium-zoom@latest/dist/medium-zoom.min.js"
+        mermaid = "/npm/mermaid@8.8.3/dist/mermaid.min.js"
+        qrcode = "/npm/qrcode-generator@1.4.4/qrcode.min.js"
+        valine = "/npm/valine@1.4.14/dist/Valine.min.js"
+        busuanzi = "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
+        utterances = "https://utteranc.es/client.js"
diff --git a/layouts/partials/third-party/algolia-search.html b/layouts/partials/third-party/algolia-search.html
@@ -1,4 +1,5 @@
-{{- $scripts := slice "https://cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js" -}}
+{{- $src := partial "utils/lib.html" (dict "type" "instantsearch") -}}
 
+{{- $scripts := slice $src -}}
 {{- $scripts = union $scripts (slice "js/algolia-search.js") -}}
 {{- return $scripts -}}
diff --git a/layouts/partials/third-party/busuanzi.html b/layouts/partials/third-party/busuanzi.html
@@ -1,5 +1,7 @@
+{{- $src := partial "utils/lib.html" (dict "type" "busuanzi") -}}
+
 {{ if or .Site.Params.displayBusuanziPagePV .Site.Params.displayBusuanziSiteUVAndPV }}
     {{ if eq hugo.Environment "production" }}
-        <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
+        <script async src="{{ $src }}"></script>
     {{ end }}
 {{ end }}
diff --git a/layouts/partials/third-party/disqus.html b/layouts/partials/third-party/disqus.html
@@ -5,13 +5,13 @@
             return;
         }
         if (typeof DISQUS === 'undefined') {
-            var disqus_config = function() {
+            const disqus_config = function() {
                 {{ with .Params.disqus_url | default .Permalink }}this.page.url = '{{ . }}';{{ end }}
                 {{ with .Params.disqus_identifier | default .RelPermalink }}this.page.identifier = '{{ . }}';{{ end }}
                 {{ with .Params.disqus_title | default $rawTitle }}this.page.title = '{{ . }}';{{ end }}
             };
             (function() {
-                var d = document, s = d.createElement('script'); s.async = true;
+                const d = document, s = d.createElement('script'); s.async = true;
                 s.src = 'https://{{ .Site.Params.disqusShortname }}.disqus.com/embed.js';
                 s.setAttribute('data-timestamp', +new Date());
                 (d.head || d.body).appendChild(s);

diff --git a/layouts/partials/third-party/gitalk.html b/layouts/partials/third-party/gitalk.html
@@ -1,12 +1,15 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
+{{- $src := partial "utils/lib.html" (dict "type" "gitalk") -}}
+{{- $srcCSS := partial "utils/lib.html" (dict "type" "gitalk-css") -}}
+
+<link rel="stylesheet" href="{{ $srcCSS }}">
 <script>
     function loadComments() {
         if (!document.getElementById('gitalk-container')) {
             return;
         }
         if (typeof Gitalk === 'undefined') {
-            var getScript = (options) => {
-                var script = document.createElement('script');
+            const getScript = (options) => {
+                const script = document.createElement('script');
                 script.defer = true;
                 script.crossOrigin = 'anonymous';
                 Object.keys(options).forEach((key) => {
@@ -15,7 +18,7 @@
                 document.body.appendChild(script);
             };
             getScript({
-                src: 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js',
+                src: '{{ $src }}',
                 onload: () => {
                     newGitalk();
                 }

diff --git a/layouts/partials/third-party/instant-page.html b/layouts/partials/third-party/instant-page.html
@@ -1 +1,3 @@
-<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.0/instantpage.min.js" type="module" defer></script>
+{{- $src := partial "utils/lib.html" (dict "type" "instantpage") -}}
+
+<script src="{{ $src }}" type="module" defer></script>
diff --git a/layouts/partials/third-party/katex.html b/layouts/partials/third-party/katex.html
@@ -1,8 +1,13 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" integrity="sha256-gPJfuwTULrEAAcI3X4bALVU/2qBU+QY/TpoD3GO+Exw=" crossorigin="anonymous">
+{{- $src := partial "utils/lib.html" (dict "type" "katex") -}}
+{{- $srcCSS := partial "utils/lib.html" (dict "type" "katex-css") -}}
+{{- $srcMhchem := partial "utils/lib.html" (dict "type" "katex-mhchem") -}}
+{{- $srcAutoRender := partial "utils/lib.html" (dict "type" "katex-auto-render") -}}
+
+<link rel="stylesheet" href="{{ $srcCSS }}">
 <script>
     if (typeof renderMathInElement === 'undefined') {
-        var getScript = (options) => {
-            var script = document.createElement('script');
+        const getScript = (options) => {
+            const script = document.createElement('script');
             script.defer = true;
             script.crossOrigin = 'anonymous';
             Object.keys(options).forEach((key) => {
@@ -11,16 +16,13 @@
             document.body.appendChild(script);
         };
         getScript({
-            src: 'https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js',
-            integrity: 'sha256-YTW9cMncW/ZQMhY69KaUxIa2cPTxV87Uh627Gf5ODUw=',
+            src: '{{ $src }}',
             onload: () => {
                 getScript({
-                    src: 'https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/contrib/mhchem.min.js',
-                    integrity: 'sha256-yzSfYeVsWJ1x+2g8CYHsB/Mn7PcSp8122k5BM4T3Vxw=',
+                    src: '{{ $srcMhchem }}',
                     onload: () => {
                         getScript({
-                            src: 'https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/contrib/auto-render.min.js',
-                            integrity: 'sha256-fxJzNV6hpc8tgW8tF0zVobKa71eTCRGTgxFXt1ZpJNM=',
+                            src: '{{ $srcAutoRender }}',
                             onload: () => {
                                 renderKaTex();
                             }

diff --git a/layouts/partials/third-party/lunr-search.html b/layouts/partials/third-party/lunr-search.html
@@ -1,12 +1,17 @@
-{{- $scripts := slice "https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js" -}}
+{{- $src := partial "utils/lib.html" (dict "type" "lunr") -}}
+{{- $srcTinyseg := partial "utils/lib.html" (dict "type" "lunr-tinyseg") -}}
+{{- $srcStemmer := partial "utils/lib.html" (dict "type" "lunr-stemmer") -}}
+{{- $srcLang := partial "utils/lib.html" (dict "type" "lunr-lang" "lang" .Site.Language.Lang) -}}
+
+{{- $scripts := slice $src -}}
 {{- if ne .Site.Language.Lang "en" -}}
     {{- $supported := slice "ar" "da" "de" "du" "es" "fi" "fr" "hu" "it" "ja" "nl" "no" "pt" "ro" "ru" "sv" "tr" "vi" -}}
     {{- if in $supported .Site.Language.Lang -}}
         {{- if eq .Site.Language.Lang "ja" -}}
-            {{- $scripts = union $scripts (slice "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/tinyseg.js") -}}
+            {{- $scripts = union $scripts (slice $srcTinyseg) -}}
         {{- end -}}
-        {{- $scripts = union $scripts (slice "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/min/lunr.stemmer.support.min.js") -}}
-        {{- $scripts = union $scripts (slice (printf "https://cdn.jsdelivr.net/npm/lunr-languages@1.4.0/min/lunr.%s.min.js" .Site.Language.Lang)) -}}
+        {{- $scripts = union $scripts (slice $srcStemmer) -}}
+        {{- $scripts = union $scripts (slice $srcLang) -}}
     {{- else -}}
         {{- warnf "The site language %q isn't supported by lunr, the search results might be suboptimal. Supported languages are: %q" .Site.Language.Lang $supported -}}
     {{- end -}}

diff --git a/layouts/partials/third-party/mathjax.html b/layouts/partials/third-party/mathjax.html
@@ -1,3 +1,5 @@
+{{- $src := partial "utils/lib.html" (dict "type" "mathjax") -}}
+
 <script>
     if (typeof MathJax === 'undefined') {
         window.MathJax = {
@@ -18,8 +20,8 @@
             }
         };
         (function() {
-            var script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-mml-chtml.js';
+            const script = document.createElement('script');
+            script.src = '{{ $src }}';
             script.defer = true;
             document.head.appendChild(script);
         })();

diff --git a/layouts/partials/third-party/medium-zoom.html b/layouts/partials/third-party/medium-zoom.html
@@ -1,4 +1,6 @@
-<script src="https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist/medium-zoom.min.js"></script>
+{{- $src := partial "utils/lib.html" (dict "type" "medium-zoom") -}}
+
+<script src="{{ $src }}"></script>
 
 <script>
     let imgNodes = document.querySelectorAll('div.post-body img');

diff --git a/layouts/partials/third-party/mermaid.html b/layouts/partials/third-party/mermaid.html
@@ -1,6 +1,8 @@
-<script src="https://cdn.jsdelivr.net/npm/mermaid@8.8.3/dist/mermaid.min.js"></script>
+{{- $src := partial "utils/lib.html" (dict "type" "mermaid") -}}
+
+<script src="{{ $src }}"></script>
 <script>
-    let mermaidConfig = {
+    const mermaidConfig = {
         startOnLoad: true,
         flowchart: {
             useMaxWidth: false,

diff --git a/layouts/partials/third-party/qrcode-generator.html b/layouts/partials/third-party/qrcode-generator.html
@@ -1,9 +1,11 @@
-<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
+{{- $src := partial "utils/lib.html" (dict "type" "qrcode") -}}
+
+<script src="{{ $src }}"></script>
 
 <script>
-    var typeNumber = 0;
-    var errorCorrectionLevel = 'L';
-    var qr = qrcode(typeNumber, errorCorrectionLevel);
+    const typeNumber = 0;
+    const errorCorrectionLevel = 'L';
+    const qr = qrcode(typeNumber, errorCorrectionLevel);
     qr.addData('{{ .Permalink }}');
     qr.make();
     document.getElementById('qrcode-img').innerHTML = qr.createImgTag();

diff --git a/layouts/partials/third-party/utterances.html b/layouts/partials/third-party/utterances.html
@@ -1,12 +1,14 @@
+{{- $src := partial "utils/lib.html" (dict "type" "utterances") -}}
+
 <script>
     function loadComments() {
         (function() {
-            var utterances = document.getElementById("utterances");
+            const utterances = document.getElementById("utterances");
             if (!utterances) {
                 return;
             }
-            var script = document.createElement('script');
-            script.src = 'https://utteranc.es/client.js';
+            const script = document.createElement('script');
+            script.src = '{{ $src }}';
             script.async = true;
             script.crossOrigin = 'anonymous';
             script.setAttribute('repo', '{{ .Site.Params.utterancesRepo }}');

diff --git a/layouts/partials/third-party/valine.html b/layouts/partials/third-party/valine.html
@@ -1,11 +1,13 @@
+{{- $src := partial "utils/lib.html" (dict "type" "valine") -}}
+
 <script>
     function loadComments() {
         if (!document.getElementById('vcomments')) {
             return;
         }
         if (typeof Valine === 'undefined') {
-            var getScript = (options) => {
-                var script = document.createElement('script');
+            const getScript = (options) => {
+                const script = document.createElement('script');
                 script.defer = true;
                 script.crossOrigin = 'anonymous';
                 Object.keys(options).forEach((key) => {
@@ -14,7 +16,7 @@
                 document.body.appendChild(script);
             };
             getScript({
-                src: 'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
+                src: '{{ $src }}',
                 onload: () => {
                     newValine();
                 }