hexo的yelee主题配置valine和来比力评论功能

前言

之前多说倒闭了,不能用了,搞了个友言,友言又关了,然后又去弄了个畅言,弄成功了之后,一顿窃喜,但是前提是需要网站备案💔,很是无奈,最后发现valine来比力比较好用也没有广告。

valine评论

1. 首先注册LeanCloud账号并拿到APP ID和APP Key;

(1) 注册账号之后,创建一个应用
(2) 创建应用之后,点击应用的右上角设置图标,然后点击应用Key,如下图所示,获取APP ID和APP Key

获取id和key

2. 在/yelee/_config.yml中加入

1
2
3
4
5
6
valine:
on: true
appid: ***** # App ID
appkey: ***** # App Key
avatar: mp # 匿名者头像选项
placeholder: 来啊,快活啊

在最下面的CDN中加入

1
valine: //unpkg.com/valine@1.2.0-beta1/dist/Valine.min.js

3. 在/yelee/layout/_partial/article.ejs中加入

1
2
3
4
5
6
<% } else if (theme.valine.on){ %>
<%- partial('comments/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>

4. 创建/yelee/layout/_partial/comments/valine.ejs文件,写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section id="comments" style="margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)">
<div id="vcomment" class="comment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="<%- theme.CDN.valine %>"></script>
<script>
new Valine({
el: '#vcomment',
notify: false,
verify: false,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>"
});
</script>
</section>

5. 在/yelee/source/css/_partial/mobile.styl最后加入:

1
2
3
4
#comments {
margin: (10/16)rem 10px !important;
padding: 1rem !important;
}

最后大功告成

valine额外扩展

来比力评论

1. 注册来必力账号,注册成功之后,点击右上角的头像,进入管理页面

进入管理页面

2. 然后点击左侧代码管理,会看到一串代码,代码第一行有个data-id,这个就是你的来必力id号

必力id号

3. 主题站点添加 uid

打开theme/yelee/_config.yml,添加配置信息。
1
2
3
livere:
on: true
livere_uid: Your uid // 在这里填写你的id

4. 创建评论 ejs 文件

themes/yelee/layout/_partial/comments文件夹下创建livere.ejs文件,拷贝下面的代码。

注意:将data-uid改为你的id,后面加上==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="这里写你的id==" style="margin: 30px;">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->

5. 配置文章内的评论部分内容

打开themes/yelee/layout/_partial/article.ejs, 添加下面注释的两行代码
1
2
3
4
5
6
7
8
<% } else if (theme.livere.on) { %> // 添加这行
<%- partial('comments/livere') %> // 添加这行
<% } else if (theme.youyan.on) { %>
<%- partial('comments/youyan') %>
<% } else if (theme.disqus.on) { %>
<%- partial('comments/disqus', {
shortname: theme.disqus.shortname
}) %>

最后大功告成

文章目录
  1. 1. 前言
    1. 1.1. valine评论
      1. 1.1.0.1. 1. 首先注册LeanCloud账号并拿到APP ID和APP Key;
        1. 1.1.0.1.1. (1) 注册账号之后,创建一个应用
        2. 1.1.0.1.2. (2) 创建应用之后,点击应用的右上角设置图标,然后点击应用Key,如下图所示,获取APP ID和APP Key
      2. 1.1.0.2. 2. 在/yelee/_config.yml中加入
      3. 1.1.0.3. 3. 在/yelee/layout/_partial/article.ejs中加入
      4. 1.1.0.4. 4. 创建/yelee/layout/_partial/comments/valine.ejs文件,写入
      5. 1.1.0.5. 5. 在/yelee/source/css/_partial/mobile.styl最后加入:
      6. 1.1.0.6. 最后大功告成
  2. 1.2. 来比力评论
    1. 1.2.0.1. 1. 注册来必力账号,注册成功之后,点击右上角的头像,进入管理页面
    2. 1.2.0.2. 2. 然后点击左侧代码管理,会看到一串代码,代码第一行有个data-id,这个就是你的来必力id号
    3. 1.2.0.3. 3. 主题站点添加 uid
      1. 1.2.0.3.1. 打开theme/yelee/_config.yml,添加配置信息。
    4. 1.2.0.4. 4. 创建评论 ejs 文件
      1. 1.2.0.4.1. 在themes/yelee/layout/_partial/comments文件夹下创建livere.ejs文件,拷贝下面的代码。
    5. 1.2.0.5. 5. 配置文章内的评论部分内容
      1. 1.2.0.5.1. 打开themes/yelee/layout/_partial/article.ejs, 添加下面注释的两行代码
    6. 1.2.0.6. 最后大功告成
|
载入天数...载入时分秒...