与世界分享世界

饮夏


  • 首页
  • 归档
  • 分类
  • 标签
  • 关于
  •    

© 2025 饮夏

给未适配Valine的主题添加Valine评论功能

发布于 2020-06-19 blog  blog插件 

v2-cc1e57e54d4e657042e6d5c310cbf41f_r.jpg

其实原先主题自带了两种评论方式为博客设置评论服务:Disqus 与LiveRe 。

但是由于两个提供商都处于海外,访问速度较慢,而且太丑。于是选择Valine 作为本博客的评论工具。

此篇记录在添加Valine的过程中遇到的问题,方便以后查阅。

Valine

获取APP ID和APP Key

这部分官网说明文档 说明很细致,直接跟着做就ok。

官网说明文档:

之后将获取到的app_id与app_key填入HTML中:

<head>
    ..
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    ...
</head>
<body>
    ...
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: 'Your appId',
            appKey: 'Your appKey'
        })
    </script>
</body>

这样子网页中就出现了评论。但是真正使用中基本不会用到这种添加方式,不可能一个一个页面的添加评论栏。

在hexo中配置Valine

许多hexo主题原生适配了Valine,Valine 官网里也给出了部分主题的下载方式,如果你使用的主题恰好在其中,就可以通过修改theme文件夹下的_config.yml,填入上面获取的app_id与app_key简单两步添加Valine。

我使用的是Makito 制作的Typography ,恰巧原生不支持Valine。

起初打算将其他主题的配置文件直接copy进现在这个主题的配置文件里,但是仔细观察之后发现并不行。因为其他的主题大多是基于ejs编写,而当前主题是基于jade的。所以只能自己添加,但是仔细看了看文档发现也并不是很复杂。不过Valine的文档写得差是真的,和我有得一比

在末尾加上下面代码:

if theme.valine
    if theme.valine.appid&&theme.valine.appkey
        section(id="vcomments",class="comments")
            style='.comments"margin:30px;padding:10px;background:#fff"@@media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}'
                    key:post.slug
                    title:post.title
            script(src="//cdn1.lncld.net/static/js/3.0.4/av-min.js")
            script(src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js")
            script.
                new Valine({
                    el: "#vcomments",
                    app_id: '#{theme.valine.appid}',
                    app_key: '#{theme.valine.appkey}',
                    path: window.location.pathname,
                    avatar: '#{theme.valine.avatar}' ,
                    placeholder:'#{theme.valine.placeholder}' ,
                    recordIP: true,
                })

顺便吐槽,jade这种格式太反html直觉了。

接着修改theme文件的_config.yml,一样在喜欢的位置加上以下代码:

valine:
  appid: '此处填入刚刚get的appid'
  appkey: '此处填入刚刚get的appkey'
  verfify: false #验证码
  notify: false #评论回复提醒
  avatar: robohash #头像默认格式
  placeholder: 与我交流世界~ #评论框预留文字

更多配置可以查阅Valine配置项

至此评论功能就已经基本完成了。最后需要在leancloud ,也就是刚刚获取app id的网站上将你的域名添加入安全组。

将域名添加入安全组

此外如果想要删除评论也在这个网站上操作。

接下来

hexo g
hexo s

试试吧。

peace yo~

分享到 

 上一篇: 不用命令行给自己搭一个图床吧 下一篇: markdown笔记 

© 2025 饮夏