绘枫和畅

萌萌哒Spruche和可爱多Servant评论框

Alchemy 17 Comments 3449 Views 2017-4-2

事情发生在两个星期前，某天看见了多说要关闭的通知，我吃惊了三秒，这意味着我用着社会化评论框的博客乐趣少了一大半。当初，只因为想偷个懒，所以用了多说，大概用了半年，上面有了三百多条不是广告的正常评论，多说打出GG，评论们也要随之而去，所以我抽出了用来码字的时间，给Spruche添加了评论系统，另外配套做了接入微博的jQuery评论框插件——Servant。

Spruche

开始

展示

默认主题

站点设置

移动端

290AF955-EA3B-42A1-807F-7985822CAF36 (1).png

支持功能

Spruche是一个基于Node.js下Express框架的轻量级博客系统，目前她有这些功能：

文章编辑、删除、置顶、草稿、特色图片、语法高亮，使用ueditor编辑器
支持自定义主题
友情链接管理
多说评论导入
支持微博登陆、回复、赞、踩、举报等功能的高颜值Servant评论框插件，其样式拷贝B站
系统升级提醒
Pjax
漂亮的默认主题以及手工绘制的错误页面

环境要求

Spruche现在主要使用ES7 async进行异步编程，MySQL数据库需要支持四子节编码的emoji的utfmb4编码格式，环境相对要求较高：

Node >= 7.0
MySQL >= 5.5.3

另外如果你想使用Servant评论框需要一个新浪微博开发者应用。

开始安装

#1 克隆项目

项目地址：https://github.com/IceEnd/Spruche ，以分支master为准。

#2 系统配置

打开根目录下面的config.js，配置数据库、新浪微博开发者、主题。

module.exports = {
  mysql: {                       // 数据库配置
    host: '127.0.0.1',           // 地址
    user: '***',                 // 用户名
    password: '***',             // 密码
    database:'***',              // 数据库名称
    port: 3306,                  // 端口
    charset: 'utf8mb4'
  },
  wbApp: {                        // 新浪开发者配置 不用 Servant评论框 可以不填
    appKey: '***',                // 新浪微博开发者key
    appSecret: '***'              // 新浪微博开发者Secret
  },
  theme: 'default'                // 主题文件夹名称，默认为 'default'，部分系统页面使用了默认主题，请不要删除默认主题
};

#3 创建数据库

进入MySQL，创建数据库，例如：

create database spruche;

#4 导入依赖

在项目根目录打开终端，导入依赖包：

npm install

或者

yarn

#5 运行项目

运行一次可以直接执行以下命令：

npm start

也可用使用pm2、forever 当作服务运行：

pm2 start ./bin/www

#6 站点配置

访问 hostname:3000/start，填写相应信息，登陆后台地址为：hostname:3000/login。

Servent评论框

Servant

评论框的的样式参照了B站的评论，她是一个和多说用起来一样方便的插件。使用步骤：

#1 引入文件

首先需要在你的主题页面head标签内引入样式和插件（如果用了pjax，需要在全部的页面中引入）：

<link rel='stylesheet' href='/dist/comments.min.css' />
<script src="/dist/comments.min.js"></script>

#2 插入评论框

在需要放置评论框的地方，引用Servant：

<div id="comments">
    <script>
        var options = {
            wbAppKey: '2325634760',
            title: '友情连接',
            threadKey: '/friendslink',
            commentAble: true,
            announcement: '英灵【多说】已经殉职，master正在努力制造新英灵...',
        }
        var servant = new Servant('#comments', options);
        servant.init();
  </script>
</div>

这一步很重要，在你主题下面新建connect.html，这个页面主要是拿来获取微博Token的，代码如下，样式可以自己定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="shortcut icon" type="image/x-icon" href="/images/icon/favicon.ico" />
</head>
<body>
<div>
    <h3>
        Spruche 正在连接微博...
    </h3>
</div>
<script src="/javascripts/libs/jquery-2.1.4.min.js"></script>
<script src="/javascripts/libs/jquery.cookie.js"></script>
<script src="/dist/comments.min.js"></script>
<script>
    var servant = new Servant();
    servant.getThridToken();
</script>
</body>
</html>

option的配置项：

字段名称	类型	默认值	备注
placeholder	string	请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。	评论框的placeholder
wbAppKey	string	''	必须，微博开发者应用appKey
commentAble	bool	true	是否允许评论
announccement	string	''	不运行评论时展示的公告
pageNumber	number	10	每页评论数量
childrenNumber	number	10	子级评论每页数量
threadKey	string	''	页面唯一key
title	string	''	页面标题

主题开发文档

移步至教程，相关文档、接口后续完善，敬请关注。

低版本升级

详细操作参见wiki。

问题反馈

如果在使用Spruche中出现问题，或是对功能有新需求，可以提给我提Issues(https://github.com/IceEnd/Spruche/issues)，或者给我发邮件：min@coolecho.net。

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

千里之行

始于足下

千里之行,始于足下