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

✨ feat: 增加標籤外掛 tag-toggle

Browse Source 
✨ feat: 增加頁面加載動畫preloader close #193
✨ feat: 適配hexo-generator-indexed插件
✨ feat: aside subtitle可配置，優先顯示配置內容、沒有的顯示頁面subtitle close #191
✨ feat: aside card-tags可配置是否顯示顏色
✨ feat: algolia-search highligh文字加深
✨ feat: 增加頁面keywords設置 #191
✨ feat: darkmode和readmode配色微調
🐛 fix: 修復hide-block 配置顏色顯示出錯的bug
🐛 fix: 修正zh-TW部分用語
This commit is contained in:
Jerry
2020-04-17 19:48:07 +08:00
Unverified
parent d62ec1b866
commit b512eb761d
36 changed files with 541 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -209,34 +209,6 @@ img:not([src])
width: 100%
height: 100%
// tag-hide
.hide-inline,
.hide-block
& > .hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
background: $tag-hide-bg
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.comment_headling
margin-bottom: 10px
font-weight: 700

3
source/css/_highlight/highlight.styl
View File

@@ -271,6 +271,3 @@ blockquote
background: darken($highlight-background, 5)
color: $highlight-foreground
font-size: 14px
.highlight-close
height: 0 !important

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

@@ -91,7 +91,8 @@
.card-tag-cloud
a
word-break: keep-all
display: inline-block
padding: 0 .1rem
&:hover
color: $light-blue !important

94
source/css/_layout/loadding.styl Normal file
View File

@@ -0,0 +1,94 @@
if hexo-config('preloader')
loading-bg()
position: fixed
z-index: 1000
width: 50%
height: 100%
background-color: $preloader-bg
transition: all .5s
#loading-box
.loading-left-bg
loading-bg()
.loading-right-bg
loading-bg()
right: 0
.spinner-box
position: fixed
z-index: 1001
display: flex
justify-content: center
align-items: center
width: 100%
height: 100vh
.configure-border-1
position: absolute
padding: 3px
width: 115px
height: 115px
background: #ffab91
animation: configure-clockwise 3s ease-in-out 0s infinite alternate
.configure-border-2
left: -115px
padding: 3px
width: 115px
height: 115px
background: rgb(63, 249, 220)
transform: rotate(45deg)
animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
.loading-word
position: absolute
color: $white
font-size: .8rem
.configure-core
width: 100%
height: 100%
background-color: $preloader-bg
&.loaded
.loading-left-bg
transform: translate(-100%, 0)
.loading-right-bg
transform: translate(100%, 0)
.spinner-box
display: none
@keyframes configure-clockwise
0%
transform: rotate(0)
25%
transform: rotate(90deg)
50%
transform: rotate(180deg)
75%
transform: rotate(270deg)
100%
transform: rotate(360deg)
@keyframes configure-xclockwise
0%
transform: rotate(45deg)
25%
transform: rotate(-45deg)
50%
transform: rotate(-135deg)
75%
transform: rotate(-225deg)
100%
transform: rotate(-315deg)

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

@@ -270,7 +270,7 @@
-webkit-box-orient: vertical
&:hover
color: $light-blue
color: $light-blue !important
transform: translateX(20px)
&__img
@@ -381,7 +381,7 @@
& > div:first-child:not(.recent-posts)
width: 100% !important
//ie10-ios11使用
// ie10-ios11使用
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.recent-post-info
.content

100
source/css/_mode/darkmode.styl
View File

@@ -39,25 +39,43 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.article-title
color: alpha(#FFFFFF, .8) !important
#page-header
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
.toggle-menu,
#site-name,
& > #page-header
a
color: alpha(#FFFFFF, .8)
color: alpha(#FFFFFF, .8) !important
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20)
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
.toggle-menu,
#site-name,
a
color: alpha(#FFFFFF, .6)
color: alpha(#FFFFFF, .8)
.menus_item_child
background-color: lighten(#121212, 5) !important
li
&:hover
background: lighten(#121212, 20) !important
a
color: alpha(#FFFFFF, .8)
#site_subtitle
& > span
color: alpha(#FFFFFF, .6)
// 代碼框
#article-container pre,
@@ -109,6 +127,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
.post-copyright-info
color: alpha(#FFFFFF, .6)
&:after
background: #121212
// 音樂播放器
.aplayer
filter: brightness(.7)
@@ -120,11 +141,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
& > i,
& > a,
& > div
background-color: lighten(#121212, 5) !important
color: alpha(#FFFFFF, .6) !important
background-color: lighten(#121212, 5)
color: alpha(#FFFFFF, .6)
&:hover
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 打賞按鈕
.post-reward
@@ -164,23 +185,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .6) !important
.button--animated:before
background: lighten(#121212, 20) !important
background: lighten(#121212, 20)
// 頭部
#nav
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background-color: alpha($dark-black, .7)
content: ''
#nav span,
#nav i,
#page-header a,
#page-header .toggle-menu,
#post-meta,
#post-meta a,
#footer-wrap,
@@ -217,11 +223,13 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: alpha(#FFFFFF, .8) !important
// 時間軸界面
.article-sort-item__title
color: alpha(#FFFFFF, .6)
.article-sort
&-item__title
color: alpha(#FFFFFF, .6)
&:hover
color: #49b1f5
&-item:before,
&-title:before
background: #121212
// 手機 MENU,TOC
#mobile-sidebar
@@ -247,6 +255,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
filter: brightness(.7)
color: #4c4948
// hide-tags
.hide-button
filter: brightness(.7)
// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
@@ -257,6 +269,9 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
input
background-color: #121212
.mermaid
filter: brightness(.7)
if hexo-config('gitalk') && hexo-config('gitalk.enable')
#gitalk-container
.gt-header-textarea,
@@ -326,5 +341,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
blockquote
color: alpha(#FFFFFF, .6)
.mermaid
filter: brightness(.7)
if hexo-config('preloader')
#loading-box
.loading-left-bg,
.loading-right-bg,
.configure-core
background-color: darken(#121212, 2)
.loading-word
color: alpha(#FFFFFF, .6)

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

@@ -1,7 +1,9 @@
if hexo-config('readmode') && hexo-config('readmode.enable')
[data-theme='light']
$light-redmode-bg = #fff
.read-mode
background: #fff
background: $light-redmode-bg
#nav.post-bg
a
@@ -17,12 +19,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
blockquote
border-left: .2rem solid #ddd
background-color: transparent
background-color: $light-redmode-bg
ol,
li
&:before
background: transparent
background: $light-redmode-bg
color: #4c4948
ul
@@ -32,27 +34,40 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
hr
border: 2px dashed #d6dbdf
background: transparent
background: $light-redmode-bg
&:before
color: darken(#d6dbdf, 10)
.hide-toggle
border: 1px solid darken(#d6dbdf, 10) !important
.hide-button
background: darken(#d6dbdf, 10) !important
background: $light-redmode-bg !important
color: #4c4948 !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid darken(#d6dbdf, 10)
& > .button--animated:before
background: $light-redmode-bg
.note
border: 2px solid #eee
background-color: transparent
background-color: $light-redmode-bg
#mobile-sidebar-menus,
#rightside i,
#rightside i:not(.fa-cog),
#rightside a,
#rightside #rightside_config
background: darken(#d6dbdf, 10) !important
background: darken(#d6dbdf, 20) !important
[data-theme='dark']
$dark-readmode-bg = #0d0d0d
.read-mode
background: #0d0d0d
background: $dark-readmode-bg
#article-container
code
@@ -60,12 +75,12 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
blockquote
border-left: .2rem solid rgba(255, 255, 255, .6)
background-color: transparent
background-color: $dark-readmode-bg
ol,
li
&:before
background: transparent
background: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
ul
@@ -73,15 +88,28 @@ if hexo-config('readmode') && hexo-config('readmode.enable')
&:before
border: .15rem solid rgba(255, 255, 255, .6)
.hide-toggle
border: 1px solid rgba(255, 255, 255, .6) !important
.hide-button
background: $dark-readmode-bg !important
filter: none
color: rgba(255, 255, 255, .6) !important
.hide-inline,
.hide-block
& >.hide-button
border: 1px solid rgba(255, 255, 255, .6)
& > .button--animated:before
background: $dark-readmode-bg !important
.note
border: 2px solid rgba(255, 255, 255, .6)
filter: none
background-color: transparent
background-color: $dark-readmode-bg
color: rgba(255, 255, 255, .6)
.hide-button
background: #1f1f1f !important
.read-mode
#body-wrap
padding-left: 0 !important

4
source/css/_search/algolia.styl
View File

@@ -45,6 +45,10 @@
&:hover
color: $search-color
em
color: $search-keyword-highlight
font-weight: bold
.ais-pagination.pagination
margin: .8rem 0 0
padding: 0

9
source/css/_layout/gallery.styl → source/css/_tags/gallery.styl
View File

@@ -9,6 +9,9 @@ figure.gallery-group
background: $dark-black
-webkit-transform: translate3d(0, 0, 0)
@media screen and (max-width: 600px)
width: calc(100% - .4rem)
&:hover
img
opacity: .4
@@ -105,8 +108,4 @@ figure.gallery-group
.fancybox
width: auto
text-align: inherit
@media screen and (max-width: 600px)
figure.gallery-group
width: calc(100% - .4rem)
text-align: inherit

53
source/css/_tags/hide.styl Normal file
View File

@@ -0,0 +1,53 @@
// tag-hide
.hide-inline,
.hide-block
& > a.hide-button
position: relative
z-index: 1
display: inline-block
padding: 0 1rem
background: $tag-hide-bg
color: $white !important
text-align: center
cursor: pointer
&:hover
text-decoration: none !important
&.open
display: none
& > .hide-content
display: none
.hide-inline
& > .hide-button
margin: 0 .3rem
& > .hide-content
margin: 0 .3rem
.hide-block
margin: 0 0 .8rem
.hide-toggle
margin-bottom: 1rem
border: 1px solid $tag-hide-toggle-bg
& > .hide-button
padding: .3rem .5rem
background: $tag-hide-toggle-bg
color: $font-color
cursor: pointer
& > i
font-size: 1.2em
transition: all .3s
&.open
i
transform: rotate(90deg)
& > .hide-content
display: none
margin: 1.5rem 1.2rem

0
source/css/_layout/note.styl → source/css/_tags/note.styl
View File

1
source/css/index.styl
View File

@@ -5,6 +5,7 @@
@import '_global'
@import '_highlight/highlight'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search

5
source/css/var.styl
View File

@@ -84,8 +84,9 @@ $search-keyword-highlight = #F47466
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
//preloader
$preloader-bg = #37474f
// Note colors
// --------------------------------------------------

233
source/js/main.js
View File

@@ -247,121 +247,128 @@ $(function () {
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlightLang
const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
const $figureHighlight = $('figure.highlight')
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
$figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
}
/**
if ($figureHighlight.length) {
const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
const isHighlightLang = GLOBAL_CONFIG.highlightLang
const isHighlightShrink = GLOBAL_CONFIG.highlightShrink
if (isHighlightCopy || isHighlightLang || isHighlightShrink !== 'none') {
$figureHighlight.wrap('<div class="code-area-wrap"></div>').before('<div class="highlight-tools"></div>')
}
/**
* 代碼收縮
*/
const $highlightTools = $('.highlight-tools')
if (isHighlightShrink === 'true') {
$highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
} 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', 'block')
$(this).removeClass('code-closed')
} else {
$table.css('display', 'none')
$(this).addClass('code-closed')
const $highlightTools = $('.highlight-tools')
if (isHighlightShrink === 'true') {
$highlightTools.append('<i class="fa fa-angle-down code-expand code-closed" aria-hidden="true"></i>')
} 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', 'block')
$(this).removeClass('code-closed')
} else {
$table.css('display', 'none')
$(this).addClass('code-closed')
}
})
/**
* 代碼語言
*/
if (isHighlightLang) {
var langNameIndex, langName
$figureHighlight.each(function () {
langNameIndex = langName = $(this).attr('class').split(' ')[1]
if (langNameIndex === 'plain') langName = 'Code'
$(this).prev().append('<div class="code-lang">' + langName + '</div>')
})
}
/**
if (isHighlightLang) {
var langNameIndex, langName
$figureHighlight.each(function () {
langNameIndex = langName = $(this).attr('class').split(' ')[1]
if (langNameIndex === 'plain') langName = 'Code'
$(this).prev().append('<div class="code-lang">' + langName + '</div>')
})
}
/**
* 代碼copy
* copy function
*/
if (isHighlightCopy) {
$highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
var copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
try {
document.execCommand('copy') // Security exception may be thrown by some browsers.
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1,
right: 30
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
if (isHighlightCopy) {
$highlightTools.append('<div class="copy-notice"></div><i class="fa fa-clipboard" aria-hidden="true"></i>')
var copy = function (text, ctx) {
if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
try {
document.execCommand('copy') // Security exception may be thrown by some browsers.
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.success)
.animate({
opacity: 1,
right: 30
}, 450, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
}
} catch (ex) {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.error)
.animate({
opacity: 1,
right: 30
}, 650, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
return false
}
}
} catch (ex) {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.success)
} else {
$(ctx).prev('.copy-notice')
.text(GLOBAL_CONFIG.copy.error)
.animate({
opacity: 1,
right: 30
}, 650, function () {
setTimeout(function () {
$(ctx).prev('.copy-notice').animate({
opacity: 0,
right: 0
}, 650)
}, 400)
})
return false
}
}
} else {
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
if (isSnackbar) {
snackbarShow(GLOBAL_CONFIG.copy.noSupport)
} else {
$(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
}
}
}
}
// click events
$(document).on('click', '.highlight-tools>.fa-clipboard', function () {
var selection = window.getSelection()
var range = document.createRange()
range.selectNodeContents($(this).parent().next().find('.code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
var text = selection.toString()
copy(text, this)
selection.removeAllRanges()
})
// click events
$(document).on('click', '.highlight-tools>.fa-clipboard', function () {
var selection = window.getSelection()
var range = document.createRange()
range.selectNodeContents($(this).parent().next().find('.code pre')[0])
selection.removeAllRanges()
selection.addRange(range)
var text = selection.toString()
copy(text, this)
selection.removeAllRanges()
})
}
}
/**
* justified-gallery 圖庫排版
*/
var $justifiedGallery = $('.justified-gallery')
var isJustifiedGallery = false
if ($justifiedGallery.length) {
isJustifiedGallery = true
var $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
@@ -372,11 +379,19 @@ $(function () {
}
$('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css">')
loadScript('https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', function () {
$justifiedGallery.not($('.hide-content .justified-gallery')).justifiedGallery({
rowHeight: 220,
margins: 4
})
initJustifiedGallery($justifiedGallery)
})
var initJustifiedGallery = function (selector) {
selector.each(function (i, o) {
if ($(this).is(':visible')) {
$(this).justifiedGallery({
rowHeight: 220,
margins: 4
})
}
})
}
}
/**
@@ -708,6 +723,9 @@ $(function () {
interval = setInterval(showDateTime, 10000)
}
/**
* 百度推送
*/
if (GLOBAL_CONFIG.baiduPush) {
(function () {
var bp = document.createElement('script')
@@ -726,17 +744,24 @@ $(function () {
* tag-hide
*/
var $hideInline = $('.hide-button')
$hideInline.on('click', function (e) {
e.preventDefault()
$(this).hide()
var $hideContent = $(this).next('.hide-content')
$hideContent.show()
$hideContent.find('.justified-gallery').justifiedGallery({
rowHeight: 220,
margins: 4
if ($hideInline.length) {
$hideInline.on('click', function (e) {
e.preventDefault()
var $this = $(this)
var $hideContent = $(this).next('.hide-content')
$this.toggleClass('open')
$hideContent.toggle()
if ($this.hasClass('open')) {
if (isJustifiedGallery && $hideContent.find('.justified-gallery').length > 0) {
initJustifiedGallery($hideContent.find('.justified-gallery'))
}
}
})
})
}
/**
* PhotoFigcaption
*/
function addPhotoFigcaption () {
var images = $('#article-container img')
images.each(function (i, o) {