✏️ Add theme-toggle function on mobile devices & fixed mobile menu-toggle style on some platform

assets/css/_common/_core/media.scss

@@ -14,17 +14,20 @@
             margin: 0;
             height: 5em;
             line-height: 5.5em;
-            background: #ffffff;
+            background: $light-background-color;
+
             .navbar-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
                 width: 100%;
                 padding-right: 1em;
                 padding-left: 1em;
                 box-sizing: border-box;
-                .menu-toggle {
 
-                    float: right;
+        
+                .menu-toggle {
                     cursor: pointer;
-                    height: 5em;
                     line-height: 5.5em;
 
                     span {
@@ -38,6 +41,10 @@
                         -webkit-transition: .25s margin .25s, .25s transform;
                         -moz-transition: .25s margin .25s, .25s transform;
                         transition: .25s margin .25s, .25s transform;
+
+                        .dark-theme & {
+                            background: $dark-font-color;
+                        }
                     }
 
                     span:nth-child(1) {
@@ -90,6 +97,14 @@
                 &.active {
                     display: block;
                 }
+
+                .dark-theme & {
+                    background: $dark-background-color;
+                    border-top: 2px solid $dark-font-secondary-color;
+                }
+            }
+            .dark-theme & {
+                background: $dark-background-color !important;
             }
         }
     }

assets/js/main.js

@@ -1,44 +1,56 @@
-(function(){
+jQuery(function($) {
-'use strict';
-var _Blog = window._Blog || {};
 
-_Blog.changeTitle = function() {
+    'use strict';
+
+    var _Blog = window._Blog || {};
+
+    _Blog.prettify = function() {
+        $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
+        window.prettyPrint && prettyPrint();
+    };
+
+    _Blog.externalUrl = function() {
+        $.expr[':'].external = function(obj) {
+            return !obj.href.match(/^mailto\:/) &&
+                (obj.hostname != location.hostname);
+        };
+        $('a:external').addClass('external');
+        $(".external").attr('target', '_blank');
 
-    var currentTitle = document.title;
-    window.onblur = function() {
-        document.title = 'I miss you!（＞﹏＜）';
     }
-    window.onfocus = function() {
+
-        document.title = currentTitle;
+    _Blog.changeTitle = function() {
+        var currentTitle = document.title;
+        window.onblur = function() {
+            document.title = 'I miss you!（＞﹏＜）';
+        }
+        window.onfocus = function() {
+            document.title = currentTitle;
+        }
+    };
+
+    _Blog.toggleTheme = function() {
+        const currentTheme = window.localStorage && window.localStorage.getItem('theme')
+        const isDark = currentTheme === 'dark'
+        $('body').toggleClass('dark-theme', isDark)
+        $('.theme-switch').on('click', () => {
+            $('body').toggleClass('dark-theme')
+            window.localStorage &&
+                window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', )
+        })
     }
-};
 
-_Blog.toggleTheme = function() {
+    _Blog.toggleMobileMenu = function() {
-    const currentTheme = window.localStorage && window.localStorage.getItem('theme')
+        $('.menu-toggle').on('click', () => {
-    const themeSwitchEL = document.querySelector('.theme-switch')
+            $('.menu-toggle').toggleClass('active')
-    const isDark = currentTheme === 'dark'
+            $('#mobile-menu').toggleClass('active')
-    document.body.classList.toggle('dark-theme', isDark)
+        })
+    }
 
-    themeSwitchEL.addEventListener('click', () => {
+    $(document).ready(function() {
-        document.body.classList.toggle('dark-theme')
+        _Blog.prettify()
-        window.localStorage &&
+        _Blog.changeTitle()
-            window.localStorage.setItem(
+        _Blog.toggleTheme()
-                'theme',
+        _Blog.toggleMobileMenu()
-                document.body.classList.contains('dark-theme') ? 'dark' : 'light',
+    });
-            )
+});
-    })
-}
-
-_Blog.toggleMobileMenu = function(){
-    const menuToggle = document.querySelector('.menu-toggle')
-    const mobileMenu = document.querySelector('#mobile-menu')
-    menuToggle.addEventListener('click', () => {
-        mobileMenu.classList.toggle('active')
-        menuToggle.classList.toggle('active')
-    })
-}
-
-_Blog.toggleTheme()
-_Blog.changeTitle()
-_Blog.toggleMobileMenu()
-}());

assets/js/page.js

@@ -1,24 +0,0 @@
-jQuery(function($) {
-
-    'use strict';
-
-    var _Blog = window._Blog || {};
-
-    _Blog.prettify = function() {
-        $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
-        window.prettyPrint && prettyPrint();
-    };
-
-    _Blog.externalUrl = function() {
-       $.expr[':'].external = function(obj) {
-           return !obj.href.match(/^mailto\:/) &&
-               (obj.hostname != location.hostname);
-       };
-       $('a:external').addClass('external');
-       $(".external").attr('target', '_blank');
-   }
-
-    $(document).ready(function() {
-        _Blog.prettify();
-    });
-});

layouts/partials/header.html

@@ -14,10 +14,10 @@
 <nav class="navbar-mobile" id="nav-mobile" style="display: none">
      <div class="container">
         <div class="navbar-header">
-            <a href="{{ "/" | absURL}}">LiuZhichao</a>
+            <div>  <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-xihuan"></i></a>&nbsp;<a href="{{ "/" | absURL}}">{{ .Site.Title }}</a></div>
-            <button class="menu-toggle">
+            <div class="menu-toggle">
                 <span></span><span></span><span></span>
-            </button>
+            </div>
         </div>
      
           <div class="menu" id="mobile-menu">

layouts/partials/js.html

@@ -1,28 +1,25 @@
 {{ $cdn_url := .Scratch.Get "cdn_url" }}
 {{ $postHasImages :=  .Scratch.Get "postHasImages"}}
+{{ $jquery := resources.Get "/js/jquery.min.js" }}
+{{ $lazysizes := resources.Get "/js/lazysizes.min.js"}}
+{{ $prettify := resources.Get "/js/prettify.min.js" }}
+{{ $dynamic := resources.Get "/js/dynamic.to.top.min.js" }}
+{{ $main := resources.Get "/js/main.js" }}
+{{ $lihtGallery := resources.Get "/js/lightGallery-all.min.js" }}
+{{ $lihtGallery_init := resources.Get "/js/lightGallery-init.js" }}
 {{ if .IsPage }}
-    {{ $jquery := resources.Get "/js/jquery.min.js" }}
-    {{ $lazysizes := resources.Get "/js/lazysizes.min.js"}}
-    {{ $prettify := resources.Get "/js/prettify.min.js" }}
-    {{ $dynamic := resources.Get "/js/dynamic.to.top.min.js" }}
-    {{ $main := resources.Get "/js/main.js" }}
-    {{ $page := resources.Get "/js/page.js" }}
-    {{ $lihtGallery := resources.Get "/js/lightGallery-all.min.js" }}
-    {{ $lihtGallery_init := resources.Get "/js/lightGallery-init.js" }}
-
 
     {{ if $postHasImages }}
      <link href="//lib.baomitu.com/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet">  
-     {{ $vendorscript := slice $jquery $lazysizes $prettify $dynamic $main $page $lihtGallery $lihtGallery_init | resources.Concat "/js/vendor0.js" | resources.Minify }} 
+     {{ $vendorscript := slice $jquery $lazysizes $prettify $dynamic $main $lihtGallery $lihtGallery_init | resources.Concat "/js/vendor_gallery.js" | resources.Minify }} 
      <script src="{{ printf "%s%s" $cdn_url $vendorscript.RelPermalink }}" async="" ></script>
     {{ else }}
-    {{ $vendorscript := slice $jquery $prettify $dynamic $main $page | resources.Concat "/js/vendor1.js" | resources.Minify }}
+    {{ $vendorscript := slice $jquery $prettify $dynamic $main | resources.Concat "/js/vendor_no_gallery.js" | resources.Minify }}
     <script src="{{ printf "%s%s" $cdn_url $vendorscript.RelPermalink }}" async=""></script>
     {{ end }}
   
-  
 {{ else }}
-    {{ $main := resources.Get "/js/main.js" | resources.Minify}}
+    {{ $main := slice  $jquery $main | resources.Concat "/js/vendor_main.js" | resources.Minify}}
     <script src="{{ printf "%s%s" $cdn_url $main.RelPermalink }}" async=""></script>
 {{ end }}