mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 20:30:53 +08:00
breaking change: 重構 gallery 標籤外掛
improvement: 首頁社交圖標左右邊距調整 feat: 文章版權增加圖標 improvement: 重構 main.js 代碼 improvement: 優化 pjax 下的性能 fix: 修復子目錄下,pjax 跳轉 404 錯誤 feat: getScript 增加 attribute 配置 improvement: 優化手機端 toc 打開和關閉特效 improvement: 文章進入特效改為 transform, 優化 stylus improvement: 目錄側邊欄出現滾動條時,元素不會被擠壓 feat: 文章左右對齊 improvement: 處理 waline 的 url 後面多 / 導致跨域的問題 fix: 修復夜間模式下,小屏幕的toc 滾動條顏色不明顯的 bug fix: 修復設置字體超過17px時,toc 裏面的邊框異常的 bug improvement: 優化語言文件部分用詞 improvement: disqus 和 disqusjs 的評論數獲取不到時,顯示為 0 improvement: disqusjs 的評論數改為 api 獲取 improvement: 代碼優化 improvement: 更新 plugins.yml
This commit is contained in:
@@ -7,87 +7,99 @@
|
||||
|
||||
hexo.extend.helper.register('inject_head_js', function () {
|
||||
const { darkmode, aside } = this.theme
|
||||
const start = darkmode.start ? darkmode.start : 6
|
||||
const end = darkmode.end ? darkmode.end : 18
|
||||
const start = darkmode.start || 6
|
||||
const end = darkmode.end || 18
|
||||
const { theme_color } = hexo.theme.config
|
||||
const themeColorLight = (theme_color && theme_color.enable && theme_color.meta_theme_color_light) || '#ffffff'
|
||||
const themeColorDark = (theme_color && theme_color.enable && theme_color.meta_theme_color_dark) || '#0d0d0d'
|
||||
|
||||
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,
|
||||
const createLocalStore = () => {
|
||||
return `
|
||||
win.saveToLocal = {
|
||||
set: (key, value, ttl) => {
|
||||
if (ttl === 0) return
|
||||
const now = Date.now()
|
||||
const expiry = now + ttl * 86400000
|
||||
const item = {
|
||||
value,
|
||||
expiry
|
||||
}
|
||||
localStorage.setItem(key, JSON.stringify(item))
|
||||
},
|
||||
|
||||
get: key => {
|
||||
const itemStr = localStorage.getItem(key)
|
||||
|
||||
if (!itemStr) {
|
||||
return undefined
|
||||
}
|
||||
const item = JSON.parse(itemStr)
|
||||
const now = Date.now()
|
||||
|
||||
if (now > item.expiry) {
|
||||
localStorage.removeItem(key)
|
||||
return undefined
|
||||
}
|
||||
return item.value
|
||||
}
|
||||
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)
|
||||
})
|
||||
`
|
||||
const createGetScript = () => {
|
||||
return `
|
||||
win.getScript = (url, attr = {}) => 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()
|
||||
}
|
||||
|
||||
const getCSS = `
|
||||
win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = url
|
||||
if (id) link.id = id
|
||||
link.onerror = reject
|
||||
link.onload = link.onreadystatechange = function() {
|
||||
const loadState = this.readyState
|
||||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||||
link.onload = link.onreadystatechange = null
|
||||
resolve()
|
||||
}
|
||||
document.head.appendChild(link)
|
||||
})
|
||||
`
|
||||
Object.keys(attr).forEach(key => {
|
||||
script.setAttribute(key, attr[key])
|
||||
})
|
||||
|
||||
let darkmodeJs = ''
|
||||
if (darkmode.enable) {
|
||||
darkmodeJs = `
|
||||
win.activateDarkMode = function () {
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
`
|
||||
}
|
||||
|
||||
const createGetCSS = () => {
|
||||
return `
|
||||
win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = url
|
||||
if (id) link.id = id
|
||||
link.onerror = reject
|
||||
link.onload = link.onreadystatechange = function() {
|
||||
const loadState = this.readyState
|
||||
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
|
||||
link.onload = link.onreadystatechange = null
|
||||
resolve()
|
||||
}
|
||||
document.head.appendChild(link)
|
||||
})
|
||||
`
|
||||
}
|
||||
|
||||
const createDarkmodeJs = () => {
|
||||
if (!darkmode.enable) return ''
|
||||
|
||||
let darkmodeJs = `
|
||||
win.activateDarkMode = () => {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorDark}')
|
||||
}
|
||||
}
|
||||
win.activateLightMode = function () {
|
||||
win.activateLightMode = () => {
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
if (document.querySelector('meta[name="theme-color"]') !== null) {
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${themeColorLight}')
|
||||
@@ -114,7 +126,7 @@ hexo.extend.helper.register('inject_head_js', function () {
|
||||
const isNight = hour <= ${start} || hour >= ${end}
|
||||
isNight ? activateDarkMode() : activateLightMode()
|
||||
}
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
|
||||
if (saveToLocal.get('theme') === undefined) {
|
||||
e.matches ? activateDarkMode() : activateLightMode()
|
||||
}
|
||||
@@ -133,15 +145,18 @@ hexo.extend.helper.register('inject_head_js', function () {
|
||||
`
|
||||
} else {
|
||||
darkmodeJs += `
|
||||
if (t === 'dark') activateDarkMode()
|
||||
else if (t === 'light') activateLightMode()
|
||||
`
|
||||
if (t === 'dark') activateDarkMode()
|
||||
else if (t === 'light') activateLightMode()
|
||||
`
|
||||
}
|
||||
|
||||
return darkmodeJs
|
||||
}
|
||||
|
||||
let asideStatus = ''
|
||||
if (aside.enable && aside.button) {
|
||||
asideStatus = `
|
||||
const createAsideStatus = () => {
|
||||
if (!aside.enable || !aside.button) return ''
|
||||
|
||||
return `
|
||||
const asideStatus = saveToLocal.get('aside-status')
|
||||
if (asideStatus !== undefined) {
|
||||
if (asideStatus === 'hide') {
|
||||
@@ -153,14 +168,16 @@ hexo.extend.helper.register('inject_head_js', function () {
|
||||
`
|
||||
}
|
||||
|
||||
const detectApple = `
|
||||
const detectApple = () => {
|
||||
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
|
||||
document.documentElement.classList.add('apple')
|
||||
const createDetectApple = () => {
|
||||
return `
|
||||
const detectApple = () => {
|
||||
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
|
||||
document.documentElement.classList.add('apple')
|
||||
}
|
||||
}
|
||||
}
|
||||
detectApple()
|
||||
detectApple()
|
||||
`
|
||||
}
|
||||
|
||||
return `<script>(win=>{${localStore + getScript + getCSS + darkmodeJs + asideStatus + detectApple}})(window)</script>`
|
||||
return `<script>(win=>{${createLocalStore() + createGetScript() + createGetCSS() + createDarkmodeJs() + createAsideStatus() + createDetectApple()}})(window)</script>`
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user