biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-12 22:17:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 修復夜間模式下，閲讀模式代碼塊背景顔色的顯示bug

Browse Source 
fix: 修復在 chrome上，進入頁面時，頁面元素會出現模糊到清晰的bug close #479
fix: 修復 文章頁面上滑子菜單圖標文字無法顯示的 bug close #481
improvement: meta description 限制在150字以內 close #480
improvement: pug優化和結構調整
This commit is contained in:
Jerry
2021-01-29 23:38:13 +08:00
parent 6962353af6
commit 2cd1aa5bc9
13 changed files with 165 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/includes/head.pug
View File

@@ -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)})

45
layout/includes/head/config.pug
View File

@@ -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)
})

2
layout/includes/head/config_site.pug
View File

@@ -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()},

71
layout/includes/head/js.pug
View File

@@ -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')
| }
| })()

2
layout/includes/third-party/pjax.pug vendored
View File

@@ -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',

2
package.json
View File

@@ -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": {

145
scripts/helpers/inject_head_js.js Normal file
View File

@@ -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 `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + changFontAside}})(window)</script>`
})

2
scripts/helpers/page.js
View File

@@ -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

1
source/css/_global/function.styl
View File

@@ -127,6 +127,7 @@ if hexo-config('avatar.effect') == true
transform: translateY(50px)
100%
filter: none
opacity: 1
transform: translateY(0)

5
source/css/_layout/head.styl
View File

@@ -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

1
source/css/_layout/rightside.styl
View File

@@ -24,7 +24,6 @@
color: var(--btn-color)
text-align: center
font-size: 16px
cursor: pointer
&:hover
background-color: var(--btn-hover-color)

8
source/css/_mode/readmode.styl
View File

@@ -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
@@ -193,3 +191,7 @@ if hexo-config('readmode')
filter: none
background-color: var(--readmode-light-color) !important
color: var(--font-color)
&:before,
.note-icon
color: var(--font-color)

4
source/css/_page/common.styl
View File

@@ -46,3 +46,7 @@
& > div
width: 100% !important
// fix chrome enter animation blur
.layout
filter: blur(0)