diff --git a/layout/includes/head.pug b/layout/includes/head.pug index 6d93a13..35b95c3 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -72,6 +72,6 @@ if theme.blog_title_font &&　theme.blog_title_font.font_link include ./head/config_site.pug include ./head/noscript.pug -!=partial('includes/head/js', {}, {cache: true}) +!=fragment_cache('injectHeadJs', function(){return inject_head_js()}) !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)}) \ No newline at end of file diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index b8d2a9a..710345d 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -124,49 +124,4 @@ script. isPhotoFigcaption: !{theme.photofigcaption}, islazyload: !{theme.lazyload.enable}, isanchor: !{theme.anchor} - }; - - const saveToLocal = { - // ttl 單位是 天 - set: function setWithExpiry(key, value, ttl) { - if (ttl === 0) return - const now = new Date() - const expiryDay = ttl * 86400000 - const item = { - value: value, - expiry: now.getTime() + expiryDay, - } - localStorage.setItem(key, JSON.stringify(item)) - }, - - get: function getWithExpiry(key) { - const itemStr = localStorage.getItem(key) - - if (!itemStr) { - return undefined - } - const item = JSON.parse(itemStr) - const now = new Date() - - if (now.getTime() > item.expiry) { - localStorage.removeItem(key) - return undefined - } - return item.value - } } - - // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript - const getScript = url => new Promise((resolve, reject) => { - const script = document.createElement('script') - script.src = url - script.async = true - script.onerror = reject - script.onload = script.onreadystatechange = function() { - const loadState = this.readyState - if (loadState && loadState !== 'loaded' && loadState !== 'complete') return - script.onload = script.onreadystatechange = null - resolve() - } - document.head.appendChild(script) - }) \ No newline at end of file diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug index 98c3d22..1b951be 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -8,7 +8,7 @@ var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true ) - -script#config_change +script#config-diff . var GLOBAL_CONFIG_SITE = { isPost: !{is_post()}, diff --git a/layout/includes/head/js.pug b/layout/includes/head/js.pug deleted file mode 100644 index 09044df..0000000 --- a/layout/includes/head/js.pug +++ /dev/null @@ -1,71 +0,0 @@ -script - | (function () { - - if theme.darkmode.enable - | window.activateDarkMode = function () { - | document.documentElement.setAttribute('data-theme', 'dark') - | if (document.querySelector('meta[name="theme-color"]') !== null) { - | document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d') - | } - | } - | window.activateLightMode = function () { - | document.documentElement.setAttribute('data-theme', 'light') - | if (document.querySelector('meta[name="theme-color"]') !== null) { - | document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff') - | } - | } - - | const autoChangeMode = '#{theme.darkmode.autoChangeMode}' - | const t = saveToLocal.get('theme') - | if (autoChangeMode === '1') { - | const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches - | const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches - | const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches - | const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified - - | if (t === undefined) { - | if (isLightMode) activateLightMode() - | else if (isDarkMode) activateDarkMode() - | else if (isNotSpecified || hasNoSupport) { - | const now = new Date() - | const hour = now.getHours() - | const isNight = hour <= 6 || hour >= 18 - | isNight ? activateDarkMode() : activateLightMode() - | } - | window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { - | if (saveToLocal.get('theme') === undefined) { - | e.matches ? activateDarkMode() : activateLightMode() - | } - | }) - | } else if (t === 'light') activateLightMode() - | else activateDarkMode() - | } else if (autoChangeMode === '2') { - | const now = new Date() - | const hour = now.getHours() - | const isNight = hour <= 6 || hour >= 18 - | if (t === undefined) isNight ? activateDarkMode() : activateLightMode() - | else if (t === 'light') activateLightMode() - | else activateDarkMode() - | } else { - | if (t === 'dark') activateDarkMode() - | else if (t === 'light') activateLightMode() - | } - - if theme.aside.enable && theme.aside.button - | const asideStatus = saveToLocal.get('aside-status') - | if (asideStatus !== undefined) { - | if (asideStatus === 'hide') { - | document.documentElement.classList.add('hide-aside') - | } else { - | document.documentElement.classList.remove('hide-aside') - | } - | } - - if theme.change_font_size - | const fontSizeVal = saveToLocal.get('global-font-size') - | if (fontSizeVal !== undefined) { - | document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px') - | } - - | })() - diff --git a/layout/includes/third-party/pjax.pug b/layout/includes/third-party/pjax.pug index 7df6de3..92c389c 100644 --- a/layout/includes/third-party/pjax.pug +++ b/layout/includes/third-party/pjax.pug @@ -7,7 +7,7 @@ script(src=url_for(theme.CDN.pjax)) script. let pjaxSelectors = [ 'title', - '#config_change', + '#config-diff', '#body-wrap', '#rightside-config-hide', '#rightside-config-show', diff --git a/package.json b/package.json index 3e72c6e..f98960d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.6.0-b6", + "version": "3.6.0-b7", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/helpers/inject_head_js.js b/scripts/helpers/inject_head_js.js new file mode 100644 index 0000000..93f714d --- /dev/null +++ b/scripts/helpers/inject_head_js.js @@ -0,0 +1,145 @@ +/** + * Butterfly + * inject js to head + */ + +'use strict' + +hexo.extend.helper.register('inject_head_js', function () { + const { darkmode, aside, change_font_size } = this.theme + + const localStore = ` + win.saveToLocal = { + set: function setWithExpiry(key, value, ttl) { + if (ttl === 0) return + const now = new Date() + const expiryDay = ttl * 86400000 + const item = { + value: value, + expiry: now.getTime() + expiryDay, + } + localStorage.setItem(key, JSON.stringify(item)) + }, + + get: function getWithExpiry(key) { + const itemStr = localStorage.getItem(key) + + if (!itemStr) { + return undefined + } + const item = JSON.parse(itemStr) + const now = new Date() + + if (now.getTime() > item.expiry) { + localStorage.removeItem(key) + return undefined + } + return item.value + } + } + ` + + // https://stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript + const getScript = ` + win.getScript = url => new Promise((resolve, reject) => { + const script = document.createElement('script') + script.src = url + script.async = true + script.onerror = reject + script.onload = script.onreadystatechange = function() { + const loadState = this.readyState + if (loadState && loadState !== 'loaded' && loadState !== 'complete') return + script.onload = script.onreadystatechange = null + resolve() + } + document.head.appendChild(script) + }) + ` + + let darkmodeJs = '' + if (darkmode.enable) { + darkmodeJs = ` + win.activateDarkMode = function () { + document.documentElement.setAttribute('data-theme', 'dark') + if (document.querySelector('meta[name="theme-color"]') !== null) { + document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d') + } + } + win.activateLightMode = function () { + document.documentElement.setAttribute('data-theme', 'light') + if (document.querySelector('meta[name="theme-color"]') !== null) { + document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff') + } + } + const t = saveToLocal.get('theme') + ` + + const autoChangeMode = darkmode.autoChangeMode + + if (autoChangeMode === 1) { + darkmodeJs += ` + const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches + const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches + const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified + + if (t === undefined) { + if (isLightMode) activateLightMode() + else if (isDarkMode) activateDarkMode() + else if (isNotSpecified || hasNoSupport) { + const now = new Date() + const hour = now.getHours() + const isNight = hour <= 6 || hour >= 18 + isNight ? activateDarkMode() : activateLightMode() + } + window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { + if (saveToLocal.get('theme') === undefined) { + e.matches ? activateDarkMode() : activateLightMode() + } + }) + } else if (t === 'light') activateLightMode() + else activateDarkMode() + ` + } else if (autoChangeMode === 2) { + darkmodeJs += ` + const now = new Date() + const hour = now.getHours() + const isNight = hour <= 6 || hour >= 18 + if (t === undefined) isNight ? activateDarkMode() : activateLightMode() + else if (t === 'light') activateLightMode() + else activateDarkMode() + ` + } else { + darkmodeJs += ` + if (t === 'dark') activateDarkMode() + else if (t === 'light') activateLightMode() + ` + } + } + + let asideStatus = '' + if (aside.enable && aside.button) { + asideStatus = ` + const asideStatus = saveToLocal.get('aside-status') + if (asideStatus !== undefined) { + if (asideStatus === 'hide') { + document.documentElement.classList.add('hide-aside') + } else { + document.documentElement.classList.remove('hide-aside') + } + } + ` + } + + let changFontAside = '' + if (change_font_size) { + changFontAside = ` + const fontSizeVal = saveToLocal.get('global-font-size') + if (fontSizeVal !== undefined) { + document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px') + } + ` + } + + return `` +}) diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js index 6d31e2a..3042d95 100644 --- a/scripts/helpers/page.js +++ b/scripts/helpers/page.js @@ -15,7 +15,7 @@ hexo.extend.helper.register('page_description', function () { let description = page.description || page.content || page.title || config.description if (description) { - description = escapeHTML(stripHTML(description).substring(0, 200) + description = escapeHTML(stripHTML(description).substring(0, 150) .trim() ).replace(/\n/g, ' ') return description diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index e77ff53..a8c1063 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -127,6 +127,7 @@ if hexo-config('avatar.effect') == true transform: translateY(50px) 100% + filter: none opacity: 1 transform: translateY(0) diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index f2a7413..37ca649 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -348,8 +348,8 @@ _:future, display: inline-block padding: .3rem .7rem width: 100% - color: var(--font-color) - text-shadow: none + color: var(--font-color) !important + text-shadow: none !important &.hide-menu #toggle-menu @@ -376,3 +376,4 @@ _:future, padding-bottom: .3rem text-shadow: .05rem .05rem .1rem rgba($dark-black, .3) font-size: .78em + cursor: pointer diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index 39d1299..05678c2 100644 --- a/source/css/_layout/rightside.styl +++ b/source/css/_layout/rightside.styl @@ -24,7 +24,6 @@ color: var(--btn-color) text-align: center font-size: 16px - cursor: pointer &:hover background-color: var(--btn-hover-color) diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 1c67e8c..dbe2308 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -38,9 +38,7 @@ if hexo-config('readmode') border-radius: 8px background: var(--exit-btn-bg) color: var(--exit-btn-color) - text-align: center font-size: 16px - cursor: pointer transition: background .3s &:hover @@ -86,7 +84,7 @@ if hexo-config('readmode') pre, .highlight:not(.js-file-line-container) - background: var(-highlight-bg) !important + background: var(--highlight-bg) !important * color: var(--font-color) !important @@ -192,4 +190,8 @@ if hexo-config('readmode') border-left-color: var(--gray) !important filter: none background-color: var(--readmode-light-color) !important - color: var(--font-color) \ No newline at end of file + color: var(--font-color) + + &:before, + .note-icon + color: var(--font-color) diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index fcb6438..d60e178 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -45,4 +45,8 @@ max-width: 1300px & > div - width: 100% !important \ No newline at end of file + width: 100% !important + +// fix chrome enter animation blur +.layout + filter: blur(0) \ No newline at end of file