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

🔖 2.2.5發佈

Browse Source 
更新内容請看 https://github.com/jerryc127/hexo-theme-butterfly/releases
This commit is contained in:
Jerry
2020-03-28 03:13:30 +08:00
Unverified
parent 0ba52293a2
commit 16a3ac510d
35 changed files with 322 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
source/css/_global/index.styl
View File

@@ -62,7 +62,7 @@ h6
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
opacity: 0
// opacity: 0
cursor: pointer
transition: all .2s
@@ -143,6 +143,9 @@ table
.is_visible
display: block !important
.is-visible-inline
display: inline-block !important
.is_invisible
display: none !important
@@ -187,6 +190,9 @@ img[src=''],
img:not([src])
opacity: 0
.img-alt
margin: -.5rem 0 .5rem
// hexo tag video
.video-container
position: relative
@@ -240,8 +246,8 @@ img:not([src])
margin: 2rem 0 !important
.ad_height
height: auto !important
display: block !important
height: auto !important
#content-inner,
#footer
@@ -250,9 +256,8 @@ img:not([src])
#nav
animation: nav-effect 1s
#page-header
animation: header-effect 1s
// #page-header
// animation: header-effect 1s
#site_title,
#site_subtitle
animation: titlescale 1s
@@ -290,10 +295,10 @@ if hexo-config('avatar.effect') == true
animation: tocsidebarRtoL .5s
.sidebar-toc__progress
animation: tocsidebarRtoL .5s
animation: tocsidebarRtoL .7s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
animation: tocsidebarRtoL .9s
@keyframes scroll-down-effect
0%
@@ -321,9 +326,9 @@ if hexo-config('avatar.effect') == true
0%
opacity: 0
50%
60%
opacity: 0
transform: translateY(-50px)
transform: translateY(-30px)
100%
opacity: 1

4
source/css/_layout/aside.styl
View File

@@ -185,10 +185,6 @@
&.child
padding: 0 0 0 1.2rem
.card-archives
.archive-list-link-more
justify-content: center
.card-webinfo
.webinfo
padding: .2rem 1rem

3
source/css/_layout/flink.styl
View File

@@ -52,6 +52,9 @@
border-radius: 35px
transition: all .3s
.img-alt
display: none
.md-links-title
overflow: hidden
padding: 16px 10px 0 0

3
source/css/_layout/gallery.styl
View File

@@ -100,6 +100,9 @@ figure.gallery-group
img
opacity: 0
.img-alt
display: none
.fancybox
width: auto
text-align: inherit

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

@@ -105,7 +105,7 @@
> .meta-secondline,
> .meta-thirdline
display inline
display: inline
.word-count,
#busuanzi_value_page_pv,
@@ -118,7 +118,7 @@
&__icon
margin-right: .2rem
a
color: $light-grey
transition: all .3s ease-out
@@ -136,16 +136,22 @@
height: 58px
border: none
font-size: 18px
opacity: 0
transition: all .5s
&:not(.fixed)
.menus
padding-right: 0 !important
.toggle-menu
display: none
padding: .1rem 0 0 .3rem
vertical-align: top
&:hover
color: $white
&.is_visible
&.is-visible-inline
.site-page
font-size: inherit
@@ -163,11 +169,6 @@
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
&.open-sidebar
.menus,
#search_button
display: none
a,
#site-name,
.toggle-menu
@@ -189,71 +190,75 @@
font-weight: bold
cursor: pointer
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
.menus_items
display: inline
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
.menus_item
position: relative
display: inline-block
padding: 0 0 0 .7rem
&:hover
.menus_item_child
display: block
.menus-expand
transform: rotate(180deg) !important
.menus-expand
padding: 4px
transition: all .3s
transform: rotate(0)
& > a
&:after
width: 100%
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
padding: 1px 10px
list-style: none
text-align: center
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ''
transition: all .3s ease-in-out
&:hover
background: $theme-color
&:after
width: 100%
a
color: $font-black
text-shadow: none
.menus_item_child
position: absolute
right: 0
display: none
margin-top: 8px
padding: 0
width: max-content
background-color: alpha($white, .8)
box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
animation: sub_menus .3s .1s ease both
&:before
position: absolute
top: -8px
left: 0
width: 100%
height: 20px
content: ''
li
padding: 1px 10px
list-style: none
text-align: center
&:hover
background: $theme-color
a
color: $font-black
text-shadow: none
#search_button
display: inline
padding: 0 0 0 .7rem
.site-page
@@ -300,7 +305,7 @@
.post-meta__categories
display: none
.meta-thirdline
display: block

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

@@ -100,6 +100,7 @@
& > time
color: $theme-meta-color
cursor: pointer
& > .article-meta
color: $theme-meta-color

130
source/js/main.js
View File

@@ -1,60 +1,55 @@
$(function () {
const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
const isTocContent = $('#sidebar .sidebar-toc__content').children().length > 0
const $pageHead = $('#page-header')
const $rightside = $('#rightside')
const $body = $('body')
/**
* 當menu過多時，自動適配，避免UI錯亂
*/
const searchWidth = $('#search_button').outerWidth() !== undefined ? $('#search_button').outerWidth() : 0
const blogNameWidth = $('#blog_name').width()
var mw = 0
var $menusItem = $pageHead.find('.menus_item')
for (var i = 0; i < $menusItem.length; i++) {
mw = mw + $menusItem.eq(i).outerWidth()
}
/**
* 傳入 1 sidebar打開時
* 傳入 1 sidebar打開時
* 傳入 2 正常狀態下
* 傳入 3 resize時使用
*/
var blogNameWidth = $('#blog_name').width()
var menusWidth = $('.menus').width()
var sidebarWidth = $('#sidebar').width()
function isAdjust (n) {
var t
if (n === 1) {
t = blogNameWidth + searchWidth + mw > $pageHead.width() - 300
t = blogNameWidth + menusWidth > $pageHead.width() - sidebarWidth - 20
} else if (n === 2) {
t = blogNameWidth + searchWidth + mw > $pageHead.width()
t = blogNameWidth + menusWidth > $pageHead.width() - 20
}
if (t) headerAdjust()
else headerAdjustBack()
}
function headerAdjust () {
$pageHead.find('.toggle-menu').addClass('is-visible-inline')
$pageHead.find('.menus_items').addClass('is_invisible')
$pageHead.find('#search_button span').addClass('is_invisible')
}
function headerAdjustBack () {
$pageHead.find('.toggle-menu').removeClass('is-visible-inline')
$pageHead.find('.menus_items').removeClass('is_invisible')
$pageHead.find('#search_button span').removeClass('is_invisible')
}
// 初始化header
function initAjust () {
if (window.innerWidth < 768) headerAdjust()
else isAdjust(2)
}
initAjust()
function headerAdjust () {
$pageHead.find('.toggle-menu').addClass('is_visible')
$pageHead.find('.menus').addClass('is_invisible')
$pageHead.find('#search_button span').addClass('is_invisible')
}
function headerAdjustBack () {
$pageHead.find('.toggle-menu').removeClass('is_visible')
$pageHead.find('.menus').removeClass('is_invisible')
$pageHead.find('#search_button span').removeClass('is_invisible')
}
$('#page-header').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
$(window).on('resize', function () {
if (!$pageHead.hasClass('open-sidebar')) {
if ($('#sidebar').hasClass('tocOpenPc') && $pageHead.hasClass('fixed')) {
isAdjust(1)
} else {
initAjust()
}
})
@@ -72,21 +67,12 @@ $(function () {
/**
* 進入post頁sidebar處理
*/
var isSidebarOpen = $('#toggle-sidebar').hasClass('on') && isTocContent
var isPcSidebarOpen = false
if (window.innerWidth > 1024 && isSidebarOpen) {
setTimeout(function () {
openSidebar()
}, 400)
}
// 當toc爲空時，隱藏toc按鈕
if (isTocContent) {
$('#toggle-sidebar').css('opacity', '1')
} else {
$('#toggle-sidebar').css('display', 'none')
$('#mobile-toc-button').css('display', 'none')
if (GLOBAL_CONFIG_SITE.isPost) {
if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
setTimeout(function () {
openSidebar()
}, 400)
}
}
/**
@@ -94,9 +80,10 @@ $(function () {
*/
function closeSidebar () {
isPcSidebarOpen = false
$pageHead.removeClass('open-sidebar')
$('#sidebar').removeClass('tocOpenPc')
$('.menus').animate({
paddingRight: 0
}, 400)
$('#body-wrap').animate({
paddingLeft: 0
}, 400)
@@ -114,9 +101,10 @@ $(function () {
}
function openSidebar () {
isPcSidebarOpen = true
$pageHead.addClass('open-sidebar')
$('#sidebar').addClass('tocOpenPc')
$('.menus').animate({
paddingRight: 300
}, 400)
$('#body-wrap').animate({
paddingLeft: 300
}, 400)
@@ -129,7 +117,8 @@ $(function () {
opacity: '1'
})
var isAdjustTimeCount = window.setInterval(function () {
isAdjust(1)
if ($pageHead.hasClass('fixed')) isAdjust(1)
else isAdjust(2)
}, 100)
setTimeout(function () {
clearInterval(isAdjustTimeCount)
@@ -165,7 +154,7 @@ $(function () {
$toggleMenu.removeClass('close').addClass('open')
$mobileSidevarMenus.css('transform', 'translate3d(-100%,0,0)')
var $mobileSidevarMenusChild = $mobileSidevarMenus.children()
for (i = 0; i <= $mobileSidevarMenusChild.length; i++) {
for (let i = 0; i <= $mobileSidevarMenusChild.length; i++) {
const duration = i / 5 + 0.2
$mobileSidevarMenusChild.eq(i).css('animation', 'sidebarItem ' + duration + 's')
}
@@ -221,9 +210,9 @@ $(function () {
const mql = window.matchMedia('(max-width: 1024px)')
mql.addListener(function (ev) {
if (ev.matches) {
if (isPcSidebarOpen === true) closeSidebar()
if ($('#sidebar').hasClass('tocOpenPc')) closeSidebar()
} else {
if ($('#toggle-sidebar').hasClass('on') && isTocContent) openSidebar()
if ($('#toggle-sidebar').hasClass('on')) openSidebar()
if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
}
})
@@ -271,16 +260,16 @@ $(function () {
* 代碼收縮
*/
const $highlightTools = $('.highlight-tools')
if (isHighlightShrink === true) {
if (isHighlightShrink === 'true') {
$highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
} else if (isHighlightShrink === false) {
} else if (isHighlightShrink === 'false') {
$highlightTools.append('<i class="fa fa-angle-down code-expand" aria-hidden="true"></i>')
}
$(document).on('click', '.highlight-tools >.code-expand', function () {
var $table = $(this).parent().next()
if ($(this).hasClass('code-closed')) {
$table.css('display', '')
$table.css('display', 'block')
$(this).removeClass('code-closed')
} else {
$table.css('display', 'none')
@@ -419,18 +408,16 @@ $(function () {
} else if (isMediumZoom) {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
zoom.on('open', function (event) {
const photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
var photoBg = $(document.documentElement).attr('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
})
}
// 點擊toc，收起sidebar
// $('.toc-link').on('click', function () {
// closeMobileSidebar('toc')
// })
/**
* 滾動處理
*/
var initTop = 0
$(window).scroll(function (event) {
var currentTop = $(this).scrollTop()
@@ -442,7 +429,6 @@ $(function () {
if (!$pageHead.hasClass('visible')) $pageHead.addClass('visible')
}
$pageHead.addClass('fixed')
if ($rightside.css('opacity') === '0') {
$rightside.css({ opacity: '1', transform: 'translateX(-38px)' })
}
@@ -450,7 +436,6 @@ $(function () {
if (currentTop === 0) {
$pageHead.removeClass('fixed').removeClass('visible')
}
$rightside.css({ opacity: '', transform: '' })
}
})
@@ -473,7 +458,7 @@ $(function () {
* toc
*/
if (GLOBAL_CONFIG_SITE.isPost && isTocContent) {
if (GLOBAL_CONFIG_SITE.isPost && GLOBAL_CONFIG_SITE.isSidebar) {
$('.toc-child').hide()
// main of scroll
@@ -647,7 +632,7 @@ $(function () {
if (copyFont.length > 45) {
textFont = copyFont + '\n' + '\n' + '\n' +
copyright.languages.author + '\n' +
copyright.languages.link + '\n' +
copyright.languages.link + window.location.href + '\n' +
copyright.languages.source + '\n' +
copyright.languages.info
} else {
@@ -668,8 +653,7 @@ $(function () {
var isFontAwesomeV5 = GLOBAL_CONFIG.isFontAwesomeV5
var $darkModeButtom = $('#darkmode')
if (typeof autoChangeMode !== 'undefined') {
if (Cookies.get('theme') === 'dark') changeLightIcon()
else changeDarkIcon()
document.documentElement.getAttribute('data-theme') === 'dark' ? changeLightIcon() : changeDarkIcon()
}
function changeLightIcon () {
@@ -752,4 +736,16 @@ $(function () {
margins: 4
})
})
function addPhotoFigcaption () {
var images = $('#article-container img')
images.each(function (i, o) {
var $this = $(o)
if ($this.attr('alt')) {
var t = $('<div class="img-alt is-center">' + $this.attr('alt') + '</div>')
$this.after(t)
}
})
}
if (GLOBAL_CONFIG.isPhotoFigcaption) addPhotoFigcaption()
})