原文：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))