之前我已經寫了一篇文章詳細的講述了如何使用hexo搭建github博客。如果還沒有看的可以去看看，hexo搭建博客
其實，根據這篇文章的過程我們就能夠搭建一個專屬於自己，並且非常美觀的博客了。但是如果你像我一樣喜歡折騰，喜歡做到極致，比如添加打賞，添加文章導航，以及文章閱讀次數，這些都很簡單，按照主題文件的模版一點點修改，就能實現自己想要的效果了。
這篇文章主要記錄我折騰的兩個功能： 相冊和獨立域名。
相冊
首先，看看我們實現后的效果，點這里看我的相冊
分析
然后我們分析一下，想要獲取相冊圖片，首先得拿到圖片得線上地址，其次，我們可以想到，既然我們的博客內容都放在了github得服務器，那么圖片又何嘗不能呢？
使用hexo搭建博客的同學都知道，github上會建立一個名為username.github.io的倉庫，而且倉庫只存儲了整個項目的一部分（source文件夾的內容），而且貌似這個倉庫有大小限制，總之就是說不能把圖片放在這個倉庫里。
我們再考慮另一個問題，假如我們有一天需要在另一台電腦寫博客怎么辦？所以博客備份就是需要的了。那么好，我們在Github 上再建一個倉庫，用來存儲整個博客項目的文件，假如某一天換個環境，直接全部down下來，就能拿到所有文章的源文件了，所以正好，我們可以在根目錄下新建一個photos文件夾用來存放相冊需要展示的圖片文件了。
ok，分析結束，敲定技術方案：
我們新建文件夾photos用來存放圖片文件，然后新建一個基於nodejs的js文件用來讀取所有圖片再生成一個json接口文件供相冊頁面的js文件使用。
存放照片
在博客的根目錄下創建一個photos的文件夾，里面存放你想要展示的照片文件。然后把整個項目部署到github上，才能訪問到圖片的線上地址。
生成json文件
在根目錄下創建一個nodejs文件tool.js，內容如下：
"use strict";
var fs = require("fs");
var path = "./photos/";
fs.readdir(path, function (err, files) {
if (err) {
return;
}
var arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("./source/photos/data.json", JSON.stringify(arr, null, "\t"));
console.log('get img success!');
return;
}
fs.stat(path + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
arr.push(files[index]);
}
iterator(index + 1);
})
}(0));
});
運行這個文件node tool.js，運行之后，會在/source/photos/目錄下創建一個data.json文件，內容如下：
[
"IMG_0011.JPG",
"IMG_0019.JPG",
"IMG_0020.JPG",
"IMG_0022.JPG",
"IMG_0045.JPG",
"IMG_0099.JPG",
"IMG_0106.JPG",
"IMG_0191.JPG",
"IMG_0306.JPG",
"IMG_0438.JPG",
"IMG_0451.JPG",
"IMG_0648.JPG",
"IMG_0670.JPG",
"IMG_0842.JPG",
"IMG_1078.JPG",
"IMG_1239.JPG",
"IMG_1429.JPG",
"IMG_1634.JPG"
]
每次修改photos文件夾里的照片，都得運行一下這個js文件，以更新生成的data.json文件。
創建相冊頁面
在根目錄下執行命令：
hexo page photos
會在source/photos目錄下生成一個index.md文件，編輯文件內容如下：
<link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
<div class="instagram">
<section class="archives album">
<ul class="img-box-ul"></ul>
</section>
</div>
修改themes/yilia/js/photo.js：
...
init: function () {
var that = this;
$.getJSON("/photos/data.json", function (data) {
that.render(that.page, data);
that.scroll(data);
});
},
render: function (page, data) {
var begin = (page - 1) * this.offset;
var end = page * this.offset;
if (begin >= data.length) return;
var html, li = "";
for (var i = begin; i < end && i < data.length; i++) {
li += '<li><div class="img-box">' + '<a class="img-bg" rel="example_group" href="https://raw.githubusercontent.com/jarson7426/blog-back-up/master/photos/' + data[i] + '"></a>' + '<img lazy-src="https://raw.githubusercontent.com/jarson7426/blog-back-up/master/photos/' + data[i] + '" />' + '</li>';
}
$(".img-box-ul").append(li);
$(".img-box-ul").lazyload();
$("a[rel=example_group]").fancybox();
},
...
上述文件讀取json文件，將圖片的線上url拼接起來渲染在頁面上，相冊樣式使用yilia主題提供。然后上傳這些文件，根據自定義的路徑訪問url，就能看到相冊了。那么，到這里就基本完成了相冊的制作。
獨立域名
到目前為止，我們的博客都是使用github分配的二級域名luckykun.github.io來訪問的， 那么我們會想如果能自己設置個域名，是多么cool的事！要怎么辦呢？那就繼續往下看吧！
購買域名
去賣域名的網站去買一個域名，我是在萬網買的域名，如圖所示：
找到自己喜歡的域名，購買就好了。
域名解析
有了自己的域名之后，luckykun.github.io替換成luckykun.com，只要設置下解析即可，進入萬網的雲解析頁面，添加如下解析：
說明：192.30.252.154和192.30.252.153是github服務器對應的ip地址，這步一定要設置，否則訪問不了。
添加CNAME
然后回到博客項目根目錄，在source/下新建一個名為CNAME的文件，里面的內容寫入luckykun.com即可。
然后在瀏覽器輸入luckykun.com，即可代替之前的github.io的域名，訪問到自己的博客頁面了。實在是台、太cool了！
結語
好的，文章寫道這里就結束了，感謝大家的閱讀，如果文章能給大家帶來幫助就最好了，如果讀者還有任何疑問，歡迎留言，我會盡力解答。再見啦～～