之前一直想要在博客里加一個相冊的功能，自己折騰無果后，轉(zhuǎn)入使用主題 yilia ，該主題是將其在ins上的相冊轉(zhuǎn)過來，我也剛好也是想把ins上的照片轉(zhuǎn)過來，太喜歡這個app了，所以這個主題真的是深得我心。可是，男人都是善變的，我現(xiàn)在又轉(zhuǎn)入了新主題 Manpassant ，于是開始了我的漫漫遷移路。
本篇文章僅介紹如何在Manpassant主題上遷移yilia上的相冊功能，如何獲取ins上的照片，以后有時間再補充介紹。
?
準(zhǔn)備工作
首先你得搭建好你的相冊庫，無論是本地存儲還是用github、七牛云都可以。
?
生成相冊頁面
$ hexo new page "photos"
執(zhí)行完畢后找到 source/photos 文件夾下 index.md 進行修改，Manpassant 支持是否顯示側(cè)欄兩種 page 模式，設(shè)置layout為layout: page則顯示雙欄，若需要單欄頁面，就將layout設(shè)置為 layout: single-column。
我的配置：
layout: single-column
type: "photos"
title: 相冊
noDate: 'true'
comments: 'true'
copyright: false
正文代碼部分如下：
- 前面三個
link的文件都要一起放在photos文件夾中，點擊之后可以下載 - 第8行超鏈接可以替換成你自己的ins網(wǎng)頁
<link rel="stylesheet" href="./ins.css">
<link rel="stylesheet" href="./photoswipe.css">
<link rel="stylesheet" href="./default-skin/default-skin.css">
<div class="instagram itemscope">
<section class="archives album">
<ul class="img-box-ul">
<a target="_blank" class="open-ins">圖片來自instagram，正在加載中…</a>
</ul>
</section>
</div>
<script>
function add0(m){return m<10?'0'+m:m };
function getDate(timeString) {
var time = new Date(parseInt(timeString) * 1000);
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
return y+'-'+add0(m)+'-'+add0(d);
};
</script>
<script>
(function() {
var loadScript = function(path) {
var $script = document.createElement('script')
document.getElementsByTagName('body')[0].appendChild($script)
$script.setAttribute('src', path)
}
setTimeout(function() {
loadScript('./ins.js')
}, 0)
})()
</script>
此時，頁面的基本樣式已經(jīng)完成，完成圖如下：
此時若點擊圖片試圖查看大圖，瀏覽器將會報錯
Uncaught ReferenceError: PhotoSwipe is not defined
?
引入JS文件
前面添加的photoswipe.css和default-skin.css是使用photoswipe來查看相冊圖片，具體可以參考網(wǎng)址 photoswipe。其實Manpassant主題已經(jīng)內(nèi)置了fancybox來查看圖片，那為什么還要使用OpenSwipe呢？因為我們想要實現(xiàn)顯示在網(wǎng)頁上的圖片是壓縮版本，點擊之后圖片顯示未壓縮版本（其實主要是因為yilia主題用的就是這個，我只會魔改。。。）。
現(xiàn)在繼續(xù)添加js文件到主題文件夾中，找到themes/maupassant/source/js文件夾下面兩個文件放入其中（可以從PhotoSwipe項目中下載）：
在主題目錄layout/_partial下新建文件openswipe.pug寫入：
script(type='text/javascript', src=url_for(theme.js) + '/photoswipe.min.js' + '?v=' + theme.version)
script(type='text/javascript', src=url_for(theme.js) + '/photoswipe-ui-default.min.js' + '?v=' + theme.version)
之后，在base-without-sidebar.pug文件最后加上一句include _partial/openswipe.pug，如果你前面選的是雙欄頁面使用的是layout: page，那么你應(yīng)該在base.pug文件中添加。
完成到這里，OpenSwipe的配置基本完成，當(dāng)你點擊圖片時瀏覽器報錯將是
Uncaught TypeError: Cannot read property 'firstChild' of undefined
?
點擊圖片判斷
找到文件single-column.pug，加入判斷語句：
if page.type == "phtos"
div(class="pswp" tabindex="-1" role="dialog" aria-hidden="true")
div(class="pswp__bg")
div(class="pswp__scroll-wrap")
div(class="pswp__container")
div(class="pswp__item")
div(class="pswp__item")
div(class="pswp__item")
div(class="pswp__ui pswp__ui--hidden")
div(class="pswp__top-bar")
div(class="pswp__counter")
button(class="pswp__button pswp__button--close" title="Close (Esc)")
button(class="pswp__button pswp__button--share" title="Share")
button(class="pswp__button pswp__button--fs" title="Toggle fullscreen")
button(class="pswp__button pswp__button--zoom" title="Zoom in/out")
div(class="pswp__preloader")
div(class="pswp__preloader__icn")
div(class="pswp__preloader__cut")
div(class="pswp__preloader__donut")
div(class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap")
div(class="pswp__share-tooltip")
button(class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)")
button(class="pswp__button pswp__button--arrow--right" title="Next (arrow right)")
div(class="pswp__caption")
div(class="pswp__caption__center")
由于該主題文件都是.pug，而本人對jade并不熟悉，所以查了一下基本語法莫改了一下javascript代碼。
添加完成之后，相冊頁面也就完結(jié)撒花啦！
?
使用流程
- 使用nodejs-ins工具生成圖片及ins.json文件
- 正常使用
hexo g -d更新博客
