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

feat: 增加Twikoo評論 #402

Browse Source 
improvement: 滾動到評論按鈕只要用評論的頁面就出現
improvement: aside狀態存localstore
fix: 修復disqusjs沒有設置api時，沒有反代的bugs
fix: 修復aside在font-matter aside為false時，收縮按鈕依舊出現和點擊按鈕會出現空白的bugs #398
This commit is contained in:
Jerry
2020-10-27 22:14:47 +08:00
parent 6b35388f33
commit d2f5af32ae
14 changed files with 139 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
_config.yml
View File

@@ -322,6 +322,10 @@ facebook_comments:
order_by: social # social/time/reverse_time order_by: social # social/time/reverse_time
lang: en_US # Language en_US/zh_CN/zh_TW and so on lang: en_US # Language en_US/zh_CN/zh_TW and so on
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
# Chat Services # Chat Services
# -------------------------------------- # --------------------------------------
@@ -839,6 +843,7 @@ CDN:
disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
utterances: https://utteranc.es/client.js utterances: https://utteranc.es/client.js
twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
# share # share
addtoany: https://static.addtoany.com/menu/page.js addtoany: https://static.addtoany.com/menu/page.js

4
layout/includes/additional-js.pug
View File

@@ -63,9 +63,9 @@ div
if theme.aplayerInject && theme.aplayerInject.enable if theme.aplayerInject && theme.aplayerInject.enable
if theme.pjax.enable || theme.aplayerInject.per_page if theme.pjax.enable || theme.aplayerInject.per_page
include ./head/aplayer.pug include ./third-party/aplayer.pug
else if page.aplayer else if page.aplayer
include ./head/aplayer.pug include ./third-party/aplayer.pug
if theme.pjax.enable if theme.pjax.enable
!=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache}) !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache})

112
layout/includes/head/darkmode.pug
View File

@@ -1,53 +1,65 @@
if theme.darkmode.enable script
script. | (function () {
(function () {
window.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
window.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const autoChangeMode = '#{theme.darkmode.autoChangeMode}' if theme.darkmode.enable
const t = saveToLocal.get('theme') | window.activateDarkMode = function () {
if (autoChangeMode === '1') { | document.documentElement.setAttribute('data-theme', 'dark')
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches | if (document.querySelector('meta[name="theme-color"]') !== null) {
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches | document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches | }
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified | }
| window.activateLightMode = function () {
| document.documentElement.setAttribute('data-theme', 'light')
| if (document.querySelector('meta[name="theme-color"]') !== null) {
| document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
| }
| }
if (t === undefined) { | const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
if (isLightMode) activateLightMode() | const t = saveToLocal.get('theme')
else if (isDarkMode) activateDarkMode() | if (autoChangeMode === '1') {
else if (isNotSpecified || hasNoSupport) { | const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const now = new Date() | const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
const hour = now.getHours() | const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const isNight = hour <= 6 || hour >= 18 | const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
isNight ? activateDarkMode() : activateLightMode()
} | if (t === undefined) {
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { | if (isLightMode) activateLightMode()
if (saveToLocal.get('theme') === undefined) { | else if (isDarkMode) activateDarkMode()
e.matches ? activateDarkMode() : activateLightMode() | else if (isNotSpecified || hasNoSupport) {
} | const now = new Date()
}) | const hour = now.getHours()
} else if (t === 'light') activateLightMode() | const isNight = hour <= 6 || hour >= 18
else activateDarkMode() | isNight ? activateDarkMode() : activateLightMode()
} else if (autoChangeMode === '2') { | }
const now = new Date() | window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
const hour = now.getHours() | if (saveToLocal.get('theme') === undefined) {
const isNight = hour <= 6 || hour >= 18 | e.matches ? activateDarkMode() : activateLightMode()
if (t === undefined) isNight ? activateDarkMode() : activateLightMode() | }
else if (t === 'light') activateLightMode() | })
else activateDarkMode() | } else if (t === 'light') activateLightMode()
} else { | else activateDarkMode()
if (t === 'dark') activateDarkMode() | } else if (autoChangeMode === '2') {
else if (t === 'light') activateLightMode() | const now = new Date()
} | const hour = now.getHours()
})() | const isNight = hour <= 6 || hour >= 18
| if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
| else if (t === 'light') activateLightMode()
| else activateDarkMode()
| } else {
| if (t === 'dark') activateDarkMode()
| else if (t === 'light') activateLightMode()
| }
if theme.aside.enable && theme.aside.button
| const asideStatus = saveToLocal.get('aside-status')
| if (asideStatus !== undefined) {
| if (asideStatus === 'hide') {
| document.documentElement.classList.add('hide-aside')
| } else {
| document.documentElement.classList.remove('hide-aside')
| }
| }
| })()

14
layout/includes/rightside.pug
View File

@@ -8,14 +8,14 @@
if theme.darkmode.enable && theme.darkmode.button if theme.darkmode.enable && theme.darkmode.button
button#darkmode(type="button" title=_p('rightside.night_mode_title')) button#darkmode(type="button" title=_p('rightside.night_mode_title'))
i.fas.fa-adjust i.fas.fa-adjust
if theme.aside.enable && theme.aside.button && page.aside !== false
button#hide-aside-btn(type="button")
i.fas.fa-arrows-alt-h
#rightside-config-show #rightside-config-show
if is_post() if is_post()
if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button)) if (theme.readmode || theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button))
button#rightside_config(type="button" title=_p("rightside.setting")) button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog i.fas.fa-cog
if commentsJsLoad
a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
i.fas.fa-comments
if showToc && theme.aside.mobile if showToc && theme.aside.mobile
button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
i.fas.fa-list-ul i.fas.fa-list-ul
@@ -23,13 +23,11 @@
button#rightside_config(type="button" title=_p("rightside.setting")) button#rightside_config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog i.fas.fa-cog
if theme.aside.enable && theme.aside.button
button#hide-aside-btn(type="button")
i.fas.fa-arrows-alt-h
if theme.chat_btn if theme.chat_btn
button#chat_btn(type="button" title=_p("rightside.chat_btn")) button#chat_btn(type="button" title=_p("rightside.chat_btn"))
i.fas.fa-sms i.fas.fa-sms
if commentsJsLoad
a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
i.fas.fa-comments
button#go-up(type="button" title=_p("rightside.back_to_top")) button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-arrow-up i.fas.fa-arrow-up

0
layout/includes/head/aplayer.pug → layout/includes/third-party/aplayer.pug vendored
View File

3
layout/includes/third-party/comments/disqusjs.pug vendored
View File

@@ -1,3 +1,4 @@
- let disqusjsApi = theme.disqusjs.api || 'https://disqus.skk.moe/disqus/'
script. script.
function loadDisqusjs () { function loadDisqusjs () {
function addDisqusjsCSS () { function addDisqusjsCSS () {
@@ -15,7 +16,7 @@ script.
identifier: '!{ page.path }', identifier: '!{ page.path }',
url: '!{ page.permalink }', url: '!{ page.permalink }',
title: '!{ page.title }', title: '!{ page.title }',
api: '!{theme.disqusjs.api}', api: '!{disqusjsApi}',
apikey: '!{theme.disqusjs.apikey}', apikey: '!{theme.disqusjs.apikey}',
nocomment: '!{theme.disqusjs.nocomment}', nocomment: '!{theme.disqusjs.nocomment}',
admin: '!{theme.disqusjs.admin}', admin: '!{theme.disqusjs.admin}',

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

@@ -7,11 +7,9 @@ hr
span= ' ' + _p('comment') span= ' ' + _p('comment')
if theme.comments.use.length > 1 if theme.comments.use.length > 1
.comment-switch #comment-switch
span.first-comment=defaultComment span.first-comment=defaultComment
label span.switch-btn
input#switch-comments-btn(type="checkbox")
span.slider
span.second-comment=theme.comments.use[1] span.second-comment=theme.comments.use[1]
@@ -31,6 +29,8 @@ hr
#gitalk-container #gitalk-container
when 'Utterances' when 'Utterances'
#utterances-wrap #utterances-wrap
when 'Twikoo'
#twikoo
when 'Facebook Comments' when 'Facebook Comments'
.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light' .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
data-numposts= theme.facebook_comments.pageSize || 10 data-numposts= theme.facebook_comments.pageSize || 10

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

@@ -12,5 +12,7 @@ each name in theme.comments.use
include ./gitalk.pug include ./gitalk.pug
when 'Utterances' when 'Utterances'
!=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache}) !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache})
when 'Twikoo'
!=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache})
when 'Facebook Comments' when 'Facebook Comments'
!=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache}) !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache})

24
layout/includes/third-party/comments/twikoo.pug vendored Normal file
View File

@@ -0,0 +1,24 @@
script.
function loadTwikoo () {
function init () {
twikoo.init({
envId: '!{theme.twikoo}'
})
}
if (typeof twikoo.init === 'function') {
init()
} else {
$.getScript('!{theme.CDN.twikoo}', init)
}
}
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()
}
}

2
package.json
View File

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

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

@@ -333,7 +333,7 @@
.layout .layout
justify-content: center justify-content: center
> div:last-child > .aside_content
display: none display: none
> div:first-child > div:first-child

48
source/css/_layout/comments.styl
View File

@@ -8,7 +8,7 @@
font-weight: 700 font-weight: 700
font-size: 1.43em font-size: 1.43em
.comment-switch #comment-switch
display: inline-block display: inline-block
if hexo-config('comments.text') if hexo-config('comments.text')
@@ -30,46 +30,34 @@
.second-comment .second-comment
color: $comments-switch-second-text color: $comments-switch-second-text
label .switch-btn
position: relative position: relative
display: inline-block display: inline-block
margin: -4px .4rem 0 margin: -4px .4rem 0
width: 42px width: 42px
height: 22px height: 22px
border-radius: 34px
background-color: $comments-switch-first-text
vertical-align: middle vertical-align: middle
cursor: pointer
transition: .4s
input#switch-comments-btn &:before
width: 0
height: 0
opacity: 0
&:checked + .slider
background-color: $comments-switch-second-text
&:checked + .slider:before
transform: translateX(20px)
.slider
position: absolute position: absolute
top: 0 bottom: 4px
right: 0 left: 4px
bottom: 0 width: 14px
left: 0 height: 14px
border-radius: 34px border-radius: 50%
background-color: $comments-switch-first-text background-color: $comments-switch-round
cursor: pointer content: ''
transition: .4s transition: .4s
&.move
background-color: $comments-switch-second-text
&:before &:before
position: absolute transform: translateX(20px)
bottom: 4px
left: 4px
width: 14px
height: 14px
border-radius: 50%
background-color: $comments-switch-round
content: ''
transition: .4s
.comment-wrap .comment-wrap
> div:nth-child(2) > div:nth-child(2)

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

@@ -86,11 +86,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
color: #90a4ae !important color: #90a4ae !important
#post-comment #post-comment
.comment-switch #comment-switch
if hexo-config('comments.text') if hexo-config('comments.text')
background: #2c2c2c !important background: #2c2c2c !important
label .switch-btn
filter: brightness(.8) filter: brightness(.8)
// note // note

12
source/js/main.js
View File

@@ -485,7 +485,13 @@ $(function () {
$rightsideEle.on('click', '#hide-aside-btn', () => { $rightsideEle.on('click', '#hide-aside-btn', () => {
const $htmlDom = $(document.documentElement) const $htmlDom = $(document.documentElement)
$htmlDom.hasClass('hide-aside') ? $htmlDom.removeClass('hide-aside') : $htmlDom.addClass('hide-aside') if ($htmlDom.hasClass('hide-aside')) {
$htmlDom.removeClass('hide-aside')
saveToLocal.set('aside-status', 'show', 2)
} else {
$htmlDom.addClass('hide-aside')
saveToLocal.set('aside-status', 'hide', 2)
}
}) })
/** /**
@@ -624,7 +630,9 @@ $(function () {
const switchComments = function () { const switchComments = function () {
let switchDone = false let switchDone = false
$('#switch-comments-btn').on('click', function () { $('#comment-switch > .switch-btn').on('click', function () {
const $btn = $(this)
$btn.hasClass('move') ? $btn.removeClass('move') : $btn.addClass('move')
$('#post-comment > .comment-wrap > div').each(function (i, o) { $('#post-comment > .comment-wrap > div').each(function (i, o) {
const $this = $(o) const $this = $(o)
if ($this.is(':visible')) { if ($this.is(':visible')) {