feat(comment): added support waline comment plugin (#135)
This commit is contained in:
XPoet
parent
2ed915a36f
commit
3d70341826
13
_config.yml
13
_config.yml
|
|
@ -211,6 +211,7 @@ comment:
|
|||
|
||||
# Valine
|
||||
# See: https://github.com/xCss/Valine
|
||||
# https://valine.js.org
|
||||
valine:
|
||||
appid: # Your leancloud application appid
|
||||
appkey: # Your leancloud application appkey
|
||||
|
|
@ -218,6 +219,7 @@ comment:
|
|||
|
||||
# Gitalk
|
||||
# See: https://github.com/gitalk/gitalk
|
||||
# https://gitalk.github.io
|
||||
gitalk:
|
||||
github_id: # GitHub repo owner
|
||||
github_admins: # GitHub Admins (in Array type), optional.
|
||||
|
|
@ -227,10 +229,19 @@ comment:
|
|||
|
||||
# Twikoo
|
||||
# See: https://github.com/imaegoo/twikoo
|
||||
# https://twikoo.js.org
|
||||
twikoo:
|
||||
env_id: # Tencent Cloud environment id
|
||||
region: # Environment region. If select Guangzhou, fill in "ap-guangzhou".
|
||||
version: 1.6.7 # Twikoo version, default use v1.6.7, you can custom fill
|
||||
version: 1.6.7 # Twikoo version, default use v1.6.7
|
||||
|
||||
# Waline
|
||||
# See: https://github.com/walinejs/waline
|
||||
# https://waline.js.org/guide/get-started.html
|
||||
waline:
|
||||
server_url: # Server URL
|
||||
reaction: # Article reactions
|
||||
version: 2 # Waline version, default use v2
|
||||
|
||||
# ---------------------------------------------------------------------------------------
|
||||
# RSS
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<div class="comments-container">
|
||||
<div id="comment-anchor"></div>
|
||||
<div id="comments-anchor"></div>
|
||||
<div class="comment-area-title">
|
||||
<i class="fas fa-comments"></i> <%- __('comments') %>
|
||||
</div>
|
||||
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
|
||||
|
||||
<% if (theme.comment.use === 'valine') { %>
|
||||
<%- partial('valine') %>
|
||||
|
||||
|
|
@ -14,6 +13,9 @@
|
|||
<% } else if (theme.comment.use === 'twikoo') { %>
|
||||
<%- partial('twikoo') %>
|
||||
|
||||
<% } else if (theme.comment.use === 'waline') { %>
|
||||
<%- partial('waline') %>
|
||||
|
||||
<% } %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
if ('<%= theme.pjax.enable %>') {
|
||||
if ('<%= theme.pjax.enable %>' === 'true') {
|
||||
const loadGitalkTimeout = setTimeout(() => {
|
||||
loadGitalk();
|
||||
clearTimeout(loadGitalkTimeout);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ const { enable: pjax_enable } = theme.pjax
|
|||
let {
|
||||
env_id: tk_env_id, region: tk_region, version: tk_version
|
||||
} = theme.comment.twikoo
|
||||
if (!tk_version) { tk_version = '1.6.7' }
|
||||
if (!tk_version) {
|
||||
tk_version = '1.6.7'
|
||||
}
|
||||
const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
|
||||
%>
|
||||
<% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
|
||||
|
|
@ -22,7 +24,7 @@ const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.
|
|||
});
|
||||
}
|
||||
|
||||
if ('<%= pjax_enable === true %>') {
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
const loadTwikooTimeout = setTimeout(() => {
|
||||
loadTwikoo();
|
||||
clearTimeout(loadTwikooTimeout);
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
}, 2000);
|
||||
}
|
||||
|
||||
if ('<%= theme.pjax.enable %>') {
|
||||
if ('<%= theme.pjax.enable %>' === 'true') {
|
||||
const loadValineTimeout = setTimeout(() => {
|
||||
loadValine();
|
||||
clearTimeout(loadValineTimeout);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<%
|
||||
const {enable: pjax_enable} = theme.pjax
|
||||
let {
|
||||
server_url: waline_env_server_url,
|
||||
version: waline_version,
|
||||
reaction: waline_reaction,
|
||||
} = theme.comment.waline
|
||||
if (!waline_version) {
|
||||
waline_version = '2'
|
||||
}
|
||||
const waline_cdn_url = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
|
||||
%>
|
||||
<% if(theme.comment.use === 'waline' && waline_env_server_url) { %>
|
||||
<div class="waline-comment-container">
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
|
||||
src="<%= waline_cdn_url %>"
|
||||
></script>
|
||||
<link rel="stylesheet"
|
||||
href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css"
|
||||
/>
|
||||
<link rel="stylesheet"
|
||||
href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline-meta.css"
|
||||
/>
|
||||
<div id="waline-comment"></div>
|
||||
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
|
||||
function loadWaline() {
|
||||
Waline.init({
|
||||
el: '#waline-comment',
|
||||
serverURL: '<%= waline_env_server_url %>',
|
||||
lang: '<%= config.language %>' || 'zh-CN',
|
||||
comment: '.post-comments-count',
|
||||
reaction: '<%= waline_reaction %>' === 'true'
|
||||
})
|
||||
}
|
||||
|
||||
if ('<%= pjax_enable %>' === 'true') {
|
||||
setTimeout(() => {
|
||||
loadWaline()
|
||||
}, 1000)
|
||||
} else {
|
||||
window.addEventListener('DOMContentLoaded', loadWaline)
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<% } %>
|
||||
|
|
@ -2,15 +2,16 @@
|
|||
<ul class="tools-list">
|
||||
<!-- TOC aside toggle -->
|
||||
<% if (theme.toc.enable) { %>
|
||||
<li class="tools-item toggle-show-toc">
|
||||
<li class="tools-item flex-center toggle-show-toc">
|
||||
<i class="fas fa-list"></i>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<!-- go comment -->
|
||||
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
|
||||
<li class="tools-item go-comment">
|
||||
<li class="tools-item flex-center go-to-comments">
|
||||
<i class="fas fa-comment"></i>
|
||||
<span class="post-comments-count"></span>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ $z-index-10 = 1010
|
|||
// ==============================================================================================
|
||||
$temp-color = hexo-config('style.primary_color')
|
||||
$primary-color = $temp-color ? convert($temp-color) : #0066cc
|
||||
$primary-color-1 = lighten($primary-color, 10%)
|
||||
|
||||
|
||||
// ==============================================================================================
|
||||
|
|
@ -95,6 +96,7 @@ $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19
|
|||
// theme dark mode color set
|
||||
// ==============================================================================================
|
||||
$dark-primary-color = $primary-color
|
||||
$dark-primary-color-1 = darken($primary-color, 10%)
|
||||
$dark-background-color = #383940
|
||||
$dark-second-background-color = darken($dark-background-color, 10%)
|
||||
$dark-default-text-color = #bebec6
|
||||
|
|
@ -133,9 +135,10 @@ $default-font-weight = 400
|
|||
// light/dark mode color
|
||||
// ==============================================================================================
|
||||
root-color(mode) {
|
||||
--primary-color mode == 'light' ? $primary-color : $dark-primary-color
|
||||
--primary-color-1 mode == 'light' ? $primary-color-1 : $dark-primary-color-1
|
||||
--background-color mode == 'light' ? $background-color : $dark-background-color
|
||||
--second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
|
||||
--primary-color mode == 'light' ? $primary-color : $dark-primary-color
|
||||
--first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
|
||||
--second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
|
||||
--third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
|||
else if (hexo-config('comment.use') == "twikoo") {
|
||||
@import "./twikoo.styl"
|
||||
}
|
||||
else if (hexo-config('comment.use') == "waline") {
|
||||
@import "./waline.styl"
|
||||
}
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
|
|
@ -15,7 +18,7 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
|
|||
width 100%
|
||||
margin-top $component-spacing-value
|
||||
|
||||
#comment-anchor {
|
||||
#comments-anchor {
|
||||
width 100%
|
||||
height 0.8rem
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
.waline-comment-container {
|
||||
#waline-comment {
|
||||
--waline-theme-color var(--primary-color)
|
||||
--waline-active-color var(--primary-color-1)
|
||||
--waline-color var(--default-text-color)
|
||||
--waline-bgcolor var(--background-color)
|
||||
--waline-border-color var(--border-color)
|
||||
--waline-disable-bgcolor var(--second-background-color)
|
||||
--waline-disable-color var(--default-text-color)
|
||||
--waline-code-bgcolor rgba(40, 44, 52, 0.9)
|
||||
--waline-info-bgcolor var(--fourth-text-color)
|
||||
--waline-info-color var(--default-text-color)
|
||||
--waline-border 1px solid var(--waline-border-color)
|
||||
|
||||
input
|
||||
textarea {
|
||||
position relative
|
||||
box-sizing border-box
|
||||
padding 0.6rem 1rem
|
||||
color var(--default-text-color)
|
||||
background transparent
|
||||
border-radius 0.4rem
|
||||
outline none
|
||||
|
||||
&:hover {
|
||||
background var(--second-background-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wl-header {
|
||||
box-sizing border-box
|
||||
padding 0
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
|
||||
}
|
||||
|
||||
.wl-logout-btn {
|
||||
svg {
|
||||
width 1rem
|
||||
height 1rem
|
||||
path {
|
||||
color var(--default-text-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wl-panel {
|
||||
border-radius 0.4rem
|
||||
}
|
||||
|
||||
.wl-count
|
||||
.wl-num
|
||||
.wl-preview h4
|
||||
.wl-like span {
|
||||
color var(--third-text-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,9 +9,8 @@ $li-margin-bottom = 0.8rem
|
|||
.tools-list {
|
||||
|
||||
li {
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
position relative
|
||||
box-sizing border-box
|
||||
width $post-tool-button-width
|
||||
height $post-tool-button-width
|
||||
margin-bottom $li-margin-bottom
|
||||
|
|
@ -49,6 +48,30 @@ $li-margin-bottom = 0.8rem
|
|||
display none !important
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.go-to-comments {
|
||||
.post-comments-count {
|
||||
position absolute
|
||||
top 0
|
||||
right -1rem
|
||||
display none
|
||||
align-items center
|
||||
justify-content center
|
||||
box-sizing border-box
|
||||
min-width 1.4rem
|
||||
height 1.4rem
|
||||
padding 0 0.2rem
|
||||
color var(--background-color)
|
||||
font-size 12px
|
||||
background var(--border-color)
|
||||
border-radius 0.4rem
|
||||
|
||||
+keep-tablet() {
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ function initToggleShowToc() {
|
|||
toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'),
|
||||
toggleShowTocIcon: document.querySelector('.toggle-show-toc i'),
|
||||
mainContentDom: document.querySelector('.main-content'),
|
||||
postToolsDom: document.querySelector('.page-container .post-tools'),
|
||||
postToolsDom: document.querySelector('.post-tools'),
|
||||
goToCommentsDom: document.querySelector('.post-tools .go-to-comments'),
|
||||
|
||||
isShowToc: false,
|
||||
|
||||
initToggleToc() {
|
||||
|
|
@ -56,10 +58,45 @@ function initToggleShowToc() {
|
|||
window.addEventListener('resize', () => {
|
||||
this.setPostToolsLeft()
|
||||
})
|
||||
},
|
||||
|
||||
// go comment anchor
|
||||
goToComments() {
|
||||
if (this.goToCommentsDom) {
|
||||
const commentsAnchor = document.querySelector('#comments-anchor')
|
||||
this.goToCommentsDom.addEventListener('click', () => {
|
||||
commentsAnchor && commentsAnchor.scrollIntoView()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// watch comments count
|
||||
watchPostCommentsCount() {
|
||||
const commentsCountDom = this.postToolsDom.querySelector('.post-comments-count')
|
||||
const config = { attributes: true, childList: true }
|
||||
const callback = function (mutationsList) {
|
||||
mutationsList.forEach((item) => {
|
||||
if (item.type === 'childList') {
|
||||
const count = Number(item.target.innerHTML)
|
||||
if (count > 0) {
|
||||
commentsCountDom.style.display = 'flex'
|
||||
if (count > 99) {
|
||||
commentsCountDom.innerHTML = '99+'
|
||||
observer.disconnect()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(callback)
|
||||
observer.observe(commentsCountDom, config)
|
||||
}
|
||||
}
|
||||
KEEP.utils.postHelper.initToggleToc()
|
||||
KEEP.utils.postHelper.initSetPostToolsLeft()
|
||||
KEEP.utils.postHelper.goToComments()
|
||||
KEEP.utils.postHelper.watchPostCommentsCount()
|
||||
}
|
||||
|
||||
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
|
||||
|
|
|
|||
|
|
@ -132,16 +132,6 @@ KEEP.initUtils = () => {
|
|||
})
|
||||
},
|
||||
|
||||
// go comment anchor
|
||||
goComment() {
|
||||
this.goComment_dom = document.querySelector('.go-comment')
|
||||
if (this.goComment_dom) {
|
||||
this.goComment_dom.addEventListener('click', () => {
|
||||
document.querySelector('#comment-anchor').scrollIntoView()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// get dom element height
|
||||
getElementHeight(selectors) {
|
||||
const dom = document.querySelector(selectors)
|
||||
|
|
@ -443,9 +433,6 @@ KEEP.initUtils = () => {
|
|||
// global font adjust
|
||||
KEEP.utils.globalFontAdjust()
|
||||
|
||||
// go comment
|
||||
KEEP.utils.goComment()
|
||||
|
||||
// init page height handle
|
||||
KEEP.utils.initPageHeightHandle()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue