From 744b1ac050df9d36297c9f4e00c790e2ee9d01f3 Mon Sep 17 00:00:00 2001 From: XPoet Date: Tue, 14 Apr 2020 21:18:37 +0800 Subject: [PATCH] feat: add comment plugin Gitalk --- _config.yml | 10 + layout/_partial/comments/comment.ejs | 9 + layout/_partial/comments/gitalk.ejs | 23 + layout/_partial/{ => comments}/valine.ejs | 8 +- layout/about.ejs | 2 +- layout/article-content.ejs | 2 +- .../css/layout/_partial/comments/gitalk.styl | 455 ++++++++++++++++++ .../_partial/{ => comments}/valine.styl | 2 +- source/css/layout/common/variables.styl | 2 +- source/css/style.styl | 3 +- 10 files changed, 509 insertions(+), 7 deletions(-) create mode 100644 layout/_partial/comments/comment.ejs create mode 100644 layout/_partial/comments/gitalk.ejs rename layout/_partial/{ => comments}/valine.ejs (76%) create mode 100644 source/css/layout/_partial/comments/gitalk.styl rename source/css/layout/_partial/{ => comments}/valine.styl (97%) diff --git a/_config.yml b/_config.yml index 74d1f5c..ef85130 100644 --- a/_config.yml +++ b/_config.yml @@ -30,6 +30,16 @@ comments: notify: false # mail notifier, https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: your placeholder + + # Gitalk + # For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk + gitalk: + enable: false + github_id: # GitHub repo owner + repository: # Repository name to store issues + client_id: # GitHub Application Client ID + client_secret: # GitHub Application Client Secret + distraction_free_mode: false # Facebook-like distraction free mode # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ diff --git a/layout/_partial/comments/comment.ejs b/layout/_partial/comments/comment.ejs new file mode 100644 index 0000000..d364d57 --- /dev/null +++ b/layout/_partial/comments/comment.ejs @@ -0,0 +1,9 @@ +
+ <% if (theme.comments.valine.enable && theme.comments.gitalk.enable) { %> + <%- partial('valine') %> + <% } else if (theme.comments.valine.enable) { %> + <%- partial('valine') %> + <% } else if (theme.comments.gitalk.enable) { %> + <%- partial('gitalk') %> + <% } %> +
\ No newline at end of file diff --git a/layout/_partial/comments/gitalk.ejs b/layout/_partial/comments/gitalk.ejs new file mode 100644 index 0000000..8f62f7f --- /dev/null +++ b/layout/_partial/comments/gitalk.ejs @@ -0,0 +1,23 @@ +<% if( + theme.comments.gitalk.enable + && theme.comments.gitalk.client_id + && theme.comments.gitalk.client_secret + && theme.comments.gitalk.github_id + && theme.comments.gitalk.repo +) { %> + +
+ +<% } %> \ No newline at end of file diff --git a/layout/_partial/valine.ejs b/layout/_partial/comments/valine.ejs similarity index 76% rename from layout/_partial/valine.ejs rename to layout/_partial/comments/valine.ejs index 253de26..b0dcb29 100755 --- a/layout/_partial/valine.ejs +++ b/layout/_partial/comments/valine.ejs @@ -1,4 +1,8 @@ -<% if(theme.comments.valine.enable && theme.comments.valine.appid && theme.comments.valine.appkey) { %> +<% if( + theme.comments.valine.enable + && theme.comments.valine.appid + && theme.comments.valine.appkey +) { %>
@@ -11,7 +15,7 @@ verify: '<%= theme.comments.valine.verify %>', avatar: 'wavatar', placeholder: '<%= theme.comments.valine.placeholder %>', - lang: '<%= config.language%>'.toLowerCase() + lang: '<%= config.language %>'.toLowerCase() })
diff --git a/layout/about.ejs b/layout/about.ejs index d039e86..c0100cf 100644 --- a/layout/about.ejs +++ b/layout/about.ejs @@ -4,7 +4,7 @@
<% if (page.comments) { %> - <%- partial('_partial/valine') %> + <%- partial('_partial/comments/comment') %> <% } %>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 2c1db1c..01fd7fb 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -29,6 +29,6 @@
- <%- partial('_partial/valine') %> + <%- partial('_partial/comments/comment') %>
\ No newline at end of file diff --git a/source/css/layout/_partial/comments/gitalk.styl b/source/css/layout/_partial/comments/gitalk.styl new file mode 100644 index 0000000..576550b --- /dev/null +++ b/source/css/layout/_partial/comments/gitalk.styl @@ -0,0 +1,455 @@ +/* variables */ +$gt-color-main := #6190e8 +$gt-color-sub := #a1a1a1 +$gt-color-loader := #999999 +$gt-color-error := #ff3860 +$gt-color-hr := #E9E9E9 +$gt-color-input-border := rgba(0,0,0,0.1) +$gt-color-input-bg := #f6f6f6 +$gt-color-comment-bg := #f9f9f9 +$gt-color-comment-adminbg := #f6f9fe +$gt-color-comment-txt := #333333 +$gt-color-link-active := #333333 +$gt-color-btn := #ffffff +$gt-color-popbg := #ffffff +$gt-size-base := 16px // default font-size +$gt-size-border-radius := 5px +$gt-breakpoint-mobile := 479px +$gt-mask-z-index := 9999 + +/* functions & mixins */ +clearfix() { + &:before, + &:after { + content: " "; + display: table; + } + &:after { clear: both; } +} +em($px, $base-size = $gt-size-base) + u = unit($px) + if (u is 'px') + unit($px / $base-size, 'em') + else + unit($px, u) + +mobile() + @media (max-width: $gt-breakpoint-mobile) + {block} + +/* variables - calculated */ +$gt-size-loader-dot := em(6px) +$gt-size-loader := em(28px) +$gt-size-avatar := em(50px) +$gt-size-avatar-mobi := em(32px) + +/* styles */ +// Put everything under container to avoid style conflicts +.comments-container + .gt-container + box-sizing: border-box + * + box-sizing: border-box + font-size: $gt-size-base + // common + a + color: $gt-color-main + &:hover + color: lighten($gt-color-main, 20%) + border-color: lighten($gt-color-main, 20%) + &.is--active + color: $gt-color-link-active + cursor: default !important + &:hover + color: $gt-color-link-active + .hide + display: none !important + // icons + .gt-svg + display: inline-block + width: em(16px) + height: em(16px) + vertical-align: sub + svg + width: 100% + height: 100% + fill: $gt-color-main + .gt-ico + display: inline-block + &-text + margin-left: em(5px) + &-github + width: 100% + height: 100% + .gt-svg + width: 100% + height: 100% + svg + fill: inherit + /* loader */ + .gt-spinner + position: relative + &::before + content: '' + box-sizing: border-box + position: absolute + top: 3px + width: em(12px) + height: em(12px) + margin-top: em(-3px) + margin-left: em(-6px) + border-radius: 50% + border: 1px solid $gt-color-btn + border-top-color: $gt-color-main + animation: gt-kf-rotate .6s linear infinite + + .gt-loader + position: relative + border: 1px solid $gt-color-loader + animation: ease gt-kf-rotate 1.5s infinite + display: inline-block + font-style: normal + width: $gt-size-loader + height: $gt-size-loader + //font-size: $gt-size-loader + line-height: $gt-size-loader + border-radius: 50% + &:before + content: '' + position: absolute + display: block + top: 0 + left: 50% + margin-top: -($gt-size-loader-dot / 2) + margin-left: -($gt-size-loader-dot / 2) + width: $gt-size-loader-dot + height: $gt-size-loader-dot + background-color: $gt-color-loader + border-radius: 50% + // avatar + .gt-avatar + display: inline-block + width: $gt-size-avatar + height: $gt-size-avatar + +mobile() + width: $gt-size-avatar-mobi + height: $gt-size-avatar-mobi + img + width: 100% + height: auto + border-radius: 3px + &-github + width: $gt-size-avatar - em(2px) + height: $gt-size-avatar - em(2px) + cursor: pointer + +mobile() + width: $gt-size-avatar-mobi - em(2px) + height: $gt-size-avatar-mobi - em(2px) + // button + .gt-btn + padding: em(12px) em(20px) + display: inline-block + line-height: 1 + text-decoration: none + white-space: nowrap + cursor: pointer + border: 1px solid $gt-color-main + border-radius: $gt-size-border-radius + background-color: $gt-color-main + color: $gt-color-btn + outline: none + font-size: em(12px) + &-text + font-weight: 400 + &-loading + position: relative + margin-left: em(8px) + display: inline-block + width: em(12px) + height: em(16px) + vertical-align: top + &.is--disable + cursor: not-allowed + opacity: 0.5 + &-login + margin-right: 0 + &-preview + background-color: $gt-color-btn + color: $gt-color-main + &:hover + background-color: darken($gt-color-btn, 5%) + border-color: lighten($gt-color-main, 20%) + &-public + &:hover + background-color: lighten($gt-color-main, 20%) + border-color: lighten($gt-color-main, 20%) + &-loadmore + // loadmore + + /* error */ + .gt-error + text-align: center + margin: em(10px) + color: $gt-color-error + + /* initing */ + .gt-initing + padding: em(20px) 0 + text-align: center + &-text + margin: em(10px) auto + font-size: 92% + + /* no int */ + .gt-no-init + padding: em(20px) 0 + text-align: center + + /* link */ + .gt-link + border-bottom: 1px dotted $gt-color-main + &-counts, &-project + text-decoration: none + + /* meta */ + .gt-meta + margin: em(20px) 0 + padding: em(16px) 0 + position: relative + border-bottom: 1px solid $gt-color-hr + font-size: em(16px) + z-index: 10 + clearfix() + + .gt-counts + margin: 0 em(10px) 0 0 + + .gt-user + float: right + margin: 0 + font-size: 92% + &-pic + width: 16px + height: 16px + vertical-align: top + margin-right: em(8px) + &-inner + display: inline-block + cursor: pointer + .gt-ico + margin: 0 0 0 em(5px) + svg + fill: inherit + .is--poping + .gt-ico + svg + fill: $gt-color-main + + .gt-version + color: $gt-color-sub + margin-left: em(6px) + + .gt-copyright + margin: 0 em(15px) em(8px) + border-top: 1px solid $gt-color-hr + padding-top: em(8px) + + /* popup */ + .gt-popup + position: absolute + right: 0 + top: em(38px) + background: $gt-color-popbg + display: inline-block + border: 1px solid $gt-color-hr + padding: em(10px) 0 + font-size: em(14px) + letter-spacing: .5px + .gt-action + cursor: pointer + display: block + margin: em(8px) 0 + padding: 0 em(18px) + position: relative + text-decoration: none + &.is--active + &:before + content: '' + width: em(4px) + height: em(4px) + background: $gt-color-main + position: absolute + left: em(8px) + top: em(7px) + /* header */ + .gt-header + position: relative + display: flex + &-comment + flex: 1 + margin-left: em(20px) + +mobile() + margin-left: em(14px) + &-textarea + padding: em(12px) + display: block + box-sizing: border-box + width: 100% + min-height: em(82px) + max-height: em(240px) + border-radius: $gt-size-border-radius + border: 1px solid $gt-color-input-border + font-size: em(14px) + word-wrap: break-word + resize: vertical + background-color: $gt-color-input-bg + outline: none + transition: all 0.25s ease + &:hover + background-color: lighten($gt-color-input-bg, 50%) + &-preview + padding: em(12px) + border-radius: $gt-size-border-radius + border: 1px solid $gt-color-input-border + background-color: $gt-color-input-bg + &-controls + position: relative + margin: em(12px) 0 0 + clearfix() + +mobile() + margin: 0 + &-tip + font-size: em(14px) + color: $gt-color-main + text-decoration: none + vertical-align: sub + +mobile() + display: none + .gt-btn + float: right + margin-left: em(20px) + +mobile() + float: none + width: 100% + margin: em(12px) 0 0 + + &:after + content: '' + position: fixed + bottom: 100% + left: 0 + right: 0 + top: 0 + opacity: 0 + &.gt-input-focused + position: relative + &:after + content: '' + position: fixed + bottom: 0 + left: 0 + right: 0 + top: 0 + background: #000 + opacity: 0.6 + transition: opacity .3s, bottom 0s + z-index: $gt-mask-z-index + .gt-header-comment + z-index: $gt-mask-z-index + 1 + + /* comments */ + .gt-comments + padding-top: em(20px) + &-null + text-align: center + &-controls + margin: em(20px) 0 + text-align: center + + /* comment */ + .gt-comment + position: relative + padding: em(10px) 0 + display: flex + &-content + flex: 1 + margin-left: em(20px) + padding: em(12px) em(16px) + background-color: $gt-color-comment-bg + overflow: auto + transition: all ease 0.25s + //&:hover + // box-shadow: 0 em(10px) em(60px) 0 darken($gt-color-comment-bg, 2%) + +mobile() + margin-left: em(14px) + padding: em(10px) em(12px) + &-header + margin-bottom: em(8px) + font-size: em(14px) + position: relative + &-block-1 + float: right + height: em(22px) + width: em(32px) + &-block-2 + float: right + height: em(22px) + width: em(64px) + &-username + font-weight: 500 + color: $gt-color-main + text-decoration: none + &:hover + text-decoration: underline + &-text + margin-left: em(8px) + color: $gt-color-sub + &-date + margin-left: em(8px) + color: $gt-color-sub + &-like, &-edit, &-reply + position: absolute + height: em(22px) + &:hover + cursor: pointer + &-like + top: 0 + right: em(32px) + &-edit, &-reply + top: 0 + right: 0 + &-body + color: $gt-color-comment-txt !important + .email-hidden-toggle a + display: inline-block; + height: 12px; + padding: 0 9px; + font-size: 12px; + font-weight: 600; + line-height: 6px; + color: #444d56; + text-decoration: none; + vertical-align: middle; + background: #dfe2e5; + border-radius: 1px; + &:hover + background-color: #c6cbd1; + .email-hidden-reply + display: none; + white-space: pre-wrap + .email-signature-reply + padding: 0 15px; + margin: 15px 0; + color: #586069; + border-left: 4px solid #dfe2e5; + .email-hidden-reply.expanded + display: block + &-admin + .gt-comment-content + background-color: $gt-color-comment-adminbg + + @keyframes gt-kf-rotate + 0% + transform: rotate(0) + 100% + transform: rotate(360deg) \ No newline at end of file diff --git a/source/css/layout/_partial/valine.styl b/source/css/layout/_partial/comments/valine.styl similarity index 97% rename from source/css/layout/_partial/valine.styl rename to source/css/layout/_partial/comments/valine.styl index 1605b0c..4266d99 100644 --- a/source/css/layout/_partial/valine.styl +++ b/source/css/layout/_partial/comments/valine.styl @@ -1,4 +1,4 @@ -@require '../common/variables.styl' +@require '../../common/variables.styl' .valine-container { #vcomments { diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 47ed406..98dae2f 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -25,7 +25,7 @@ $z-index-6 = 1006; // color // =============================== // normal mode color -$primary-color = #0b6ff0; // 主题颜色 +$primary-color = #f04c12; // 主题颜色 $background-color = #fdfdfd; // 背景颜色 $normal-text-color = #44424e; // 通用文本颜色（默认字体颜色） $first-text-color = darken($normal-text-color, 15%); // 第一文本颜色 diff --git a/source/css/style.styl b/source/css/style.styl index 8488516..7393070 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -3,7 +3,8 @@ @import "layout/common/basic.styl" @import "layout/page.styl" @import "layout/_partial/local-search.styl" -@import "layout/_partial/valine.styl" +@import "layout/_partial/comments/valine.styl" +@import "layout/_partial/comments/gitalk.styl" @import "layout/_partial/header.styl" @import "layout/_partial/tools.styl" @import "layout/_partial/footer.styl"