颜值超高的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\1>/g, function (a, b, c) {
      if (b == 2) {
        return '' + c + '';
      }
      return '' + c + '';
    });
markedContent = markedContent.replace(/]*>([^<>]+)<\/h\1>/, function (a, b, c) {
      return a + '
' + tocContent + '
'; });

修改为:

markedContent = markedContent.replace(/]*>(.*?)<\/h\d>/g, function (a, b, c) {
      return '' + c +'';
    });
markedContent = (tocContent ? ('

文章目录

' + tocContent + '
'): '') + 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('')[0].replace(/<[>]*>/g, '');

修改为:

data.summary = data.content.split('')[0].replace(/<[>]*>/g, '').replace(/([\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

本文链接:{{site_url + http.url | safe}}

后面即可。

多说头像不支持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+'

你可能感兴趣的:(颜值超高的FireKylin博客系统)