Hexo优化 --- 一款极简的评论系统

时间:2022-05-31
本文章向大家介绍Hexo优化 --- 一款极简的评论系统,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

已有更简单的方式来实现,请参考: Hexo 优化 --- Valine 扩展之邮件通知

演示

之前也用多很多评论系统,包括多说,网易云跟帖,Coding Comments…,但是这些评论系统,要不就是稳定性差,要不就是需要繁琐的登录,还有的直接停止服务了。

好了,废话不多说,先看今天的主角长什么样:

Valine – 一款基于 Leancloud 的极简风评论系统

使用方法

获取 Leancloud Key

因为是基于 Leancloud 的评论系统,所以需要先注册一个 Leancloud 账号。

  1. 点击这里注册 Leancloud 账号。
  2. 创建一个应用,应用名随意。
  3. 进入刚才创建的应用。设置 -> 应用 Key,这里的 App IDApp Key,复制下来,下一步要用。

配置到页面上

由于 Hexo 主题现在没有内置 Valine 评论系统,所以我们要手动修改 Hexo Next 主题的配置。

为了保险起见,推荐你先备份下 /themes/next/_config.yml/themes/next/layout/_partials/comments.swig。以防出现不备。

修改_config.yml

修改主题目录下的 /themes/next/_config.yml 中添加(如果现在使用着其他评论系统,请先去掉其他评论系统的配置):

valine:

enable:true

appId:Your_AppId##你的 Leancloud App ID

appKey:Your_AppKey##你的 Leancloud App Key

修改 comments.swig

注:因为我没有其他的评论系统需求,所以将其他评论系统的内容的删掉了。

打开 /themes/next/layout/_partials/comments.swig整个文件修改为:

{% if page.comments %}
  <div class="comments" id="comments"></div>
    {% if (theme.valine and theme.valine.enable)%}
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/valine@1.1.6/dist/Valine.min.js"></script>
    <script>
        new Valine({
            av: AV,
            el: '.comments',
            notify: true, // 邮件提醒 v1.1.4新增,下一步中有具体的邮箱设置
            verify: true,
            app_id: '{{ theme.valine.appId }}',
            app_key: '{{ theme.valine.appKey }}',
            placeholder: 'ヾノ≧∀≦)o来啊,快活啊!'
        });
    </script>
    {% endif %}
{% endif %}

设置邮箱提醒

上一步的 notify 选项为 true 的情况下才需要这个设置,如果不需要邮件提醒,则直接跳过即可。

进入 Leancloud 选择你的评论所存放的 应用 > 设置 > 邮件模板,按下图设置好 用于重置密码的邮件主题 > 然后 保存

结语

好了,到此为止,重新部署后就可以看到结果了,部署之前,最好先执行以下 hexo clean 命令,防止出现缓存问题。如果出现下图所示的评论框,那么就是成功了。

本文参考:Valine – 一款极简的评论系统