Hexo博客主题美化之valine

文章目录

• Valine介绍
• Valine版本
• Valine添加一言
• valine添加每日诗句
• valine自定义表情
• valine背景

之前写了一个博客中能用到的代码（二）,这是第三篇
这篇文章介绍

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. 在内部添加一段代码：

<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

   （请求获得一个分类是漫画的句子）

可选择多个分类，例如：

?c=a&c=c

（3）

https://v1.hitokoto.cn/?c=f&encode=text

1. 返回的格式说明

https://hitokoto.cn?uuid=[uuid]

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

valine添加每日诗句

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

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

<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参数

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. 添加方法,一样的添加代码即可

<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>