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 @@
-
+
 <%- __('comments') %>
<% 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') %> + <% } %> <% } %>
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()