今日诗词:一个可以随机返回一句古诗词名句的接口,可用来做 Valine 的 placeholder 显示内容

1
2
3
4
5
6
7
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
jinrishici.load(function(result) {
var jrsc_plac = result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author
document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
});
</script>

Valine 懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
loadComments();
function loadComments() {
if (typeof Valine === 'undefined') {
var getScript = (options) => {
var script = document.createElement('script');
script.defer = true;
script.crossOrigin = 'anonymous';
Object.keys(options).forEach((key) => {
script[key] = options[key];
});
document.body.appendChild(script);
};
getScript({
src: 'https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js',
onload: () => {
newValine();
}
});
} else {
newValine();
}
}
function newValine() {
new Valine({
//原配置
});
}
</script>

文章列表显示评论数和阅读数

评论数

1
<span class="valine-comment-count" data-xid="pathname"></span>

自动查找网页中class值为 valine-comment-count 的元素并自动填充查询结果,如果文章完整网址是 https://qzkyl.ml/valine-show-comment-views ,pathname则是 /valine-show-comment-views。

阅读数
直接套用手册:https://valine.js.org/visitor.html

评论框美化css:

1
2
3
4
.v .vwrap{padding: 0 0 44px;}.v .veditor{min-height:7rem;resize:none;}.v .vwrap .vedit{padding-top:0}.v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #f7f7f7;}.v .vinput{padding:10px 15px;}.v .vwrap .vheader .vinput{border-bottom:0px}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}.v .vwrap .vcontrol{    position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}.v .vwrap .vcontrol .col.col-80{width: 100%;}.v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#1abc9c;}.v .vwrap .vedit .vctrl span.vpreview-btn,.v .vwrap .vcontrol .col.col-20,.v .vlist .vcard .vhead .vsys{display:none;}
@media screen and (max-width: 520px){
.v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}
}