Star Issue Follow @DesertsP
@云淡风轻 开发了Valine一款极简的评论系统 。我冒昧做了二次修改给自己的博客用上;强迫症使然,这两天又熬夜写了个后台管理,对 Valine 做了轻度改造,让其更合我的胃口。Valine 可以说是当前最好的独立博客评论解决方案了。

最新版Valine Admin配置手册:

Valine Admin 配置手册

#Blog #折腾 
Valine Admin 是 Valine 评论系统的后端功能补充和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Ak

Valine 的特点:

  • 无后端实现
  • 高速,使用国内后端云服务提供商 LeanCloud 提供的存储服务
  • 开源,自定义程度高
  • 支持邮件通知
  • 支持验证码
  • 支持 Markdown

我完善实现了以下内容:

  • 头像显示、样式美化和细节优化
  • 完善的邮件通知,自定义 SMTP 发件频率和内容不再受限
  • 基于 Akismet 的垃圾评论自动标注和过滤
  • 评论管理,避免直接操作数据库
  • 通知邮件补发(未发送或发送失败的通知邮件可以进入后台补发)
  • Disqus 数据迁移
  • 清理不必要的数据库字段,提高效率

更新日志:

  • [2020/10/07] 移除对av-min.js和jQuery的依赖,新增暗黑模式(需要主题配合),新增评论计数显示
  • [2019/03/03] 已支持PJAX主题
  • [2019/02/24] 已修复Markdown语法支持不完整问题
  • [2018/09/16] 自定义表情包(参考下文配置emoticon_url及emoticon_list两个参数),另一套高清表情包下载: 点击下载 ;全新的评论样式;去除点赞功能
  • [2018/09/14] 评论表情,表情包下载: 点击下载 解压后自行托管静态文件,需更新配置参数
  • [2018/08/10] Disqus 数据迁移代码开源(Python),点击下载
  • [2017/08/16] 隐私保护:敏感字段限制读取,如 E-mail(用于头像显示和评论通知)、User-Agent、IP(用于垃圾评论判别)
  • [2017/08/16] 更新云引擎休眠解决方案 关于自动休眠问题的说明

在线预览

评论安装

安装过程非常简单,这里引用 Valine 原作者 @云淡风轻 的安装教程,稍作修改。

1. 获取 APP ID 和 APP KEY

点击这里登录或注册Leancloud 点这里创建应用,应用名看个人喜好。 选择刚刚创建的应用>设置>选择应用 Key,然后你就能看到你的APP ID和APP KEY了,参考下图:

为了您的数据安全,请填写应用>设置>安全设置中的Web 安全域名,如下图:

2. 修改主题模板

在主题模板的文章页中引入相应的 js 即可,几乎所有博客程序适用。以 Ghost 博客的默认主题为例,只需要在 「post.hbs」 文件中 </body> 前插入下方的代码即可。

使用PJAX主题的请见文末的代码。

<div id="comment"></div>
<span id="comment-count"></span>
<script>
    comment_el = '#comment';
    comment_count_el = 'span.comment-count';
    new Valine({
        el: comment_el,				// 评论区元素(要求div)
        count_el: comment_count_el,    // 评论计数元素(要求span)
        lang: 'zh-cn',							   // 语言(zh-cn或en)
        emoticon_url: 'https://cloud.panjunwen.com/alu', // 表情包根目录(自行解决文件托管)
        emoticon_list: ["吐.png", "狂汗.png", "不说话.png"], // 表情包文件列表
        app_id: '你的App ID',			    										   	
        app_key: '你的App Key',    										      
        placeholder: 'Write a comment',  // 提示符
        admin_email_hash: 'f32fc1c3f6674bfb5621a60901b5f96c', // 可选,管理员邮箱md5,用于显示管理员标志👮‍
        max_nest: 3,					// 嵌套评论深度,太大会影响加载速度
        page_size: 5					// 分页大小
    });
</script>

Valine.min.js 你可以使用别人的或者上传到自己的服务器或主机:Valine Ex

需要修改的只有:el、app_id 和 app_key。如果之前有用原版Valine,请将邮件通知和验证码关掉:notify: false, verify: false,避免重复发通知。算术验证码反人类,强烈建议停用。 至此,你的评论系统已经可以工作了!是不是很简单?

特别提醒,为确保数据安全,请合理设置数据库权限。此外,请务必设置 Web 安全域名。

3. 暗黑模式切换

为了实现主题和评论的同步切换,且符合主题的配色,新版本中去掉了Valine的颜色定义,改用CSS变量控制前景和背景色。使用如下5个变量控制评论区色彩。如果你的主题色彩定义与如下不同,或者不支持暗黑模式切换,需要添加如下CSS来提供色彩变量。

:root {
  /* light theme color */
  --background: #fff;
  --background-secondary: #eaeaea;
  --color: #222;
  --color-secondary: #999;
  --border-color: #dcdcdc;
}

/* dark theme colors 如果不需要自动切换可以把这里去掉 */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #292a2d;
    --background-secondary: #3b3d42;
    --color: #a9a9b3;
    --color-secondary: #73747b;
    --border-color: #4a4b50;
  }
}

云引擎一键部署

请参考

Valine Admin 配置手册

#Blog #折腾 
Valine Admin 是 Valine 评论系统的后端功能补充和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Ak

数据迁移

请参考DisqusLeanCloud

效果

前端效果:

后台演示

后台截图:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-57-13

邮件通知:

ping-mu-kuai-zhao-2017-11-12-xia-wu-2-52-48

小结

Valine 『无后端』已经可以很好的运行,但反垃圾评论和邮件通知还得靠后台来做,正好 LeanCloud 提供免费的云引擎和云 Hook,得以实现上述功能。LeanCloud 实在太好用了,借助官方的示例程序,连 JavaScript 语法都不懂就硬着头皮用 Nodejs 了,代码虽然很丑还是放出来,Github:Valine-Admin。另外数据迁移是用 Flask 写的,也是第一次用,所以就不放源码献丑了。

PJAX支持(实验性)

对于使用pjax的主题,可以采用下面的代码加到前端jQuery加载之后的位置,确保这些js代码只加载一次不要加到<div class="comment"></div>内部或附近。

<!--确保jQuery已经在此之前加载-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="你托管的Valine路径./dist/Valine.min.js"></script>
<script>
    <!--.comment要与评论区元素一致-->
    comment_el = '.comment';
    load_valine = function () {
      if ($(comment_el).length) {
        new Valine({ 
          av: AV,
          el: comment_el,
          emoticon_url: 'https://cloud.panjunwen.com/alu',
          emoticon_list: ["喷血.png","狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png"],
          app_id: '你的id',
          app_key: '你的key',
          placeholder: 'Write a Comment'
          });
      }
    };
    $(document).ready(load_valine);
    $(document).on('pjax:complete', function() {
      load_valine();
    });
</script>
折腾  Blog  Code