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:
|
||||
service: utterances # utterances
|
||||
service: # utterances, valine
|
||||
# utterances
|
||||
# https://utteranc.es/
|
||||
utterances:
|
||||
|
|
@ -77,19 +77,33 @@ comments:
|
|||
theme:
|
||||
light: github-light
|
||||
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:
|
||||
social:
|
||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
|
||||
url: /atom.xml
|
||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
|
||||
url: /
|
||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
|
||||
url: /
|
||||
- icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
|
||||
url: /
|
||||
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/25678f144c438.svg"/>'
|
||||
# url: /atom.xml
|
||||
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/08a41b181ce68.svg"/>'
|
||||
# url: /
|
||||
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/cf1ae151f9e83.svg"/>'
|
||||
# url: /
|
||||
# - icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
|
||||
# url: /
|
||||
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)'
|
||||
|
||||
|
|
|
|||
|
|
@ -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,14 +17,16 @@ hexo.extend.tag.register('about', function(args, content) {
|
|||
el += '<div class="tag-plugin about">';
|
||||
el += '<div class="about-header">';
|
||||
// avatar
|
||||
el += '<div class="avatar">'
|
||||
el += '<img src="' + args.avatar + '"';
|
||||
if (args.height && args.height.length > 0) {
|
||||
el += ' height="' + args.height + '"/>';
|
||||
} else {
|
||||
el += '/>';
|
||||
if (args.avatar) {
|
||||
el += '<div class="avatar">'
|
||||
el += '<img src="' + args.avatar + '"';
|
||||
if (args.height && args.height.length > 0) {
|
||||
el += ' height="' + args.height + '"/>';
|
||||
} else {
|
||||
el += '/>';
|
||||
}
|
||||
el += '</div>';
|
||||
}
|
||||
el += '</div>';
|
||||
// title
|
||||
if (rows.length > 0) {
|
||||
// el += '<div class="title">';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
input
|
||||
display: block
|
||||
|
||||
input
|
||||
background: none
|
||||
border: none
|
||||
|
||||
input.copy-area
|
||||
display: block
|
||||
font-family: $ff-code
|
||||
font-size: $fs-12
|
||||
font-weight: 700
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ article.md.excerpt
|
|||
article.md.content
|
||||
position: relative
|
||||
margin-bottom: 2rem
|
||||
>:first-child
|
||||
margin-top: 0
|
||||
h1.article-title
|
||||
margin-top: 0.5rem
|
||||
line-height: 1.2
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// 面包屑导航
|
||||
.bread-nav
|
||||
padding: 1rem 1rem 0
|
||||
margin-top: 1rem
|
||||
color: var(--text-p3)
|
||||
font-weight: 500
|
||||
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'
|
||||
@import 'comments/utterances'
|
||||
if hexo-config('comments.service') == 'valine'
|
||||
@import 'comments/valine'
|
||||
|
|
|
|||
Loading…
Reference in New Issue