Add: valine 评论系统,优化 article-post 页面样式

This commit is contained in:
XPoet 2020-03-19 14:51:48 +08:00
parent 9df3584fec
commit 00b471ed4a
7 changed files with 63 additions and 46 deletions

View File

@ -14,3 +14,14 @@ avatar: images/favicon.png
# normal | night | night eighties | night blue | night bright # normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme # https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal highlight_theme: normal
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://github.com/xCss/Valine
valine:
enable: true
appid: ih2nzG3ilVNdLgJK4kBXTjOq-gzGzoHsz # your leancloud application appid
appkey: gdf6tXXLBTLg9qpjS2y6Tbw7 # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 评论一下再走吧~

View File

@ -4,10 +4,7 @@
<div class="post-title"> <div class="post-title">
<h3><a><%= page.title %></a></h3> <h3><a><%= page.title %></a></h3>
</div> </div>
<div class="post-content"> <div class="post-meta-info">
<%- page.content %>
</div>
<div class="post-footer">
<div class="meta"> <div class="meta">
<div class="info"> <div class="info">
<span> <span>
@ -28,6 +25,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="post-content">
<%- page.content %>
</div>
<div class="comment-container"> <div class="comment-container">
<%- partial('valine') %> <%- partial('valine') %>
</div> </div>

View File

@ -11,7 +11,8 @@
</div> </div>
<div class="article-post-content"> <div class="article-post-content">
<%- post.content %> <!-- truncate() 移除超过 length 长度的字符串。length 的默认值是 30。 -->
<%- truncate(strip_html(post.content), {length: 80}) %>
</div> </div>
<div class="article-post-meta"> <div class="article-post-meta">

View File

@ -1,12 +1,14 @@
<% if(theme.valine.enable && theme.valine.appid && theme.valine.appkey) { %>
<script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script> <script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
<div id="valine"></div> <div id="valine"></div>
<script> <script>
new Valine({ new Valine({
el: '#valine', el: '#valine',
appId: 'XXX', appId: '<%= theme.valine.appid %>',
appKey: 'XXX', appKey: '<%= theme.valine.appkey %>',
notify: true, notify: '<%= theme.valine.notify %>',
verify: false, verify: '<%= theme.valine.verify %>',
placeholder: '评论一下再走吧' placeholder: '<%= theme.valine.placeholder %>'
}) })
</script> </script>
<% } %>

View File

@ -43,34 +43,9 @@
} }
} }
.post-content { .post-meta-info {
a {
text-decoration: none;
letter-spacing: 1px;
color: #4786D6;
}
a:hover {
color: #2F69B3;
}
h3 {
color: #5F5F5F;
font-size: 22px;
font-weight: 600;
}
h4 {
color: #5F5F5F;
font-size: 16px;
}
}
.post-footer {
padding: 0 0 30px 0;
border-bottom: 1px solid #f2f2f2;
margin-top: 20px;
.meta { .meta {
max-width: 100%; max-width: 100%;
@ -133,4 +108,31 @@
} }
.post-content {
padding-bottom 10px
a {
text-decoration: none;
letter-spacing: 1px;
color: #4786D6;
}
a:hover {
color: #2F69B3;
}
h3 {
color: #5F5F5F;
font-size: 22px;
font-weight: 600;
}
h4 {
color: #5F5F5F;
font-size: 16px;
}
}
} }

View File

@ -52,6 +52,7 @@
.article-post-content { .article-post-content {
padding 15px 0
a { a {
text-decoration: none; text-decoration: none;
letter-spacing: 1px; letter-spacing: 1px;

View File

@ -6,7 +6,7 @@
padding 2px padding 2px
border-radius 50% border-radius 50%
border 1px solid #ddd border 1px solid #ddd
width: 40%; width: 150px;
} }