✏️ Add theme-toggle function on mobile devices & fixed mobile menu-toggle style on some platform
This commit is contained in:
Covey
parent
33c59f8c49
commit
c4b38f085a
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,25 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
var _Blog = window._Blog || {};
|
||||
jQuery(function($) {
|
||||
|
||||
_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');
|
||||
|
||||
}
|
||||
|
||||
_Blog.changeTitle = function() {
|
||||
var currentTitle = document.title;
|
||||
window.onblur = function() {
|
||||
document.title = 'I miss you!（＞﹏＜）';
|
||||
@ -11,34 +27,30 @@ _Blog.changeTitle = function() {
|
||||
window.onfocus = function() {
|
||||
document.title = currentTitle;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
_Blog.toggleTheme = function() {
|
||||
_Blog.toggleTheme = function() {
|
||||
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
|
||||
const themeSwitchEL = document.querySelector('.theme-switch')
|
||||
const isDark = currentTheme === 'dark'
|
||||
document.body.classList.toggle('dark-theme', isDark)
|
||||
|
||||
themeSwitchEL.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-theme')
|
||||
$('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',
|
||||
)
|
||||
window.localStorage.setItem('theme', 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.toggleMobileMenu = function() {
|
||||
$('.menu-toggle').on('click', () => {
|
||||
$('.menu-toggle').toggleClass('active')
|
||||
$('#mobile-menu').toggleClass('active')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
_Blog.toggleTheme()
|
||||
_Blog.changeTitle()
|
||||
_Blog.toggleMobileMenu()
|
||||
}());
|
||||
$(document).ready(function() {
|
||||
_Blog.prettify()
|
||||
_Blog.changeTitle()
|
||||
_Blog.toggleTheme()
|
||||
_Blog.toggleMobileMenu()
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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>
|
||||
<button class="menu-toggle">
|
||||
<div> <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-xihuan"></i></a> <a href="{{ "/" | absURL}}">{{ .Site.Title }}</a></div>
|
||||
<div class="menu-toggle">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu" id="mobile-menu">
|
||||
|
||||
@ -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 }}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user