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

feat: artalk 支持點擊打開大圖

Browse Source 
feat: 設置了隨系統而切換淺色和深色模式後，評論和 mermaind 也會跟隨切換顏色
feat: artalk 最新評論，從 artalk 配置讀取頭像 CDN 和默認頭像
fix: 修復代碼塊在未展開時，點擊複製按鈕，無法複製的 bug
improvement: 代碼和性能優化
improvement: artalk 獲取評論數，由 LoadCountWidget 改為 loadCountWidget
This commit is contained in:
Jerry
2023-05-09 00:36:00 +08:00
Unverified
parent 52441b6bf5
commit 28d1744b9b
30 changed files with 214 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
source/js/main.js
View File

@@ -70,28 +70,17 @@ document.addEventListener('DOMContentLoaded', function () {
const highLight = GLOBAL_CONFIG.highlight
if (!highLight) return
const isHighlightCopy = highLight.highlightCopy
const isHighlightLang = highLight.highlightLang
const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
const highlightHeightLimit = highLight.highlightHeightLimit
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined
const $figureHighlight = plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
const isPrismjs = highLight.plugin === 'prismjs'
let highlightShrinkEle = ''
let highlightCopyEle = ''
const isPrismjs = plugin === 'prismjs'
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
if (isHighlightShrink !== undefined) {
highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
}
if (isHighlightCopy) {
highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
}
const highlightShrinkEle = isHighlightShrink !== undefined ? `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>` : ''
const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
const copy = (text, ctx) => {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
@@ -100,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
btf.snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
const prevEle = ctx.previousElementSibling
prevEle.innerText = GLOBAL_CONFIG.copy.success
prevEle.textContent = GLOBAL_CONFIG.copy.success
prevEle.style.opacity = 1
setTimeout(() => { prevEle.style.opacity = 0 }, 700)
}
@@ -108,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (GLOBAL_CONFIG.Snackbar !== undefined) {
btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
ctx.previousElementSibling.textContent = GLOBAL_CONFIG.copy.noSupport
}
}
}
@@ -119,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
$buttonParent.classList.add('copy-true')
const selection = window.getSelection()
const range = document.createRange()
if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
selection.removeAllRanges()
selection.addRange(range)
const text = selection.toString()
@@ -175,33 +164,29 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
if (isHighlightLang) {
if (isPrismjs) {
$figureHighlight.forEach(function (item) {
const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
if (isPrismjs) {
$figureHighlight.forEach(item => {
if (highlightLang) {
const langName = item.getAttribute('data-language') || 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
btf.wrap(item, 'figure', { class: 'highlight' })
createEle(highlightLangEle, item)
})
} else {
$figureHighlight.forEach(function (item) {
} else {
btf.wrap(item, 'figure', { class: 'highlight' })
createEle('', item)
}
})
} else {
$figureHighlight.forEach(function (item) {
if (highlightLang) {
let langName = item.getAttribute('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
createEle(highlightLangEle, item, 'hl')
})
}
} else {
if (isPrismjs) {
$figureHighlight.forEach(function (item) {
btf.wrap(item, 'figure', { class: 'highlight' })
createEle('', item)
})
} else {
$figureHighlight.forEach(function (item) {
} else {
createEle('', item, 'hl')
})
}
}
})
}
}
@@ -313,6 +298,12 @@ document.addEventListener('DOMContentLoaded', function () {
const scrollFn = function () {
const $rightside = document.getElementById('rightside')
const innerHeight = window.innerHeight + 56
let initTop = 0
let isChatShow = true
const $header = document.getElementById('page-header')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
const isShowPercent = GLOBAL_CONFIG.percent.rightside
// 當滾動條小于 56 的時候
if (document.body.scrollHeight <= innerHeight) {
@@ -321,19 +312,12 @@ document.addEventListener('DOMContentLoaded', function () {
}
// find the scroll direction
function scrollDirection (currentTop) {
const scrollDirection = currentTop => {
const result = currentTop > initTop // true is down & false is up
initTop = currentTop
return result
}
let initTop = 0
let isChatShow = true
const $header = document.getElementById('page-header')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
const isShowPercent = GLOBAL_CONFIG.percent.rightside
const scrollTask = btf.throttle(() => {
const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop)
@@ -492,6 +476,22 @@ document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', tocScrollFn)
}
const modeChangeFn = mode => {
if (!window.themeChange) {
return
}
const turnMode = item => window.themeChange[item](mode)
Object.keys(window.themeChange).forEach(item => {
if (['disqus', 'disqusjs'].includes(item)) {
setTimeout(() => turnMode(item), 300)
} else {
turnMode(item)
}
})
}
/**
* Rightside
*/
@@ -504,7 +504,7 @@ document.addEventListener('DOMContentLoaded', function () {
newEle.className = 'fas fa-sign-out-alt exit-readmode'
$body.appendChild(newEle)
function clickFn () {
const clickFn = () => {
$body.classList.remove('read-mode')
newEle.remove()
newEle.removeEventListener('click', clickFn)
@@ -513,8 +513,8 @@ document.addEventListener('DOMContentLoaded', function () {
newEle.addEventListener('click', clickFn)
},
switchDarkMode: () => { // Switch Between Light And Dark Mode
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') {
const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
if (willChangeMode === 'dark') {
activateDarkMode()
saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
@@ -523,11 +523,7 @@ document.addEventListener('DOMContentLoaded', function () {
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
// handle some cases
typeof utterancesTheme === 'function' && utterancesTheme()
typeof changeGiscusTheme === 'function' && changeGiscusTheme()
typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
typeof runMermaid === 'function' && window.runMermaid()
modeChangeFn(willChangeMode)
},
showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
@@ -545,9 +541,8 @@ document.addEventListener('DOMContentLoaded', function () {
},
hideAsideBtn: () => { // Hide aside
const $htmlDom = document.documentElement.classList
$htmlDom.contains('hide-aside')
? saveToLocal.set('aside-status', 'show', 2)
: saveToLocal.set('aside-status', 'hide', 2)
const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
saveToLocal.set('aside-status', saveStatus, 2)
$htmlDom.toggle('hide-aside')
},
@@ -596,21 +591,16 @@ document.addEventListener('DOMContentLoaded', function () {
}
/**
* 複製時加上版權信息
*/
* 複製時加上版權信息
*/
const addCopyright = () => {
const copyright = GLOBAL_CONFIG.copyright
document.body.oncopy = (e) => {
e.preventDefault()
let textFont; const copyFont = window.getSelection(0).toString()
const copyFont = window.getSelection(0).toString()
let textFont = copyFont
if (copyFont.length > copyright.limitCount) {
textFont = copyFont + '\n' + '\n' + '\n' +
copyright.languages.author + '\n' +
copyright.languages.link + window.location.href + '\n' +
copyright.languages.source + '\n' +
copyright.languages.info
} else {
textFont = copyFont
textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
}
if (e.clipboardData) {
return e.clipboardData.setData('text', textFont)
@@ -627,7 +617,7 @@ document.addEventListener('DOMContentLoaded', function () {
const $runtimeCount = document.getElementById('runtimeshow')
if ($runtimeCount) {
const publishDate = $runtimeCount.getAttribute('data-publishDate')
$runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
$runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`
}
}
@@ -638,7 +628,7 @@ document.addEventListener('DOMContentLoaded', function () {
const $lastPushDateItem = document.getElementById('last-push-date')
if ($lastPushDateItem) {
const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
$lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
$lastPushDateItem.textContent = btf.diffDate(lastPushDate, true)
}
}
@@ -771,10 +761,9 @@ document.addEventListener('DOMContentLoaded', function () {
const relativeDate = function (selector) {
selector.forEach(item => {
const $this = item
const timeVal = $this.getAttribute('datetime')
$this.innerText = btf.diffDate(timeVal, true)
$this.style.display = 'inline'
const timeVal = item.getAttribute('datetime')
item.textContent = btf.diffDate(timeVal, true)
item.style.display = 'inline'
})
}
@@ -789,6 +778,13 @@ document.addEventListener('DOMContentLoaded', function () {
clickFnOfSubMenu()
GLOBAL_CONFIG.islazyload && lazyloadImg()
GLOBAL_CONFIG.copyright !== undefined && addCopyright()
if (GLOBAL_CONFIG.autoDarkmode) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (saveToLocal.get('theme') !== undefined) return
e.matches ? modeChangeFn('dark') : modeChangeFn('light')
})
}
}
window.refreshFn = function () {