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

1. chore: 只支持hexo 4.2.0以上版本

Browse Source 
2. feat: 可隱藏Mobile sidebar 子菜單
3. refactor: archives和card-post 改為flex佈局
4. feat: 當寬度小於1024時，點擊toc滾動，增加滾動效果
5. feat: 點擊滾動，如果滾動是向上時，將會偏移60px， 避免導航欄遮擋 close #317
6. feat: 可配置font-size
7. refactor: 去除字體放大、縮小按鈕
8. refactor: 部分css由'px'改為'em'，適應font-size值改變而改變
9.  feat: pjax增加exclude配置
10. fix: 修復canvas_nest 配置沒有生效的Bugs
11. feat: 新增 cnzz_analytics
12. feat: 騰訊分析改為騰訊移動分析，並適配pjax
13. perf: 改cookies為localstore存儲
14. feat: 設置中的theme_color可單獨配置幾個，而不需要全部開啟 close #314
15. feat: butterfly.yml 採用deepMerge, 與_config文件進行合併而不是替換
16. fix: 修復rightsize-bottom配置無效的bug
17. refactor: aside增加position sticky
18. refactor: 調整webinfo 寬度小時的顯示
19. feat: 更改addtoany item的寫法
20. refactor: aside 內容邊距調整
21. feat: 增加最後更新時間顯示
This commit is contained in:
Jerry
2020-08-18 00:33:05 +08:00
Unverified
parent 195ae9f4c5
commit c512a5fda5
66 changed files with 1032 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
source/js/main.js
View File

@@ -1,3 +1,4 @@
/**
* 當menu過多時，自動適配，避免UI錯亂
* @param {*} n
@@ -5,9 +6,9 @@
* 傳入 2 正常狀態下
*/
const blogNameWidth = $('#blog_name').width()
const blogNameWidth = $('#site-name').width()
const menusWidth = $('.menus').width()
const sidebarWidth = $('#sidebar').width()
const sidebarWidth = $('#sidebar').width() || 300
const adjustMenu = function (n) {
const $nav = $('#nav')
@@ -17,13 +18,9 @@ const adjustMenu = function (n) {
else t = blogNameWidth + menusWidth > $nav.width() - 30
if (t) {
$nav.find('.toggle-menu').addClass('is-visible-inline')
$nav.find('.menus_items').addClass('is-invisible')
$nav.find('#search_button span').addClass('is-invisible')
$nav.addClass('hide-menu')
} else {
$nav.find('.toggle-menu').removeClass('is-visible-inline')
$nav.find('.menus_items').removeClass('is-invisible')
$nav.find('#search_button span').removeClass('is-invisible')
$nav.removeClass('hide-menu')
}
}
@@ -59,18 +56,17 @@ const closeSidebar = () => {
$('#body-wrap').animate({
paddingLeft: 0
}, 400)
$('#toggle-sidebar').css({
transform: 'rotateZ(0deg)',
color: '#1F2D3D',
opacity: '1'
})
setTimeout(function () {
adjustMenu(2)
}, 400)
if ($('#nav').hasClass('hide-menu')) {
setTimeout(function () {
adjustMenu(2)
}, 400)
}
}
const openSidebar = () => {
adjustMenu(1)
if (!$('#nav').hasClass('hide-menu')) {
adjustMenu(1)
}
$('#sidebar').addClass('tocOpenPc').animate({
left: 0
}, 400)
@@ -80,11 +76,6 @@ const openSidebar = () => {
$('#body-wrap').animate({
paddingLeft: 300
}, 400)
$('#toggle-sidebar').css({
transform: 'rotateZ(180deg)',
color: '#99a9bf',
opacity: '1'
})
}
const toggleSidebar = function () {
@@ -167,7 +158,7 @@ const sidebarFn = () => {
})
const mql = window.matchMedia('(max-width: 1024px)')
mql.addListener(function (ev) {
mql.addEventListener('change', function (ev) {
if (ev.matches) {
if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
} else {
@@ -178,11 +169,10 @@ const sidebarFn = () => {
// toc元素點擊
$sidebar.find('.toc-link').on('click', function (e) {
e.preventDefault()
scrollToDest(decodeURI($(this).attr('href')))
if (window.innerWidth <= 1024) {
closeMobileSidebar('toc')
} else {
e.preventDefault()
scrollToDest(decodeURI($(this).attr('href')))
}
})
}
@@ -201,12 +191,15 @@ const scrollDownInIndex = () => {
* 只適用於Hexo默認的代碼渲染
*/
const addHighlightTool = function () {
const $figureHighlight = $('figure.highlight')
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlightLang
const isHighlightCopy = GLOBAL_CONFIG.highlight.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"')
if (isShowTool && $figureHighlight.length) {
const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'
if ($figureHighlight.length && (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined)) {
let highlightShrinkEle = ''
let highlightCopyEle = ''
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
@@ -220,16 +213,26 @@ const addHighlightTool = function () {
}
if (isHighlightLang) {
let langName
$figureHighlight.each(function () {
const $this = $(this)
langName = $this.attr('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
})
if (isPrismjs) {
$figureHighlight.each(function () {
const $this = $(this)
const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.wrap('<figure class="highlight"></figure>').before(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
})
} else {
$figureHighlight.each(function (i, o) {
const $this = $(this)
let langName = $this.attr('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
const highlightLangEle = `<div class="code-lang">${langName}</div>`
$this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
})
}
} else {
$figureHighlight.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`)
const ele = `<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`
if (isPrismjs) $figureHighlight.wrap('<figure class="highlight"></figure>').before(ele)
else $figureHighlight.prepend(ele)
}
/**
@@ -237,7 +240,7 @@ const addHighlightTool = function () {
*/
if (isHighlightShrink !== undefined) {
$figureHighlight.find('.highlight-tools >.expand').on('click', function () {
$('.highlight-tools >.expand').on('click', function () {
const $this = $(this)
const $table = $this.parent().nextAll()
$this.toggleClass('closed')
@@ -277,12 +280,13 @@ const addHighlightTool = function () {
}
// click events
$figureHighlight.find('.highlight-tools >.copy-button').on('click', function () {
$('.highlight-tools >.copy-button').on('click', function () {
const $buttonParent = $(this).parents('figure.highlight')
$buttonParent.addClass('copy-true')
const selection = window.getSelection()
const range = document.createRange()
range.selectNodeContents($buttonParent.find('table .code pre')[0])
if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0])
else range.selectNodeContents($buttonParent.find('table .code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
const text = selection.toString()
@@ -477,7 +481,7 @@ const tocFn = function () {
let currentId = ''
list.each(function () {
const head = $(this)
if (top > head.offset().top - 25) {
if (top > head.offset().top - 70) {
if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
else currentId = '#' + $(this).attr('id')
}
@@ -537,33 +541,17 @@ $rightsideEle.on('click', '#readmode', function () {
$('body').toggleClass('read-mode')
})
// font change
const originFontSize = $('body').css('font-size')
$rightsideEle.on('click', '#font_plus', () => {
const nowFontSize = parseFloat($('body').css('font-size'))
if (nowFontSize < 20) {
$('body').css('font-size', nowFontSize + 1)
}
})
$rightsideEle.on('click', '#font_minus', () => {
const nowFontSize = parseFloat($('body').css('font-size'))
if (nowFontSize > 10) {
$('body').css('font-size', nowFontSize - 1)
}
})
// Switch Between Light And Dark Mode
if ($('#darkmode').length) {
const switchReadMode = function () {
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
if (nowMode === 'light') {
activateDarkMode()
Cookies.set('theme', 'dark', 2)
saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
activateLightMode()
Cookies.set('theme', 'light', 2)
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
}
@@ -590,7 +578,7 @@ $rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
const clickFnOfSubMenu = function () {
$('#mobile-sidebar-menus .expand').on('click', function () {
$(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
$(this).toggleClass('closed')
$(this).toggleClass('hide')
})
$(window).on('touchmove', function (e) {
@@ -633,7 +621,23 @@ const addRuntime = () => {
const $runtimeCount = $('#webinfo-runtime-count')
if ($runtimeCount.length) {
const publishDate = $runtimeCount.attr('publish_date')
$runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime_unit)
$runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
}
}
/**
* 最後一次更新時間
*/
const addLastPushDate = () => {
const $lastPushDateItem = $('.webinfo-last-push-date')
if ($lastPushDateItem.length) {
const lastPushDate = $lastPushDateItem.attr('last-push-date')
const diffDay = diffDate(lastPushDate)
if (diffDay > 365) {
$lastPushDateItem.text(lastPushDate)
} else {
$lastPushDateItem.text(diffDay + ' ' + GLOBAL_CONFIG.last_push_date)
}
}
}
@@ -683,25 +687,33 @@ const clickFnOfTagHide = function () {
}
}
const clickFnOfTabs = function () {
const $tab = $('#article-container .tabs')
$tab.find('.tab > button').on('click', function (e) {
const $this = $(this)
const $tabItem = $this.parent()
const tabsFn = {
clickFnOfTabs: function () {
const $tab = $('#article-container .tabs')
$tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) {
const $this = $(this)
const $tabItem = $this.parent()
if (!$tabItem.hasClass('active')) {
const $tabContent = $this.parents('.nav-tabs').next()
$tabItem.siblings('.active').removeClass('active')
$tabItem.addClass('active')
const tabId = $this.attr('data-href')
$tabContent.find('> .tab-item-content').removeClass('active')
$tabContent.find(`> ${tabId}`).addClass('active')
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
if ($isTabJustifiedGallery.length > 0) {
initJustifiedGallery($isTabJustifiedGallery)
if (!$tabItem.hasClass('active')) {
const $tabContent = $this.parents('.nav-tabs').next()
$tabItem.siblings('.active').removeClass('active')
$tabItem.addClass('active')
const tabId = $this.attr('data-href')
$tabContent.find('> .tab-item-content').removeClass('active')
$tabContent.find(`> ${tabId}`).addClass('active')
const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
if ($isTabJustifiedGallery.length > 0) {
initJustifiedGallery($isTabJustifiedGallery)
}
}
}
})
})
},
backToTop: () => {
const backToTopBtn = $('#article-container .tabs .tab-to-top')
backToTopBtn.on('click', function () {
scrollToDest($(this).parents('.tabs'))
})
}
}
const toggleCardCategory = function () {
@@ -790,15 +802,17 @@ const refreshFn = function () {
sidebarFn()
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
addHighlightTool()
GLOBAL_CONFIG.highlight && addHighlightTool()
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
runJustifiedGallery()
addLightBox()
scrollFn()
GLOBAL_CONFIG.runtime && addRuntime()
GLOBAL_CONFIG.last_push_date && addLastPushDate()
addTableWrap()
clickFnOfTagHide()
clickFnOfTabs()
tabsFn.clickFnOfTabs()
tabsFn.backToTop()
toggleCardCategory()
switchComments()
}