biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-08 12:07:06 +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
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

6
_config.yml
View File

@@ -173,6 +173,7 @@ index_post_content:
toc:
enable: true
number: true
style_simple: false
post_copyright:
enable: true
@@ -239,7 +240,7 @@ addtoany:
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo
use:
# - Valine
# - Disqus
@@ -673,6 +674,9 @@ newest_comments:
enable: false
forum:
api_key:
twikoo:
enable: false
default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank/404
# Bottom right button (右下角按鈕)
# --------------------------------------

6
languages/default.yml
View File

@@ -73,6 +73,7 @@ aside:
headline: Newest Comments
loading_text: loading...
error: Unable to get the data, please make sure the settings are correct.
zero: No Comment
card_toc: Catalog
date_suffix:
@@ -87,12 +88,13 @@ share: Share
rightside:
readmode_title: Read Mode
translate_title: Switch Between Traditional Chinese And Simplified Chinese
night_mode_title: Switch Between Light And Dark Mode
translate_title: Toggle Between Traditional Chinese And Simplified Chinese
night_mode_title: Toggle Between Light And Dark Mode
back_to_top: Back To Top
toc: Table Of Contents
scroll_to_comment: Scroll To Comments
setting: Setting
aside: Toggle between single-column and double-column
copy_copyright:
author: Author

2
languages/en.yml
View File

@@ -73,6 +73,7 @@ aside:
headline: Newest Comments
loading_text: loading...
error: Unable to get the data, please make sure the settings are correct.
zero: No Comment
card_toc: Catalog
date_suffix:
@@ -93,6 +94,7 @@ rightside:
toc: Table Of Contents
scroll_to_comment: Scroll To Comments
setting: Setting
aside: Toggle between single-column and double-column
copy_copyright:
author: Author

4
languages/zh-CN.yml
View File

@@ -73,7 +73,8 @@ aside:
card_newest_comments:
headline: 最新评论
loading_text: 正在加载中...
error: 无法获取资料，请确认相关配置是否正确
error: 无法获取评论，请确认相关配置是否正确
zero: 没有评论
card_toc: 目录
date_suffix:
@@ -94,6 +95,7 @@ rightside:
toc: 目录
scroll_to_comment: 直达评论
setting: 设置
aside: 单栏和双栏切换
copy_copyright:
author: 作者

4
languages/zh-TW.yml
View File

@@ -73,7 +73,8 @@ aside:
card_newest_comments:
headline: 最新評論
loading_text: 正在加載中...
error: 無法獲取資料，請確認相關配置是否正確
error: 無法獲取評論，請確認相關配置是否正確
zero: 沒有評論
card_toc: 目錄
date_suffix:
@@ -94,6 +95,7 @@ rightside:
toc: 目錄
scroll_to_comment: 直達評論
setting: 設定
aside: 單欄和雙欄切換
copy_copyright:
author: 作者

8
layout/includes/head.pug
View File

@@ -51,13 +51,13 @@ if (theme.pwa && theme.pwa.enable)
//- main css
link(rel='stylesheet', href=url_for(theme.CDN.main_css))
link(rel='stylesheet', href=url_for(theme.CDN.fontawesome))
link(rel='stylesheet', href=url_for(theme.CDN.fontawesome) media="print" onload="this.media='all'")
if (theme.snackbar && theme.snackbar.enable)
link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css))
link(rel='stylesheet', href=url_for(theme.CDN.snackbar_css) media="print" onload="this.media='all'")
if theme.algolia_search.enable
link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css))
link(rel='stylesheet' href=url_for(theme.CDN.algolia_search_css) media="print" onload="this.media='all'")
script(src=url_for(theme.CDN.algolia_search) defer)
//- google_adsense
@@ -68,7 +68,7 @@ if theme.algolia_search.enable
//- font
if theme.blog_title_font &&　theme.blog_title_font.font_link
link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link))
link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link) media="print" onload="this.media='all'")
//- global config
!=partial('includes/head/config', {}, {cache:theme.fragment_cache})

10
layout/includes/head/config.pug
View File

@@ -50,15 +50,6 @@
})
}
let ClickShowText = 'undefined';
if (theme.ClickShowText && theme.ClickShowText.enable) {
ClickShowText = JSON.stringify({
text: theme.ClickShowText.text.join(","),
fontSize: theme.ClickShowText.fontSize,
random: theme.ClickShowText.random
})
}
let Snackbar = 'undefined';
if (theme.snackbar && theme.snackbar.enable) {
Snackbar = JSON.stringify({
@@ -117,7 +108,6 @@ script.
month: '!{_p("date_suffix.month")}'
},
copyright: !{copyright},
ClickShowText: !{ClickShowText},
lightbox: '!{ theme.medium_zoom ? "mediumZoom" : (theme.fancybox ? "fancybox" : "null" )}',
Snackbar: !{Snackbar},
source: {

4
layout/includes/head/config_site.pug
View File

@@ -4,8 +4,8 @@
else if (page.highlight_shrink === true || page.highlight_shrink === false) isHighlightShrink = page.highlight_shrink
else isHighlightShrink = theme.highlight_shrink
const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
var pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable
var showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true )
-
script#config_change

50
layout/includes/header/post-info.pug
View File

@@ -32,7 +32,7 @@
if (index < page.categories.data.length - 1)
i.fas.fa-angle-right.post-meta-separator
.meta-secondline
.meta-secondline
- let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
if (postWordcount)
span.post-meta-separator |
@@ -57,26 +57,32 @@
if !theme.comments.lazyload && page.comments !== false && theme.comments.use && theme.comments.count
- var whichCount = theme.comments.use[0]
if whichCount !== 'Livere' && whichCount !== 'Utterances'
mixin countBlock
span.post-meta-separator |
span.post-meta-commentcount
if whichCount === 'Disqus' || whichCount === 'Disqusjs'
i.far.fa-comments.fa-fw.post-meta-icon
span.post-meta-label= _p('post.comments') + ':'
span.disqus-comment-count.comment-count
a(href=full_url_for(page.path) + '#disqus_thread')
else if whichCount === 'Valine'
i.far.fa-comments.fa-fw.post-meta-icon
span.post-meta-label= _p('post.comments') + ':'
a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
span.valine-comment-count.comment-count(data-xid=url_for(page.path) itemprop="commentCount")
else if whichCount === 'Gitalk'
i.far.fa-comments.fa-fw.post-meta-icon
span.post-meta-label= _p('post.comments') + ':'
a(href=url_for(page.path) + '#post-comment')
span.gitalk-comment-count.comment-count
else if whichCount === 'Facebook Comments'
i.far.fa-comments.fa-fw.post-meta-icon
span.post-meta-label= _p('post.comments') + ':'
a.comment-count(href=url_for(page.path) + '#post-comment')
span.fb-comments-count(data-href=urlNoIndex())
i.far.fa-comments.fa-fw.post-meta-icon
span.post-meta-label= _p('post.comments') + ':'
if block
block
if whichCount === 'Disqus' || whichCount === 'Disqusjs'
+countBlock
span.disqus-comment-count
a(href=full_url_for(page.path) + '#disqus_thread')
else if whichCount === 'Valine'
+countBlock
a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
else if whichCount === 'Gitalk'
+countBlock
a(href=url_for(page.path) + '#post-comment')
span.gitalk-#card-toc
else if whichCount === 'Twikoo'
+countBlock
a(href=url_for(page.path) + '#post-comment')
span#twikoo-count
else if whichCount === 'Facebook Comments'
+countBlock
a(href=url_for(page.path) + '#post-comment')
span.fb-comments-count(data-href=urlNoIndex())

6
layout/includes/rightside.pug
View File

@@ -9,19 +9,19 @@
button#darkmode(type="button" title=_p('rightside.night_mode_title'))
i.fas.fa-adjust
if theme.aside.enable && theme.aside.button && page.aside !== false
button#hide-aside-btn(type="button")
button#hide-aside-btn(type="button" title=_p('rightside.aside'))
i.fas.fa-arrows-alt-h
#rightside-config-show
if is_post()
if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog
i.fas.fa-cog.fa-spin
if showToc && theme.aside.mobile
button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
i.fas.fa-list-ul
else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)
button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog
i.fas.fa-cog.fa-spin
if theme.chat_btn
button#chat_btn(type="button" title=_p("rightside.chat_btn"))

2
layout/includes/third-party/aplayer.pug vendored
View File

@@ -1,3 +1,3 @@
link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css))
link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css) media="print" onload="this.media='all'")
script(src=url_for(theme.CDN.aplayer_js))
script(src=url_for(theme.CDN.meting_js))

2
layout/includes/third-party/comments/index.pug vendored
View File

@@ -30,7 +30,7 @@ hr
when 'Utterances'
#utterances-wrap
when 'Twikoo'
#twikoo
#twikoo-wrap
when 'Facebook Comments'
.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
data-numposts= theme.facebook_comments.pageSize || 10

55
layout/includes/third-party/comments/twikoo.pug vendored
View File

@@ -1,24 +1,43 @@
script.
function loadTwikoo () {
function init () {
twikoo.init({
envId: '!{theme.twikoo}'
(()=>{
const $countDom = document.getElementById('twikoo-count')
const init = () => {
twikoo.init({
envId: '!{theme.twikoo}',
el: '#twikoo-wrap'
})
}
if (typeof twikoo.init === 'function') {
init()
const getCount = () => {
twikoo.getCommentsCount({
envId: '!{theme.twikoo}',
urls: [window.location.pathname],
includeReply: false
}).then(function (res) {
$countDom.innerText = res[0].count
}).catch(function (err) {
console.error(err);
});
}
const loadTwikoo = (bool = false) => {
if (typeof twikoo === 'object') {
init()
bool && $countDom && setTimeout(()=>{getCount()},0)
} else {
getScript('!{theme.CDN.twikoo}').then(()=> {
init()
bool && $countDom && setTimeout(()=>{getCount()},0)
})
}
}
if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
else loadTwikoo(true)
} else {
getScript('!{theme.CDN.twikoo}').then(init)
window.loadOtherComment = () => {
loadTwikoo()
}
}
}
if ('!{theme.comments.use[0]}' === 'Twikoo' || !!{theme.comments.lazyload}) {
if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('twikoo'), loadTwikoo)
else loadTwikoo()
} else {
function loadOtherComment () {
loadTwikoo()
}
}
})()

9
layout/includes/third-party/effect.pug vendored
View File

@@ -25,4 +25,11 @@ if theme.click_heart && theme.click_heart.enable
script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)
if theme.ClickShowText && theme.ClickShowText.enable
script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
script#click-show-text(
src= url_for(theme.CDN.ClickShowText)
data-mobile= `${theme.ClickShowText.mobile}`
data-text= theme.ClickShowText.text.join(",")
data-fontsize= theme.ClickShowText.fontSize
data-random= `${theme.ClickShowText.random}`
async
)

27
layout/includes/third-party/newest-comments/disqus-comment.pug vendored
View File

@@ -13,7 +13,7 @@ script.
return content
}
const getDisqusComment = () => {
const getComment = () => {
fetch('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}')
.then(response => response.json())
.then(data => {
@@ -38,21 +38,26 @@ script.
const generateHtml = array => {
let result = ''
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
} else {
result += '!{_p("aside.card_newest_comments.zero")}'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
@@ -62,7 +67,7 @@ script.
if (data) {
generateHtml(JSON.parse(data))
} else {
getDisqusComment()
getComment()
}
}
}

27
layout/includes/third-party/newest-comments/github-issues.pug vendored
View File

@@ -13,7 +13,7 @@ script.
return content
}
const getGithubIssues = () => {
const getComment = () => {
fetch('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1')
.then(response => response.json())
.then(data => {
@@ -37,21 +37,26 @@ script.
const generateHtml = array => {
let result = ''
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${array[i].avatar}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
} else {
result += '!{_p("aside.card_newest_comments.zero")}'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
@@ -61,7 +66,7 @@ script.
if (data) {
generateHtml(JSON.parse(data))
} else {
getGithubIssues()
getComment()
}
}
}

4
layout/includes/third-party/newest-comments/index.pug vendored
View File

@@ -3,4 +3,6 @@ if theme.newest_comments.leancloud.enable
else if theme.newest_comments.github_issues.enable
include ./github-issues.pug
else if theme.newest_comments.disqus.enable
include ./disqus-comment.pug
include ./disqus-comment.pug
else if theme.newest_comments.twikoo.enable
include ./twikoo-comment.pug

29
layout/includes/third-party/newest-comments/leancloud.pug vendored
View File

@@ -24,25 +24,30 @@ script.
const generateHtml = array => {
let result = ''
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img data-lazy-src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
} else {
result += '!{_p("aside.card_newest_comments.zero")}'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const getValineData = () => {
const getComment = () => {
let serverURL = ''
if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
serverURL = '!{theme.newest_comments.leancloud.serverURL}'
@@ -74,7 +79,7 @@ script.
})
saveToLocal.set('leancloud-newest-comments', JSON.stringify(valineArray), 10/(60*24))
generateHtml(valineArray)
}).catch(e => {
}).catch(e => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
})
@@ -86,7 +91,7 @@ script.
if (data) {
generateHtml(JSON.parse(data))
} else {
getValineData()
getComment()
}
}
}

87
layout/includes/third-party/newest-comments/twikoo-comment.pug vendored Normal file
View File

@@ -0,0 +1,87 @@
script.
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
content = content.replace(/<[^>]+>/g,"") // remove html tag
content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}
const getComment = () => {
const runTwikoo = () => {
twikoo.getRecentComments({
envId: '!{theme.twikoo}',
pageSize: !{theme.newest_comments.limit},
includeReply: true
}).then(function (res) {
saveToLocal.set('twikoo-newest-comments', JSON.stringify(res), 10/(60*24))
generateHtml(res)
}).catch(function (err) {
const $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
})
}
if (typeof twikoo === 'object') {
runTwikoo()
} else {
getScript('!{theme.CDN.twikoo}').then(runTwikoo)
}
}
const getIcon = (md5) => {
let defaultIcon = '!{ theme.newest_comments.twikoo.default_avatar ? `?d=${theme.newest_comments.twikoo.default_avatar}` : ''}'
let iconUrl = `https://gravatar.loli.net/avatar/${md5 + defaultIcon}`
return iconUrl
}
const generateHtml = array => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'
if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class='thumbnail'><img data-lazy-src='${getIcon(array[i].mailMd5)}' alt='${array[i].nick}'></a>`
}
result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${changeContent(array[i].commentText)}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].created, true)}</time></div>
</div></div>`
}
} else {
result += '!{_p("aside.card_newest_comments.zero")}'
}
let $dom = document.querySelector('#card-newest-comments .aside-list')
$dom.innerHTML= result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh($dom)
}
const newestCommentInit = () => {
if (document.querySelector('#card-newest-comments .aside-list')) {
const data = saveToLocal.get('twikoo-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getComment()
}
}
}
newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})

2
layout/includes/third-party/share/share-js.pug vendored
View File

@@ -1,3 +1,3 @@
.social-share(data-image=url_for(page.cover|| theme.avatar.img) data-sites= theme.sharejs.sites)
link(rel="stylesheet" href=url_for(theme.CDN.sharejs_css))
link(rel='stylesheet' href=url_for(theme.CDN.sharejs_css) media="print" onload="this.media='all'")
script(src=url_for(theme.CDN.sharejs) defer)

23
layout/includes/widget/index.pug
View File

@@ -1,13 +1,22 @@
#aside_content.aside_content
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
if is_post()
if showToc
//- post
if is_post()
if showToc && theme.toc.style_simple
.sticky_layout
include ./card_post_toc.pug
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
else
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
if showToc
include ./card_post_toc.pug
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
else
//- page
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hexo-theme-butterfly",
"version": "3.4.0-b1",
"version": "3.4.0-b2",
"description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json",
"scripts": {

4
source/css/_global/function.styl
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}

5
source/css/_global/index.styl
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)

22
source/css/_layout/aside.styl
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)

2
source/css/_layout/footer.styl
View File

@@ -31,3 +31,5 @@
.icp-icon
padding: 0 4px
vertical-align: text-bottom
max-height: 1.4em
width auto

18
source/css/_layout/head.styl
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

4
source/css/_layout/rightside.styl
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

19
source/css/_mode/readmode.styl
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

91
source/js/main.js
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
}

15
source/js/utils.js
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) {