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

feat: 增加首頁評論數顯示

Browse Source 
fix: 修復點擊toc後，滾動完toc的highlight在點擊的上一個元素
fix: 修復打賞按鈕Hover的bug close #473
improvement: 友情鏈接界面增加title顯示（top_img設為false時）
improvement: 優化toc顯示，當向上滾動時，導航欄不會遮擋 toc close #472
improvement: 升級facebook comment sdk版本
This commit is contained in:
Jerry
2021-01-25 19:39:53 +08:00
Unverified
parent d33dc5551c
commit 6962353af6
27 changed files with 400 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,6 +110,7 @@
position: sticky
position: -webkit-sticky
top: 20px
transition: top .3s
.card-tag-cloud
a

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

@@ -69,7 +69,7 @@
font-size: 30px
// page
&.not-index-bg
&.not-home-page
height: 20rem
+maxWidth768()
@@ -101,19 +101,6 @@
background-color: alpha($dark-black, .5)
content: ''
&.no-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
#post-info
position: absolute
bottom: 5rem
@@ -129,6 +116,75 @@
bottom: 1.1rem
padding: 0 1.1rem
&.not-top-img
margin-bottom: .5rem
height: 60px
background: 0
#nav
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
a
color: var(--font-color)
text-shadow: none
&.nav-fixed
#nav
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.nav-visible
#nav
transition: all .5s
transform: translate3d(0, 100%, 0)
& + .layout
& > .aside-content > .sticky_layout
top: 70px
transition: top .5s
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#page
h1.page-title
margin: .4rem 0 1rem
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
#post-info
.post-title
@extend .limit-more-line
@@ -186,30 +242,6 @@
time
display: none
// for not top_img
#post
& > #post-info
margin-bottom: 1.5rem
.post-title
padding-bottom: .2rem
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
.post-edit-link
float: right
#post-meta,
#post-meta a
color: #78818a
// css hack
// all browser in ios and safari in all apple device
_::-webkit-full-page-media,
_:future,
:root #page-header.full_page
background-attachment: scroll !important
#nav
position: absolute
top: 0
@@ -227,10 +259,6 @@ _:future,
+maxWidth768()
padding: 0 16px
&:not(.fixed)
#menus
padding-right: 0 !important
&.show
opacity: 1
@@ -251,27 +279,6 @@ _:future,
&:hover
color: var(--white)
&.fixed
position: fixed
top: -60px
z-index: 91
background: rgba(255, 255, 255, .8)
box-shadow: 0 5px 6px -5px alpha($grey, .6)
transition: transform .2s ease-in-out, opacity .2s ease-in-out
a,
#site-name,
#toggle-menu
color: var(--font-color)
text-shadow: none
&:hover
color: $light-blue
&.visible
transition: all .5s
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
font-weight: bold
@@ -369,4 +376,3 @@ _:future,
padding-bottom: .3rem
text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
font-size: .78em
cursor: pointer

100
source/css/_layout/reward.styl
View File

@@ -12,60 +12,58 @@
cursor: pointer
transition: all .4s
&:hover
box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
&:hover
& > .reward-main
display: block
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-main
position: absolute
bottom: 40px
left: 0
z-index: 100
display: none
padding: 0 0 15px
width: 100%
.reward-all
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
.reward-all
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
margin: 0
padding: 1rem .5rem
border-radius: 4px
background: var(--reward-pop)
padding: 0 8px
list-style-type: none
vertical-align: top
&:before
position: absolute
bottom: -10px
left: 0
width: 100%
height: 20px
content: ''
img
width: 130px
height: 130px
&:after
position: absolute
right: 0
bottom: 2px
left: 0
margin: 0 auto
width: 0
height: 0
border-top: 13px solid var(--reward-pop)
border-right: 13px solid transparent
border-left: 13px solid transparent
content: ''
.reward-item
display: inline-block
padding: 0 8px
list-style-type: none
vertical-align: top
img
width: 130px
height: 130px
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color
.post-qr-code-desc
padding-top: .4rem
width: 130px
color: $reward-pop-up-color

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

@@ -53,8 +53,8 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
// 頭部
#page-header
& > #nav.fixed,
&.no-top-img #nav
&.nav-fixed > #nav,
&.not-top-img > #nav
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

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

@@ -49,9 +49,6 @@ if hexo-config('readmode')
#aside-content
display: none
#body-wrap
padding-left: 0 !important
#page-header.post-bg
background-color: transparent
background-image: none !important
@@ -80,7 +77,7 @@ if hexo-config('readmode')
.post-outdate-notice,
#web_bg,
#rightside,
.no-top-img
.not-top-img
display: none !important
#article-container

6
source/css/_page/common.styl
View File

@@ -45,8 +45,4 @@
max-width: 1300px
& > div
width: 100% !important
#page
h1.page-title
margin-top: .4rem
width: 100% !important

129
source/css/_page/flink.styl
View File

@@ -1,76 +1,77 @@
.flink#article-container
.flink-desc
margin: .2rem 0 .5rem
#article-container
.flink
.flink-desc
margin: .2rem 0 .5rem
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
-webkit-transform: translateZ(0)
& > .flink-list-item
position: relative
float: left
overflow: hidden
margin: 15px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
-webkit-transform: translateZ(0)
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth1024()
width: calc(50% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
+maxWidth600()
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&:hover
img
transform: rotate(360deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--text-bg-hover)
content: ''
transition: transform .3s ease-out
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: var(--font-color)
text-decoration: none
a
color: var(--font-color)
text-decoration: none
img
float: left
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
transition: all .3s
img
float: left
margin: 15px 10px
width: 60px
height: 60px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.img-alt
display: none
.flink-item-name
@extend .limit-one-line
display: block
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-name
@extend .limit-one-line
display: block
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 1.43em
.flink-item-desc
@extend .limit-one-line
display: block
padding: 16px 10px 16px 0
height: 50px
font-size: .93em
.flink-item-desc
@extend .limit-one-line
display: block
padding: 16px 10px 16px 0
height: 50px
font-size: .93em

12
source/js/main.js
View File

@@ -315,7 +315,7 @@ document.addEventListener('DOMContentLoaded', function () {
let initTop = 0
let isChatShow = true
const $nav = document.getElementById('nav')
const $header = document.getElementById('page-header')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
window.addEventListener('scroll', btf.throttle(function (e) {
@@ -323,25 +323,25 @@ document.addEventListener('DOMContentLoaded', function () {
const isDown = scrollDirection(currentTop)
if (currentTop > 56) {
if (isDown) {
if ($nav.classList.contains('visible')) $nav.classList.remove('visible')
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
} else {
if (!$nav.classList.contains('visible')) $nav.classList.add('visible')
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
if (isChatBtnHide && isChatShow === false) {
chatBtnShow()
isChatShow = true
}
}
$nav.classList.add('fixed')
$header.classList.add('nav-fixed')
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
}
} else {
if (currentTop === 0) {
$nav.classList.remove('fixed', 'visible')
$header.classList.remove('nav-fixed', 'nav-visible')
}
$rightside.style.cssText = "opacity: ''; transform: ''"
}
@@ -448,7 +448,7 @@ document.addEventListener('DOMContentLoaded', function () {
let currentIndex = ''
list.forEach(function (ele, index) {
if (top > btf.getEleTop(ele) - 70) {
if (top > btf.getEleTop(ele) - 80) {
currentId = '#' + encodeURI(ele.getAttribute('id'))
currentIndex = index
}