chore: refactor scripts code style

pogor-dev · Feb 14, 2020 · 1088f86 · 1088f86
1 parent 12bd1e1
commit 1088f86
Show file tree

Hide file tree

Showing 8 changed files with 317 additions and 336 deletions.
diff --git a/assets/js/blog.js → assets/js/theme.js b/assets/js/blog.js → assets/js/theme.js
@@ -2,16 +2,20 @@ jQuery(function($) {
 
     'use strict';
 
-    var _Blog = window._Blog || {};
+    var _Theme = window._Theme || {};
 
-    _Blog.toggleMobileMenu = function() {
+    _Theme.scroll = function () {
+        window.scroll = new SmoothScroll('[data-scroll]', {speed: 300, speedAsDuration: true});
+    }
+
+    _Theme.toggleMobileMenu = function () {
         $('#menu-toggle').on('click', () => {
             $('#menu-toggle').toggleClass('active');
             $('#menu-mobile').toggleClass('active');
         });
     };
 
-    _Blog.toggleTheme = function() {
+    _Theme.toggleTheme = function () {
         $('.theme-switch').on('click', () => {
             $('body').toggleClass('dark-theme');
             window.isDark = !window.isDark;
@@ -20,17 +24,7 @@ jQuery(function($) {
         });
     };
 
-    _Blog.changeTitle = function() {
-        var currentTitle = document.title;
-        window.onblur = function() {
-            document.title = currentTitle;
-        };
-        window.onfocus = function() {
-            document.title = currentTitle;
-        };
-    };
-
-    _Blog.dynamicToTop = function() {
+    _Theme.dynamicToTop = function () {
         const min = 300;
         var $toTop = $('#dynamic-to-top');
         $(window).scroll(() => {
@@ -73,7 +67,7 @@ jQuery(function($) {
         });
     };
 
-    _Blog.chroma = function () {
+    _Theme.chroma = function () {
         const blocks = document.querySelectorAll('.highlight > .chroma');
         for (let i = 0; i < blocks.length; i++) {
             const block = blocks[i];
@@ -101,7 +95,7 @@ jQuery(function($) {
         }
     };
 
-    _Blog.responsiveTable = function() {
+    _Theme.responsiveTable = function () {
         const tables = document.querySelectorAll('.content table');
         for (let i = 0; i < tables.length; i++) {
             const table = tables[i];
@@ -112,7 +106,7 @@ jQuery(function($) {
         }
     };
 
-    _Blog._refactorToc = function(toc) {
+    _Theme._refactorToc = function(toc) {
         // when headings do not start with `h1`
         const oldTocList = toc.children[0];
         let newTocList = oldTocList;
@@ -124,7 +118,7 @@ jQuery(function($) {
         if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
     };
 
-    _Blog._linkToc = function() {
+    _Theme._linkToc = function () {
         const links = document.querySelectorAll('#TableOfContents a:first-child');
         for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
 
@@ -137,15 +131,15 @@ jQuery(function($) {
         }
     };
 
-    _Blog._initToc = function() {
+    _Theme._initToc = function () {
         const $toc = $('#post-toc');
         if ($toc.length && $toc.css('display') !== 'none') {
             const SPACING = 80;
             const $footer = $('#post-footer');
             const minTop = $toc.position().top;;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
-            const changeTocState = function() {
+            const changeTocState = function () {
                 const scrollTop = $(window).scrollTop();
                 const maxTop = $footer.position().top - $toc.height();
                 const maxScrollTop = maxTop + mainTop - SPACING;
@@ -213,7 +207,7 @@ jQuery(function($) {
         }
     };
 
-    _Blog.toc = function() {
+    _Theme.toc = function () {
         const tocContainer = document.getElementById('post-toc');
         if (tocContainer !== null) {
             const toc = document.getElementById('TableOfContents');
@@ -225,15 +219,16 @@ jQuery(function($) {
                 this._linkToc();
                 this._initToc();
                 // Listen for orientation changes
-                window.addEventListener("resize", function() {
-                    this.setTimeout(_Blog._initToc, 0);
+                window.addEventListener("resize", function () {
+                    this.setTimeout(_Theme._initToc, 0);
                 }, false);
             }
         }
     };
 
-    _Blog.mermaid = function() {
+    _Theme.mermaid = function () {
         if (window.mermaidMap) {
+            mermaid.initialize({startOnLoad: false, theme: null});
             const mermaidAPI = mermaid.mermaidAPI
             Object.keys(mermaidMap).forEach((id) => {
                 const element = document.getElementById(id);
@@ -246,7 +241,7 @@ jQuery(function($) {
         }
     }
 
-    _Blog.echarts = function() {
+    _Theme.echarts = function () {
         if (window.echartsMap) {
             for (let i = 0; i < echartsArr.length; i++) {
                 echartsArr[i].dispose();
@@ -257,7 +252,7 @@ jQuery(function($) {
                 myChart.setOption(echartsMap[id]);
                 echartsArr.push(myChart);
             });
-            window.addEventListener("resize", function() {
+            window.addEventListener("resize", function () {
                 this.setTimeout(() => {
                     for (let i = 0; i < echartsArr.length; i++) {
                         echartsArr[i].resize();
@@ -267,7 +262,7 @@ jQuery(function($) {
         }
     }
 
-    _Blog.countdown = function() {
+    _Theme.countdown = function () {
         if (window.countdownMap) {
             Object.keys(countdownMap).forEach(function(id) {
                 $(`#${id}`).countdown(countdownMap[id]['date'], {elapse: true})
@@ -278,7 +273,7 @@ jQuery(function($) {
         }
     };
 
-    _Blog.typeit = function() {
+    _Theme.typeit = function () {
         if (window.typeitArr) {
             for (let i = 0; i < typeitArr.length; i++) {
                 const group = typeitArr[i];
@@ -303,16 +298,16 @@ jQuery(function($) {
     };
 
     $(document).ready(() => {
-        _Blog.toggleMobileMenu();
-        _Blog.toggleTheme();
-        _Blog.changeTitle();
-        _Blog.dynamicToTop();
-        _Blog.chroma();
-        _Blog.responsiveTable();
-        _Blog.mermaid();
-        _Blog.echarts();
-        _Blog.countdown();
-        _Blog.typeit();
-        _Blog.toc();
+        _Theme.scroll();
+        _Theme.toggleMobileMenu();
+        _Theme.toggleTheme();
+        _Theme.dynamicToTop();
+        _Theme.chroma();
+        _Theme.responsiveTable();
+        _Theme.mermaid();
+        _Theme.echarts();
+        _Theme.countdown();
+        _Theme.typeit();
+        _Theme.toc();
     });
 });
diff --git a/layouts/404.html b/layouts/404.html
@@ -11,12 +11,12 @@ <h1 id="error-emoji"></h1>
         </p>
     </div>
     <script>
-        const emojiArray = [
+        var emojiArray = [
             '\\(o_o)/', '(o^^)o', '(˚Δ˚)b', '(^-^*)', '(≥o≤)', '(^_^)b', '(·_·)',
             '(=\'X\'=)', '(>_<)', '(;-;)', '\\(^Д^)/',
         ];
-        const errorEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)];
-        const errorEmojiContainer = document.getElementById('error-emoji');
+        var errorEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)];
+        var errorEmojiContainer = document.getElementById('error-emoji');
         errorEmojiContainer.appendChild(document.createTextNode(errorEmoji));
     </script>
 {{- end -}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,6 +3,11 @@
   {{- errorf "\n\nThere are two possible situations that led to this error:\n  1. You haven't copied the config.toml yet. See https://github.com/dillonzq/LoveIt#installation \n  2. You have an incompatible update. See https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n\n有两种可能的情况会导致这个错误发生:\n  1. 你还没有复制 config.toml 参考 https://github.com/dillonzq/LoveIt#installation \n  2. 你进行了一次不兼容的更新 参考 https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n" -}}
 {{- end -}}
 
+{{- if eq (getenv "HUGO_ENV") "production" -}}
+    {{- .Scratch.Set "production" true -}}
+    {{- .Scratch.Set "CDN" .Site.Params.cdn -}}
+{{- end -}}
+
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
     <head>
@@ -51,7 +56,7 @@
             <span>&nbsp;</span>
         </a>
 
-        {{- /* Load scripts */ -}}
-        {{- partial "scripts.html" . -}}
+        {{- /* Load script */ -}}
+        {{- partial "script.html" . -}}
     </body>
 </html>
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
@@ -1,84 +1,94 @@
-{{- if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
+{{- if .Scratch.Get "production" | and .IsPage | and (ne .Params.comment false) -}}
+    {{- $CDN := .Scratch.Get "CDN" -}}
+
     {{- /* Disqus Comment System */ -}}
     {{- with .Site.Params.disqus.shortname -}}
         <div id="disqus_thread"></div>
-        <script src="https://{{ . }}.disqus.com/embed.js"></script>
-        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+        {{- $script := printf `<script src="https://%s.disqus.com/embed.js"></script>` . -}}
+        {{- slice $script | $.Scratch.Add "scriptCDN" -}}
+        <noscript>
+            Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+        </noscript>
     {{- end -}}
 
     {{- /* Gitalk Comment System */ -}}
     {{- if .Site.Params.gitalk.owner -}}
         <div id="gitalk_container"></div>
-        {{- if .Site.Params.cdn.gitalk_css -}}
-            {{- .Site.Params.cdn.gitalk_css | safeHTML -}}
+        {{- with $CDN.gitalk_css -}}
+            {{- slice . | $.Scratch.Add "linkCDN" -}}
         {{- else -}}
-            {{- $res := resources.Get "css/lib/gitalk/gitalk.css" | minify -}}
-            <link rel="stylesheet" href="{{ $res.RelPermalink }}">
+            {{- slice "css/lib/gitalk/gitalk.css" | .Scratch.Add "linkLocal" -}}
         {{- end -}}
-        {{- if .Site.Params.cdn.gitalk_js -}}
-            {{ .Site.Params.cdn.gitalk_js | safeHTML -}}
+        {{- with $CDN.gitalk_js -}}
+            {{- slice . | $.Scratch.Add "scriptCDN" -}}
         {{- else -}}
-            {{- $res := resources.Get "js/lib/gitalk/gitalk.min.js" -}}
-            <script src="{{ $res.RelPermalink }}"></script>
+            {{- slice "css/lib/gitalk/gitalk.min.js" | .Scratch.Add "scriptLocal" -}}
         {{- end -}}
         <script>
-            var gitalk = new Gitalk({
-                id: '{{ .Date }}',
-                title: '{{ .Title }}',
-                clientID: '{{ .Site.Params.gitalk.clientId }}',
-                clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
-                repo: '{{ .Site.Params.gitalk.repo }}',
-                owner: '{{ .Site.Params.gitalk.owner }}',
-                admin: ['{{ .Site.Params.gitalk.owner }}'],
-                body: decodeURI(location.href),
+            document.addEventListener("DOMContentLoaded", function(event) {
+                var gitalk = new Gitalk({
+                    id: '{{ .Date }}',
+                    title: '{{ .Title }}',
+                    clientID: '{{ .Site.Params.gitalk.clientId }}',
+                    clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
+                    repo: '{{ .Site.Params.gitalk.repo }}',
+                    owner: '{{ .Site.Params.gitalk.owner }}',
+                    admin: ['{{ .Site.Params.gitalk.owner }}'],
+                    body: decodeURI(location.href),
+                });
+                gitalk.render('gitalk_container');
             });
-            gitalk.render('gitalk_container');
         </script>
-        <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by Gitalk.</a></noscript>
+        <noscript>
+            Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by Gitalk.</a>
+        </noscript>
     {{- end -}}
 
     {{- /* Valine Comment System */ -}}
     {{- if .Site.Params.valine.enable -}}
         <div id="valine_container"></div>
-        {{- if .Site.Params.cdn.valine_js -}}
-            {{- .Site.Params.cdn.valine_js | safeHTML -}}
+        {{- with $CDN.valine_js -}}
+            {{- slice . | $.Scratch.Add "scriptCDN" -}}
         {{- else -}}
-            {{- $res := resources.Get "js/lib/valine/Valine.min.js" -}}
-            <script src="{{ $res.RelPermalink }}"></script>
+            {{- slice "js/lib/valine/Valine.min.js" | .Scratch.Add "scriptLocal" -}}
         {{- end -}}
         <script>
-            new Valine({
-                el: '#valine_container',
-                appId: '{{ .Site.Params.valine.appId }}',
-                appKey: '{{ .Site.Params.valine.appKey }}',
-                {{- with .Site.Params.valine.placeholder -}}
-                    placeholder: '{{ . }}',
-                {{- end -}}
-                {{- if .Site.Params.valine.notify -}}
-                    notify: true,
-                {{- end -}}
-                {{- if .Site.Params.valine.verify -}}
-                    verify: true,
-                {{- end -}}
-                {{- with .Site.Params.valine.avatar -}}
-                    avatar: '{{ . }}',
-                {{- end -}}
-                {{- with .Site.Params.valine.meta -}}
-                    meta: {{ . | safeJS }},
-                {{- end -}}
-                {{- with .Site.Params.valine.pageSize -}}
-                    pageSize: {{ . | safeJS }},
-                {{- end -}}
-                lang: '{{ T "valineLang" }}',
-                {{- if .Site.Params.valine.visitor -}}
-                    visitor: true,
-                {{- end -}}
-                {{- if .Site.Params.valine.recordIP -}}
-                    recordIP: true,
-                {{- end -}}
+            document.addEventListener("DOMContentLoaded", function(event) {
+                new Valine({
+                    el: '#valine_container',
+                    appId: '{{ .Site.Params.valine.appId }}',
+                    appKey: '{{ .Site.Params.valine.appKey }}',
+                    {{- with .Site.Params.valine.placeholder -}}
+                        placeholder: '{{ . }}',
+                    {{- end -}}
+                    {{- if .Site.Params.valine.notify -}}
+                        notify: true,
+                    {{- end -}}
+                    {{- if .Site.Params.valine.verify -}}
+                        verify: true,
+                    {{- end -}}
+                    {{- with .Site.Params.valine.avatar -}}
+                        avatar: '{{ . }}',
+                    {{- end -}}
+                    {{- with .Site.Params.valine.meta -}}
+                        meta: {{ . | safeJS }},
+                    {{- end -}}
+                    {{- with .Site.Params.valine.pageSize -}}
+                        pageSize: {{ . | safeJS }},
+                    {{- end -}}
+                    lang: '{{ T "valineLang" }}',
+                    {{- if .Site.Params.valine.visitor -}}
+                        visitor: true,
+                    {{- end -}}
+                    {{- if .Site.Params.valine.recordIP -}}
+                        recordIP: true,
+                    {{- end -}}
+                });
             });
         </script>
-        <noscript>Please enable JavaScript to view the <a href="https://valine.js.org/">comments powered by Valine.</a></noscript>
+        <noscript>
+            Please enable JavaScript to view the <a href="https://valine.js.org/">comments powered by Valine.</a>
+        </noscript>
     {{- end -}}
 
     {{- /* Facebook Comment System */ -}}
@@ -90,12 +100,11 @@
             data-width="{{ .Site.Params.facebook.width }}"
             data-numposts="{{ .Site.Params.facebook.numPosts }}"
         ></div>
-        <script
-            async
-            defer
-            crossorigin="anonymous"
-            src="https://connect.facebook.net/{{ .Site.Params.facebook.languageCode }}/sdk.js#xfbml=1&version=v5.0&appId={{ .Site.Params.facebook.appId }}&autoLogAppEvents=1"
-        ></script>
-        <noscript>Please enable JavaScript to view the <a href="https://developers.facebook.com/docs/plugins/comments/">comments powered by Facebook.</a></noscript>
+        {{- $script := `<script src="https://connect.facebook.net/%s/sdk.js#xfbml=1&version=v5.0&appId=%s&autoLogAppEvents=1" crossorigin="anonymous"></script>` -}}
+        {{- $script = printf $script .Site.Params.facebook.languageCode .Site.Params.facebook.appId -}}
+        {{- slice $script | .Scratch.Add "scriptCDN" -}}
+        <noscript>
+            Please enable JavaScript to view the <a href="https://developers.facebook.com/docs/plugins/comments/">comments powered by Facebook.</a>
+        </noscript>
     {{- end -}}
 {{- end -}}