Hexo博客 | 如何让你的valine更好看

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

这篇文章介绍valine的样式优化

Valine介绍

Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

Valine版本

这篇文章基于 Valine 1.4.14介绍

Valine添加一言

效果如图：

修改方法：

找到博客对应添加valine的位置，例如Ayer主题的位于hexothemesayerlayout_partialpostvaline.ejs
在内部添加一段代码：

代码语言：javascript复制

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

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 （请求获得一个来自网络的句子，并以纯文本格式输出）

返回的格式说明

返回参数名称	描述
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

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

代码语言：javascript复制

<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自定义表情

首先，你需要很多表情包可以在GitHub上fork一些表情包仓库，然后使用Jsdelivr CDN调用例如：我Fork的https://github.com/blogimg/emotion
在Valine配置里面,添加emojiCDN和emojiMaps参数

代码语言：javascript复制

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"
        // ... 更多表情
    } 
})

效果如图：

valine背景

效果如图

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

代码语言：javascript复制

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

https 网络安全 http 分布式 cdn

0 人点赞