add valine comment
This commit is contained in:
xaoxuu
parent
0835ab6716
commit
8f414e1fc4
32
_config.yml
32
_config.yml
|
|
@ -67,7 +67,7 @@ article:
|
||||||
|
|
||||||
######## Comments ########
|
######## Comments ########
|
||||||
comments:
|
comments:
|
||||||
service: utterances # utterances
|
service: # utterances, valine
|
||||||
# utterances
|
# utterances
|
||||||
# https://utteranc.es/
|
# https://utteranc.es/
|
||||||
utterances:
|
utterances:
|
||||||
|
|
@ -77,19 +77,33 @@ comments:
|
||||||
theme:
|
theme:
|
||||||
light: github-light
|
light: github-light
|
||||||
dark: github-dark
|
dark: github-dark
|
||||||
|
valine:
|
||||||
|
js: https://cdn.jsdelivr.net/npm/valine@1.4/dist/Valine.min.js
|
||||||
|
appId: # your appId
|
||||||
|
appKey: # your appKey
|
||||||
|
placeholder:
|
||||||
|
meta: [nick,mail,link] # valine comment header info
|
||||||
|
requiredFields: [nick,mail]
|
||||||
|
enableQQ: true # Unstable avatar link
|
||||||
|
recordIP: false # Record commenter IP
|
||||||
|
avatar: robohash # gravatar style https://valine.js.org/avatar
|
||||||
|
pageSize: 10 # comment list page size
|
||||||
|
lang: zh-cn
|
||||||
|
highlight: true
|
||||||
|
mathJax: false
|
||||||
|
|
||||||
|
|
||||||
######## Footer ########
|
######## Footer ########
|
||||||
footer:
|
footer:
|
||||||
social:
|
social:
|
||||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
|
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
|
||||||
url: /atom.xml
|
# url: /atom.xml
|
||||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
|
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
|
||||||
url: /
|
# url: /
|
||||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
|
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
|
||||||
url: /
|
# url: /
|
||||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
|
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
|
||||||
url: /
|
# url: /
|
||||||
license: '[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)'
|
license: '[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)'
|
||||||
source: #'[GitHub](https://github.com/xaoxuu/hexo-theme-stellar)'
|
source: #'[GitHub](https://github.com/xaoxuu/hexo-theme-stellar)'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<%
|
||||||
|
function layoutDiv() {
|
||||||
|
var el = '';
|
||||||
|
el += '<div id="valine_container" class="valine_thread"';
|
||||||
|
let cfg = {};
|
||||||
|
if (page.comment_id) {
|
||||||
|
cfg['comment_id'] = page.comment_id;
|
||||||
|
}
|
||||||
|
for (let key of Object.keys(cfg)) {
|
||||||
|
if (cfg[key]) {
|
||||||
|
el += ' ' + key + '="' + cfg[key] + '"';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
el += '><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg></div>';
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
|
||||||
|
<%- layoutDiv() %>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<%- js(theme.comments.valine.js) %>
|
||||||
|
<script>
|
||||||
|
function emoji(path, idx, ext) {
|
||||||
|
return path + "/" + path + "-" + idx + "." + ext;
|
||||||
|
}
|
||||||
|
var emojiMaps = {};
|
||||||
|
for (var i = 1; i <= 54; i++) {
|
||||||
|
emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
|
||||||
|
}
|
||||||
|
for (var i = 1; i <= 101; i++) {
|
||||||
|
emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
|
||||||
|
}
|
||||||
|
for (var i = 1; i <= 116; i++) {
|
||||||
|
emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
|
||||||
|
}
|
||||||
|
for (var i = 1; i <= 125; i++) {
|
||||||
|
emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
|
||||||
|
}
|
||||||
|
for (var i = 1; i <= 4; i++) {
|
||||||
|
emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
|
||||||
|
}
|
||||||
|
function load_comment(){
|
||||||
|
if(!document.getElementById("valine_container"))return;
|
||||||
|
const el = document.getElementById("valine_container");
|
||||||
|
var path = el.getAttribute('comment_id');
|
||||||
|
const placeholder = "<%= theme.comments.valine.placeholder %>";
|
||||||
|
if (!path) {
|
||||||
|
path = decodeURI(window.location.pathname);
|
||||||
|
}
|
||||||
|
var valine = new Valine();
|
||||||
|
valine.init(Object.assign(<%- JSON.stringify(theme.comments.valine) %>, {
|
||||||
|
el: '#valine_container',
|
||||||
|
path: path,
|
||||||
|
placeholder: placeholder,
|
||||||
|
emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
|
||||||
|
emojiMaps: emojiMaps,
|
||||||
|
}));
|
||||||
|
|
||||||
|
}
|
||||||
|
load_comment();
|
||||||
|
</script>
|
||||||
|
|
@ -17,6 +17,7 @@ hexo.extend.tag.register('about', function(args, content) {
|
||||||
el += '<div class="tag-plugin about">';
|
el += '<div class="tag-plugin about">';
|
||||||
el += '<div class="about-header">';
|
el += '<div class="about-header">';
|
||||||
// avatar
|
// avatar
|
||||||
|
if (args.avatar) {
|
||||||
el += '<div class="avatar">'
|
el += '<div class="avatar">'
|
||||||
el += '<img src="' + args.avatar + '"';
|
el += '<img src="' + args.avatar + '"';
|
||||||
if (args.height && args.height.length > 0) {
|
if (args.height && args.height.length > 0) {
|
||||||
|
|
@ -25,6 +26,7 @@ hexo.extend.tag.register('about', function(args, content) {
|
||||||
el += '/>';
|
el += '/>';
|
||||||
}
|
}
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
|
}
|
||||||
// title
|
// title
|
||||||
if (rows.length > 0) {
|
if (rows.length > 0) {
|
||||||
// el += '<div class="title">';
|
// el += '<div class="title">';
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
input
|
|
||||||
display: block
|
|
||||||
|
|
||||||
input
|
input
|
||||||
background: none
|
background: none
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
input.copy-area
|
input.copy-area
|
||||||
|
display: block
|
||||||
font-family: $ff-code
|
font-family: $ff-code
|
||||||
font-size: $fs-12
|
font-size: $fs-12
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,8 @@ article.md.excerpt
|
||||||
article.md.content
|
article.md.content
|
||||||
position: relative
|
position: relative
|
||||||
margin-bottom: 2rem
|
margin-bottom: 2rem
|
||||||
|
>:first-child
|
||||||
|
margin-top: 0
|
||||||
h1.article-title
|
h1.article-title
|
||||||
margin-top: 0.5rem
|
margin-top: 0.5rem
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
// 面包屑导航
|
// 面包屑导航
|
||||||
.bread-nav
|
.bread-nav
|
||||||
padding: 1rem 1rem 0
|
padding: 1rem 1rem 0
|
||||||
margin-top: 1rem
|
|
||||||
color: var(--text-p3)
|
color: var(--text-p3)
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
div#breadcrumb
|
div#breadcrumb
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
.cmt-body.valine
|
||||||
|
margin-top: 1rem
|
||||||
|
#valine_container
|
||||||
|
line-height: 1.5 !important
|
||||||
|
img
|
||||||
|
display: inline
|
||||||
|
.vwrap
|
||||||
|
background: var(--card)
|
||||||
|
border-radius: $border-block
|
||||||
|
border-style: dashed
|
||||||
|
border: 1px dashed var(--text-meta)
|
||||||
|
&:hover
|
||||||
|
border-color: $color-theme
|
||||||
|
.vheader
|
||||||
|
border-color: $color-theme
|
||||||
|
.cancel-reply
|
||||||
|
margin-top: 0
|
||||||
|
margin-bottom: 0
|
||||||
|
.vheader
|
||||||
|
margin: -10px
|
||||||
|
padding: 5px 10px 0
|
||||||
|
background: var(--site-bg)
|
||||||
|
border-bottom: 1px dashed var(--text-meta)
|
||||||
|
.vinput
|
||||||
|
border: none
|
||||||
|
.vedit
|
||||||
|
.vicon
|
||||||
|
height: 22px
|
||||||
|
.vemojis,.vpreview
|
||||||
|
background: var(--block)
|
||||||
|
border-radius: 4px
|
||||||
|
padding: 0.5rem
|
||||||
|
scrollbar(0, 0)
|
||||||
|
.vemoji
|
||||||
|
max-height: 22px
|
||||||
|
max-width: 100px
|
||||||
|
i
|
||||||
|
width: auto
|
||||||
|
padding: 8px
|
||||||
|
border-radius: 4px
|
||||||
|
trans2: box-shadow background
|
||||||
|
&:hover
|
||||||
|
background: linear-gradient(145deg, #eee, #fff)
|
||||||
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
||||||
|
&:active
|
||||||
|
background: linear-gradient(145deg, #eee, #fff)
|
||||||
|
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
|
||||||
|
.vedit
|
||||||
|
.vctrl span
|
||||||
|
padding: 0
|
||||||
|
margin: 10px
|
||||||
|
span
|
||||||
|
fill: var(--text-p1)
|
||||||
|
&.actived
|
||||||
|
fill: $color-theme
|
||||||
|
.vcount
|
||||||
|
color: var(--text-p1)
|
||||||
|
font-size: $fs-13
|
||||||
|
padding: 0
|
||||||
|
font-weight: inherit
|
||||||
|
.vnum
|
||||||
|
color: var(--text-p1)
|
||||||
|
font-size: $fs-h2
|
||||||
|
font-weight: 700
|
||||||
|
|
||||||
|
button
|
||||||
|
border: none
|
||||||
|
padding: 4px 2rem
|
||||||
|
border-radius: 4px
|
||||||
|
background: var(--block)
|
||||||
|
color: var(--text-p1)
|
||||||
|
line-height: 2
|
||||||
|
font-size: 14px
|
||||||
|
font-weight: 500
|
||||||
|
trans()
|
||||||
|
&:hover
|
||||||
|
background: var(--block-hover)
|
||||||
|
&.vmore
|
||||||
|
width: 100%
|
||||||
|
padding: 8px 2rem
|
||||||
|
.vcards
|
||||||
|
margin-top: 0.5rem
|
||||||
|
>.vcard
|
||||||
|
border-radius: $border-block
|
||||||
|
background: var(--card)
|
||||||
|
border: 1px dashed var(--block-border)
|
||||||
|
padding: 1rem
|
||||||
|
margin-bottom: 1rem
|
||||||
|
.vh
|
||||||
|
border-bottom: none
|
||||||
|
.vquote
|
||||||
|
border-left: none
|
||||||
|
.vimg
|
||||||
|
border: 1px solid white
|
||||||
|
padding: 0
|
||||||
|
background: var(--block)
|
||||||
|
.vhead
|
||||||
|
span
|
||||||
|
&.vnick
|
||||||
|
color: var(--text-p3)
|
||||||
|
cursor: default
|
||||||
|
a
|
||||||
|
&.vnick
|
||||||
|
color: #ff9800
|
||||||
|
font-weight: 700
|
||||||
|
&:hover
|
||||||
|
color: $color-hover
|
||||||
|
.vsys
|
||||||
|
margin: 2px
|
||||||
|
padding: 1px 8px
|
||||||
|
background-color: var(--block)
|
||||||
|
display: none
|
||||||
|
.vmeta
|
||||||
|
.vat
|
||||||
|
font-weight: bold
|
||||||
|
color: var(--text-p1)
|
||||||
|
float: none
|
||||||
|
trans()
|
||||||
|
padding: 4px 8px
|
||||||
|
border-radius: 2px
|
||||||
|
&:hover
|
||||||
|
color: $color-hover
|
||||||
|
background-color: var(--block)
|
||||||
|
|
||||||
|
.vcontent
|
||||||
|
padding-top: 0
|
||||||
|
blockquote
|
||||||
|
padding-top: 1rem
|
||||||
|
padding-bottom: 1rem
|
||||||
|
background: var(--block)
|
||||||
|
border-left: 3px solid $color-theme
|
||||||
|
code
|
||||||
|
color: var(--text-p1)
|
||||||
|
pre
|
||||||
|
background: var(--color-codeblock)
|
||||||
|
code
|
||||||
|
border: none
|
||||||
|
a
|
||||||
|
color: $color-link
|
||||||
|
line-height: inherit
|
||||||
|
trans()
|
||||||
|
&:hover
|
||||||
|
color: $color-hover
|
||||||
|
text-decoration: underline
|
||||||
|
p
|
||||||
|
color: var(--text-p1)
|
||||||
|
line-height: inherit
|
||||||
|
.vemoji
|
||||||
|
max-height: 24px
|
||||||
|
border-radius: 0
|
||||||
|
margin-top: -10px
|
||||||
|
max-width: 100px
|
||||||
|
.vempty
|
||||||
|
color: var(--color-meta)
|
||||||
|
.vpower
|
||||||
|
&,a
|
||||||
|
font-size: $fs-12
|
||||||
|
a
|
||||||
|
color: var(--text-p1)
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
color: $color-hover
|
||||||
|
.vinput
|
||||||
|
color: var(--text-p1)
|
||||||
|
p
|
||||||
|
color: var(--text-p1)
|
||||||
|
|
@ -9,3 +9,5 @@ if hexo-config('plugins.scrollreveal.enable')
|
||||||
// 评论
|
// 评论
|
||||||
if hexo-config('comments.service') == 'utterances'
|
if hexo-config('comments.service') == 'utterances'
|
||||||
@import 'comments/utterances'
|
@import 'comments/utterances'
|
||||||
|
if hexo-config('comments.service') == 'valine'
|
||||||
|
@import 'comments/valine'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue