千里之行
始于足下

绘枫和畅

千里之行,始于足下

Sun.

日曜日

事情发生在两个星期前,某天看见了多说要关闭的通知,我吃惊了三秒,这意味着我用着社会化评论框的博客乐趣少了一大半。当初,只因为想偷个懒,所以用了多说,大概用了半年,上面有了三百多条不是广告的正常评论,多说打出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的配置项:

字段名称类型默认值备注
placeholderstring请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。评论框的placeholder
wbAppKeystring''必须,微博开发者应用appKey
commentAblebooltrue是否允许评论
announccementstring''不运行评论时展示的公告
pageNumbernumber10每页评论数量
childrenNumbernumber10子级评论每页数量
threadKeystring''页面唯一key
titlestring''页面标题

主题开发文档

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

低版本升级

详细操作参见wiki

问题反馈

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

Master之令咒:

带我飞

©2016-2018 Powerd by Alchemy's Spruche 鄂ICP备14020745号