feat: add comment plugin Gitalk
This commit is contained in:
XPoet
parent
c186ac22ac
commit
744b1ac050
10
_config.yml
10
_config.yml
|
|
@ -31,6 +31,16 @@ comments:
|
|||
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/
|
||||
busuanzi_count:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="comments-container">
|
||||
<% 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') %>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
@ -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
|
||||
) { %>
|
||||
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
|
||||
<div id="gitalk-container"></div>
|
||||
<script>
|
||||
const gitalk = new Gitalk({
|
||||
clientID: '<%= theme.comments.gitalk.client_id %>',
|
||||
clientSecret: '<%= theme.comments.gitalk.client_secret %>',
|
||||
repo: '<%= theme.comments.gitalk.repository %>',
|
||||
owner: '<%= theme.comments.gitalk.github_id %>',
|
||||
admin: ['<%= theme.comments.gitalk.github_id %>'],
|
||||
id: location.pathname,
|
||||
distractionFreeMode: Boolean('<%= theme.comments.gitalk.distraction_free_mode %>'),
|
||||
language: '<%= config.language %>'
|
||||
})
|
||||
gitalk.render('gitalk-container')
|
||||
</script>
|
||||
<% } %>
|
||||
|
|
@ -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
|
||||
) { %>
|
||||
<div class="valine-container">
|
||||
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
|
||||
<div id="vcomments"></div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
<div class="about-comments">
|
||||
<% if (page.comments) { %>
|
||||
<%- partial('_partial/valine') %>
|
||||
<%- partial('_partial/comments/comment') %>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@
|
|||
</div>
|
||||
|
||||
<div class="comment-container">
|
||||
<%- partial('_partial/valine') %>
|
||||
<%- partial('_partial/comments/comment') %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@require '../common/variables.styl'
|
||||
@require '../../common/variables.styl'
|
||||
.valine-container {
|
||||
|
||||
#vcomments {
|
||||
|
|
@ -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%); // 第一文本颜色
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue