之前写了一个博客中能用到的代码(二),这是第三篇
这篇文章介绍valine的样式优化

Valine介绍

Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

Valine版本

这篇文章基于 Valine 1.4.14介绍

Valine添加一言

效果如图:

修改方法:

  1. 找到博客对应添加valine的位置,例如Ayer主题的位于hexo\themes\ayer\layout\_partial\post\valine.ejs
  2. 在内部添加一段代码:
1
2
3
4
5
6
7
8
<script type="text/javascript">
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
})
.catch(console.error)
</script>
  1. Api接口说明:
    (1)https://v1.hitokoto.cn/ (从7种分类中随机抽取)
    (2)https://v1.hitokoto.cn/?c=b (请求获得一个分类是漫画的句子)
参数说明
a动画
b漫画
c游戏
d文学
e原创
f来自网络
g其他
h影视
i诗词
j网易云
k哲学
l抖机灵
其他作为动画类型处理

可选择多个分类,例如: ?c=a&c=c

(3)https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)

  1. 返回的格式说明
返回参数名称描述
id一言标识
hitokoto一言正文。编码方式 unicode。使用 utf-8。
type类型
from一言的出处
from_who一言的作者
creator添加者
creator_uid添加者用户标识
reviewer审核员标识
uuid一言唯一标识;可以链接到 https://hitokoto.cn?uuid=[uuid] 查看这个一言的完整信息
commit_from提交方式
created_at添加时间
length句子长度

例如:返回的data,通过data.hitokoto获取句子正文

valine添加每日诗句

参考https://cungudafa.top/post/8202.html

添加方法和效果上面差不多,加进去就行了

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. 首先,你需要很多表情包
    可以在GitHub上fork一些表情包仓库,然后使用Jsdelivr CDN调用
    例如:我Fork的https://github.com/blogimg/emotion

  2. 在Valine配置里面,添加emojiCDN和emojiMaps参数

1
2
3
4
5
6
7
8
9
10
11
12
13
new Valine({
el:'#vcomment',
appId:'<Your_APP_ID>',
appKey:'<Your_APP_KEY>',

// 这里设置CDN, 默认微博表情CDN
emojiCDN: 'https://cdn.jsdelivr.net/gh/XXXXXX/emotion/',
// 表情title和图片映射
emojiMaps: {
"黑人问号":"bilibili/tv_黑人问号.png","鼓掌":"bilibili/tv_鼓掌.png"
// ... 更多表情
}
})
  1. 效果如图:

valine背景

  1. 效果如图

  2. 添加方法,一样的添加代码即可

1
2
3
4
5
6
7
8
<style>
.v[data-class=v] .veditor {
background-image: url(https://cdn.jsdelivr.net/gh/xxxxxx/xxxx/xxxx.xxx);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
</style>