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
lang: en_US # Language en_US/zh_CN/zh_TW and so on
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
# Chat Services
# --------------------------------------
@@ -839,6 +843,7 @@ CDN:
disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
utterances: https://utteranc.es/client.js
twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
# share
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.pjax.enable || theme.aplayerInject.per_page
include ./head/aplayer.pug
include ./third-party/aplayer.pug
else if page.aplayer
include ./head/aplayer.pug
include ./third-party/aplayer.pug
if theme.pjax.enable
!=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.
(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')
}
}
script
| (function () {
const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
const t = saveToLocal.get('theme')
if (autoChangeMode === '1') {
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
if theme.darkmode.enable
| 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')
| }
| }
if (t === undefined) {
if (isLightMode) activateLightMode()
else if (isDarkMode) activateDarkMode()
else if (isNotSpecified || hasNoSupport) {
const now = new Date()
const hour = now.getHours()
const isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else if (t === 'light') activateLightMode()
else activateDarkMode()
} else if (autoChangeMode === '2') {
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()
}
})()
| const autoChangeMode = '#{theme.darkmode.autoChangeMode}'
| const t = saveToLocal.get('theme')
| if (autoChangeMode === '1') {
| const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
| const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
| const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
| const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
| if (t === undefined) {
| if (isLightMode) activateLightMode()
| else if (isDarkMode) activateDarkMode()
| else if (isNotSpecified || hasNoSupport) {
| const now = new Date()
| const hour = now.getHours()
| const isNight = hour <= 6 || hour >= 18
| isNight ? activateDarkMode() : activateLightMode()
| }
| window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
| if (saveToLocal.get('theme') === undefined) {
| e.matches ? activateDarkMode() : activateLightMode()
| }
| })
| } else if (t === 'light') activateLightMode()
| else activateDarkMode()
| } else if (autoChangeMode === '2') {
| 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
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")
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
if commentsJsLoad
a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
i.fas.fa-comments
if showToc && theme.aside.mobile
button#mobile-toc-button.close(type="button" title=_p("rightside.toc"))
i.fas.fa-list-ul
@@ -23,13 +23,11 @@
button#rightside_config(type="button" title=_p("rightside.setting"))
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
button#chat_btn(type="button" title=_p("rightside.chat_btn"))
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"))
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.
function loadDisqusjs () {
function addDisqusjsCSS () {
@@ -15,7 +16,7 @@ script.
identifier: '!{ page.path }',
url: '!{ page.permalink }',
title: '!{ page.title }',
api: '!{theme.disqusjs.api}',
api: '!{disqusjsApi}',
apikey: '!{theme.disqusjs.apikey}',
nocomment: '!{theme.disqusjs.nocomment}',
admin: '!{theme.disqusjs.admin}',

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

@@ -7,11 +7,9 @@ hr
span= ' ' + _p('comment')
if theme.comments.use.length > 1
.comment-switch
#comment-switch
span.first-comment=defaultComment
label
input#switch-comments-btn(type="checkbox")
span.slider
span.switch-btn
span.second-comment=theme.comments.use[1]
@@ -31,6 +29,8 @@ hr
#gitalk-container
when 'Utterances'
#utterances-wrap
when 'Twikoo'
#twikoo
when 'Facebook Comments'
.fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
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
when 'Utterances'
!=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'
!=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",
"version": "3.3.0-b6",
"version": "3.3.0-b7",
"description": "A Simple and Card UI Design theme for Hexo",
"main": "package.json",
"scripts": {

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

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

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

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

12
source/js/main.js
View File

@@ -485,7 +485,13 @@ $(function () {
$rightsideEle.on('click', '#hide-aside-btn', () => {
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 () {
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) {
const $this = $(o)
if ($this.is(':visible')) {