颜值超高的FireKylin博客系统

原文：https://www.fanhaobai.com/2016/12/firekylin.html

相信大多数人都使用着WordPress，但是又很难从WordPress上找到一款比较满意的主题，你是否想过更换其他优秀的开源博客系统呢？我就是这样的经历，但一直也没找到合适的机会，直到一次偶然Google到一篇 技术博客，打开时眼前一亮，简介大气的排版以及很好地支持移动设备特性深深地吸引了我，随即便开始了瞎鼓捣，于是就有了这篇文章。

FireKylin介绍

国外有一个类似的博客系统，名字叫 Greyshade，但是作者很长时间没有进行维护了。而国内同样优秀的 FireKylin 开源博客系统，是由奇虎360公司Web前端工程师组成的专业团队 75Team 进行开发和维护，所以选
FireKylin作为本站的博客系统就是很自然的事情了。

FireKylin是基于ThinkJS开发，所以本篇博客也默认你已安装好了NodeJS。【CentOS安装NodeJS点这里】

安装前准备

1）首先需要安装npm【npm使用说明见这里】

yum install –y npm

2）下载最新的安装包并解压

wget http://firekylin.org/release/firekylin_0.13.1.tar.gz
tar zxvf ./firekylin_0.13.1.tar.gz

安装FireKylin

1）安装对应依赖

cd ./firekylin
npm install                 #必须在解压缩目录内执行

发现是从国外https://registry.npmjs.org/upyun地址下载源，而下载速度较慢，故改用国内淘宝的镜像。

npm install --registry=https://registry.npm.taobao.org

2）访问并安装

npm start

通过配置Nginx服务器代理来访问http://127.0.0.1:8360，根据提示进行安装。

nginx配置如下：

server{
    root  path/to/www;    #指向firekylin目录下的www
    location / {
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://127.0.0.1:8360$request_uri;
        proxy_redirect off;
    }
}

安装PM2

PM2是用来在服务器上管理 NodeJS服务的工具，安装较简单。

1）安装

npm install -g pm2 --registry=https://registry.npm.taobao.org

2）配置

mv ./pm2_default.json ./pm2.json

将pm2.json文件中cwd配置值改为项目的当前路径。

3）启动

pm2 start pm2.json

4）配置Nginx

Nginx服务器的配置可以参考项目目录下的nginx_default.conf。

几个问题

增加文章目录

FireKylin自动为文章生成的目录，总是感觉怪怪的，于是决定改源码，使之变成我想要的样子。

修改的文件路径为app/admin/controller/api/post.js。

原代码：

markedContent = markedContent.replace(/<h(\d)[^<>]*>(.*?)<\/h\1>/g, function (a, b, c) {
      if (b == 2) {
        return '<h' + b + ' id="' + _this2.generateTocName(c) + '">' + c + '</h' + b + '>';
      }
      return '<h' + b + ' id="' + _this2.generateTocName(c) + '"><a class="anchor" href="#' + _this2.generateTocName(c) + '"></a>' + c + '</h' + b + '>';
    });
markedContent = markedContent.replace(/<h(\d)[^<>]*>([^<>]+)<\/h\1>/, function (a, b, c) {
      return a + '<div class="toc">' + tocContent + '</div>';
    });

修改为：

markedContent = markedContent.replace(/<h(\d)[^<>]*>(.*?)<\/h\d>/g, function (a, b, c) {
      return '<h' + b + ' id="' + _this2.generateTocName(c) + '">' + c +'</h' + b + '>';
    });
markedContent = (tocContent ? ('<div class="toc"><p><strong>文章目录</strong></p>' + tocContent + '</div>'): '') + markedContent

这样每次发表文章的时候会自动根据标题生成文章目录，当然还需要在theme/firekylin/layout.html中增加如下样式：

article .toc {
    border: 1px solid #e2e2e2;
    font-size: 14px;
    margin: 0 0 15px 20px;
    max-width: 260px;
    min-width: 120px;
    padding: 6px;
    float: right;
}

并在theme/firekylin/layout.html中的article blockquote{}增加一行display:-webkit-box;
的样式。

修改文章摘要

修改的文件路径为app/admin/controller/api/post.js。

原代码：

data.summary = data.content.split('<!--more-->')[0].replace(/<[>]*>/g, '');

修改为：

data.summary = data.content.split('<!--more-->')[0].replace(/<[>]*>/g, '').replace(/<div\s*class="toc">([\s\S]+?)<\/div>/mg, '')  + '[...]';

文章摘要不需要文章目录，且增加字数省略符号[...]。

增加百度分享

由于本站全面启用了HTPPS，而百度分享还是使用了HTTP，当接入百度分享后会存在请求不到share.js文件的问题，详细的解决办法点 这里 。

** 大致需要两个步骤 **

1） 下载github上已经修改完成的 源码，解压并放置在站点服务器静态资源目录下：

unzip ./baiduShare-master.zip
cd ./baiduShare-master
mv ./static/* /data/html/www/static      #网站静态资源路径自行更改，第2步需要使用

2）复制百度分享的代码，并对其引用文件路径部分做如下修改：

原代码为：

.appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

修改为：

.appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

请确保上面的static静态资源文件目录是直接处于网站根目录下，然后复制修改后的代码插入到theme/firekylin/post.html中<p>本文链接：<a href="{{site_url + http.url | safe}}">{{site_url + http.url | safe}}</a></p>后面即可。

多说头像不支持HTTPS

这里利用Nginx做一个反向代理，也就是通过本站服务器将HTTPS地址转发到对应的HTTP地址，原文见这里 。

** 需要的步骤 **

1） 配置Nginx作为反向代理服务器：

server {
    ... ...
    location ~ ^/proxy/(.*)$ {
        proxy_connect_timeout    10s;
        proxy_read_timeout       10s;
        proxy_pass             http://$1;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        expires max;
    }
    ... ...
}

2） 下载多说的embed.js到本地，并作如下修改：

首先，替换embed.js文件中头像的路径。

在return e.avatar_url||rt.data.default_avatar_url之前插入如下代码：

if (e.avatar_url) {
    e.avatar_url = (document.location.protocol == "https:") ? e.avatar_url.replace(/^http\:\/\//, "https://yoursite.com/proxy/") : e.avatar_url;
} else {
    rt.data.default_avatar_url = (document.location.protocol == "https:") ? rt.data.default_avatar_url.replace(/^http\:\/\//, "https://yoursite.com/proxy/") : rt.data.default_avatar_url;
}

然后，替换embed.js文件中表情的路径。

替换t+=s.message+'</p><div class="ds-comment-footer ds-comment-actions'中的s.message为如下代码：

((s.message.indexOf("src=\"http:\/\/") == -1) ? s.message : ((document.location.protocol == "https:") ?    
s.message.replace(/src=\"http\:\/\//, "src=\"https://yoursite.com/proxy/") : s.message))