今日诗词：一个可以随机返回一句古诗词名句的接口，可用来做 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://gcore.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;}
}