diff --git a/_config.yml b/_config.yml
index 9970744..6390661 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/_partial/comment/comment.ejs b/layout/_partial/comment/comment.ejs
index f611c7e..c5e0df5 100644
--- a/layout/_partial/comment/comment.ejs
+++ b/layout/_partial/comment/comment.ejs
@@ -1,10 +1,9 @@
diff --git a/layout/_partial/comment/gitalk.ejs b/layout/_partial/comment/gitalk.ejs
index 423928a..9f130cf 100644
--- a/layout/_partial/comment/gitalk.ejs
+++ b/layout/_partial/comment/gitalk.ejs
@@ -37,7 +37,7 @@
}
}
- if ('<%= theme.pjax.enable %>') {
+ if ('<%= theme.pjax.enable %>' === 'true') {
const loadGitalkTimeout = setTimeout(() => {
loadGitalk();
clearTimeout(loadGitalkTimeout);
diff --git a/layout/_partial/comment/twikoo.ejs b/layout/_partial/comment/twikoo.ejs
index 072e549..faf30f3 100644
--- a/layout/_partial/comment/twikoo.ejs
+++ b/layout/_partial/comment/twikoo.ejs
@@ -1,9 +1,11 @@
<%
-const { enable: pjax_enable } = theme.pjax
+const {enable: pjax_enable} = theme.pjax
let {
- env_id: tk_env_id, region: tk_region, version: tk_version
+ 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) { %>
@@ -13,23 +15,23 @@ const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.
>
<% } %>
diff --git a/layout/_partial/comment/valine.ejs b/layout/_partial/comment/valine.ejs
index 80b2f3f..e15943a 100755
--- a/layout/_partial/comment/valine.ejs
+++ b/layout/_partial/comment/valine.ejs
@@ -53,7 +53,7 @@
}, 2000);
}
- if ('<%= theme.pjax.enable %>') {
+ if ('<%= theme.pjax.enable %>' === 'true') {
const loadValineTimeout = setTimeout(() => {
loadValine();
clearTimeout(loadValineTimeout);
diff --git a/layout/_partial/comment/waline.ejs b/layout/_partial/comment/waline.ejs
new file mode 100644
index 0000000..b674642
--- /dev/null
+++ b/layout/_partial/comment/waline.ejs
@@ -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) { %>
+
+<% } %>
diff --git a/layout/_partial/post-tools.ejs b/layout/_partial/post-tools.ejs
index 2e38f88..50d941d 100644
--- a/layout/_partial/post-tools.ejs
+++ b/layout/_partial/post-tools.ejs
@@ -2,15 +2,16 @@
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index d537e61..926c994 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -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
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index 1aabcdc..679e225 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/source/css/layout/_partial/comment/comment.styl
@@ -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
}
diff --git a/source/css/layout/_partial/comment/waline.styl b/source/css/layout/_partial/comment/waline.styl
new file mode 100644
index 0000000..ca17795
--- /dev/null
+++ b/source/css/layout/_partial/comment/waline.styl
@@ -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)
+ }
+ }
+}
diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl
index 412cb94..990ad41 100644
--- a/source/css/layout/_partial/post-tools.styl
+++ b/source/css/layout/_partial/post-tools.styl
@@ -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
+ }
+ }
+ }
}
}
}
diff --git a/source/js/post-helper.js b/source/js/post-helper.js
index 088d5c3..e927a98 100644
--- a/source/js/post-helper.js
+++ b/source/js/post-helper.js
@@ -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) {
diff --git a/source/js/utils.js b/source/js/utils.js
index 34f21ac..e6fdf53 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -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()