相信大多数人都使用着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))