biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-06-06 05:11:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 增加twikoo 最新評論 close #433

Browse Source 
feat: 增加twikoo評論數顯示
feat: 增加toc簡潔模式
feat: 最新評論頭像增加lazyload
feat: fontawesome和google字體增加異步加載
fix: 修復上個版本導致的圖庫報沒有jQuery的bugs
fix: 修復上個版本導致aside 分類展開/收縮按鈕的bugs
improvement: toc點擊時改用document.getElementById獲取參數，避免有些字符導致無法跳轉 close #426
improvement: icp圖片限制大小  close #434
improvement: 最新評論優化，當沒有評論時顯示 '沒有評論'
improvement: 若瀏覽器支持,scroll將採用原生瀏覽器支持的滾動方法
improvement: 當屏幕沒有滾動條時，rightside會直接顯示
This commit is contained in:
Jerry
2020-12-05 22:28:54 +08:00
Unverified
parent 88b1cc553c
commit 02af3077e7
31 changed files with 377 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/css/_global/function.styl
+4
View File
@@ -37,6 +37,10 @@ maxWidth900()
@media screen and (max-width: 900px)
{block}
maxWidth901()
@media screen and (max-width: 900px)
{block}
minWidth900()
@media screen and (min-width: 900px)
{block}
source/css/_global/index.styl
+3 -2
View File
@@ -1,4 +1,5 @@
[data-theme='light']
:root
--global-font-size: $font-size
--global-bg: $body-bg
--font-color: $font-black
--hr-border: lighten($theme-hr-color, 50%)
@@ -36,7 +37,7 @@ body
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
font-size: $font-size
font-size: var(--global-font-size)
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
source/css/_layout/aside.styl
+13 -9
View File
@@ -229,13 +229,14 @@
padding: 0 0 0 .8rem
> .parent
.card-category-list
&-name
width: 70% !important
> a
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
@@ -248,7 +249,7 @@
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
> .child
display: none
.card-webinfo
@@ -265,7 +266,7 @@
// toc
#card-toc
+minWidth900()
+minWidth901()
right: 0 !important
+maxWidth900()
@@ -277,7 +278,6 @@
width: $toc-mobile-width
opacity: 0
transform-origin: right bottom
// animation: toc-open .3s
.toc-content
overflow-y: auto
@@ -329,6 +329,10 @@
font-style: italic
font-size: 1.2rem
:only-child
> .card-widget
margin-top: 0
@keyframes toc-open
0%
transform: scale(.7)
source/css/_layout/footer.styl
+2
View File
@@ -31,3 +31,5 @@
.icp-icon
padding: 0 4px
vertical-align: text-bottom
max-height: 1.4em
width auto
source/css/_layout/head.styl
+9 -9
View File
@@ -133,9 +133,9 @@
.post-title
@extend .limit-more-line
margin-bottom: .4rem
font-size: 2.5em
font-weight: normal
color: var(--white)
font-weight: normal
font-size: 2.5em
line-height: 1.5
-webkit-line-clamp: 3
@@ -193,12 +193,9 @@
border-bottom: 1px solid var(--light-grey)
color: var(--text-highlight-color)
[data-theme='light']
#post
#post-info
#post-meta,
#post-meta a
color: #78818a
#post-meta,
#post-meta a
color: #78818a
// css hack
// all browser in ios and safari in all apple device
@@ -349,7 +346,10 @@ _:future,
font-size: inherit
.menus_items
display: none !important
position: absolute
left: 0
visibility: hidden
opacity: 0
#search-button span
display: none !important
source/css/_layout/rightside.styl
-4
View File
@@ -29,10 +29,6 @@
&:hover
background-color: var(--btn-hover-color)
#rightside_config
i
animation: avatar_turn_around 2s linear infinite
#mobile-toc-button
display: none
source/css/_mode/readmode.styl
+9 -10
View File
@@ -1,14 +1,13 @@
if hexo-config('readmode')
[data-theme='light']
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
-highlight-bg: #f7f7f7
.read-mode
--font-color: #4c4948
--readmode-light-color: #fff
--white: #4c4948
--light-grey: #4c4948
--gray: #d6dbdf
--hr-border: #d6dbdf
--hr-before-color: darken(#d6dbdf, 10)
-highlight-bg: #f7f7f7
[data-theme='dark']
.read-mode
source/js/main.js
+68 -23
View File
@@ -1,12 +1,22 @@
document.addEventListener('DOMContentLoaded', function () {
const blogNameWidth = document.getElementById('site-name').offsetWidth
const menusWidth = document.getElementById('menus').offsetWidth
let blogNameWidth = document.getElementById('site-name').offsetWidth
const $menusEle = document.querySelector('#menus .menus_items')
let menusWidth = $menusEle && $menusEle.offsetWidth
const $searchEle = document.querySelector('#search-button')
let searchWidth = $searchEle && $searchEle.offsetWidth
let detectFontSizeChange = false
const adjustMenu = () => {
if (detectFontSizeChange) {
blogNameWidth = document.getElementById('site-name').offsetWidth
menusWidth = $menusEle && $menusEle.offsetWidth
searchWidth = $searchEle && $searchEle.offsetWidth
detectFontSizeChange = false
}
const $nav = document.getElementById('nav')
let t
if (window.innerWidth < 768) t = true
else t = blogNameWidth + menusWidth > $nav.offsetWidth - 100
else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
if (t) {
$nav.classList.add('hide-menu')
@@ -36,7 +46,8 @@ document.addEventListener('DOMContentLoaded', function () {
}
function closeMobileSidebar () {
$body.style.cssText = "overflow: ''; padding-right: ''"
$body.style.overflow = ''
$body.style.paddingRight = ''
btf.fadeOut($menuMask, 0.5)
$mobileSidebarMenus.classList.remove('open')
}
@@ -213,24 +224,26 @@ document.addEventListener('DOMContentLoaded', function () {
const runJustifiedGallery = function () {
let $justifiedGallery = document.querySelectorAll('#article-container .justified-gallery')
if ($justifiedGallery.length) {
$justifiedGallery = $($justifiedGallery)
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
})
}
btf.isJqueryLoad(() => {
$justifiedGallery = $($justifiedGallery)
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
})
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
})
}
}
@@ -285,9 +298,16 @@ document.addEventListener('DOMContentLoaded', function () {
* 滾動處理
*/
const scrollFn = function () {
const $rightside = document.getElementById('rightside')
// 當沒有滾動條的時候
if (document.body.scrollHeight <= window.innerHeight) {
$rightside.style.display = 'block'
return
}
let initTop = 0
let isChatShow = true
const $rightside = document.getElementById('rightside')
const $nav = document.getElementById('nav')
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
@@ -389,7 +409,7 @@ document.addEventListener('DOMContentLoaded', function () {
const $target = e.target.classList.contains('toc-link')
? e.target
: e.target.parentElement
btf.scrollToDest(document.querySelector(decodeURI($target.getAttribute('href'))).offsetTop, 300)
btf.scrollToDest(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', '')).offsetTop, 300)
if (window.innerWidth < 900) {
mobileToc.close()
}
@@ -489,6 +509,25 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
// function aa (num,target) {
// const a = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
// let newValue = ''
// detectFontSizeChange = true
// if (num) {
// if (a >= 20) return
// newValue = a + 1
// document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
// !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
// } else {
// if (a <= 10) return
// newValue = a - 1
// document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
// document.getElementById('nav').classList.contains('hide-menu') && adjustMenu()
// }
// document.getElementById('font-text').innerText = newValue
// }
document.getElementById('rightside').addEventListener('click', function (e) {
const $target = e.target.id || e.target.parentNode.id
switch ($target) {
@@ -507,6 +546,12 @@ document.addEventListener('DOMContentLoaded', function () {
case 'hide-aside-btn':
rightSideFn.hideAsideBtn()
break
// case 'font-plus':
// aa(true)
// break
// case 'font-minus':
// aa()
// break
default:
break
}
source/js/utils.js
+11 -4
View File
@@ -1,5 +1,3 @@
/* eslint-disable no-unused-vars */
var btf = {
debounce: function (func, wait, immediate) {
let timeout
@@ -141,9 +139,18 @@ var btf = {
if (pos < 0 || time < 0) {
return
}
var currentPos = window.scrollY || window.screenTop
if (currentPos > pos) pos = pos - 65
var currentPos = window.scrollY || window.screenTop
if (currentPos > pos) pos = pos - 70
if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) {
window.scrollTo({
top: pos,
behavior: 'smooth'
})
return
}
var start = null
time = time || 500
window.requestAnimationFrame(function step (currentTime) {