本文主要內(nèi)容是利用阿里云對(duì)象存儲(chǔ)OSS做圖床七婴，實(shí)現(xiàn)Hexo下Next主題的相冊(cè)功能打厘，本文首發(fā)于筆者博客
前言
由于Next主題本身是沒(méi)有實(shí)現(xiàn)相冊(cè)的杭棵，所以相冊(cè)功能需要手動(dòng)添加婚惫，主要的內(nèi)容是需要做一個(gè)圖床氛赐，然后將本地圖片上傳至圖床，在打開(kāi)博客的時(shí)候從圖床上請(qǐng)求并加載圖片先舷。
最終效果參見(jiàn)我的相冊(cè)艰管。
解決方案對(duì)比
可用的解決方案
用Github的一個(gè)倉(cāng)庫(kù)做圖床
用七牛云做圖床
用阿里云OSS做圖床
Github
利用Github倉(cāng)庫(kù)做圖床是一個(gè)最常用的解決方案，但是有很多限制蒋川，比如存儲(chǔ)空間只有1GB牲芋，并且還會(huì)受到流量的限制捺球，當(dāng)圖片越來(lái)越多或者圖片很大的時(shí)候Github就不太適用了缸浦。
七牛云
七牛云確實(shí)是一個(gè)很好的解決方案，注冊(cè)賬號(hào)并實(shí)名認(rèn)證之后會(huì)有10GB永久存儲(chǔ)空間氮兵，10GB/月 HTTP國(guó)內(nèi)流量裂逐，10GB/月 HTTP海外流量，但是七牛云會(huì)強(qiáng)制實(shí)名認(rèn)證泣栈，并且需要上傳手持身份證正面和反面的兩張照片卜高，所以這也是我沒(méi)有用七牛云的原因，當(dāng)然不在意的朋友可以忽略南片。
阿里云OSS
阿里云OSS掺涛，即阿里云對(duì)象存儲(chǔ)，速度疼进、安全這些便不用說(shuō)了薪缆，收費(fèi)方式比較復(fù)雜，最簡(jiǎn)單的方法是購(gòu)買(mǎi)一個(gè)40GB的存儲(chǔ)寶即可伞广，一年9元錢(qián)拣帽，流量和請(qǐng)求使用默認(rèn)的按量計(jì)費(fèi)即可，流量費(fèi)用00:00-08:00（閑時(shí)）：0.25元/GB赔癌，8:00-24:00（忙時(shí)）：0.50元/GB诞外，請(qǐng)求費(fèi)用0.01元/萬(wàn)次澜沟，顯然灾票，個(gè)人博客能達(dá)到GB流量/小時(shí)、萬(wàn)次訪問(wèn)的博主完全不會(huì)在乎這些費(fèi)用了茫虽，未達(dá)到的個(gè)人博客收費(fèi)不出意外的話應(yīng)該每小時(shí)為0.00元刊苍，如下圖所示：
綜上，我選擇阿里云OSS濒析。
創(chuàng)建阿里云OSS存儲(chǔ)空間
創(chuàng)建
創(chuàng)建阿里云<i class="fa fa-arrow-right">賬號(hào)開(kāi)通阿里云OSS服務(wù)<i class="fa fa-arrow-right">購(gòu)買(mǎi)一個(gè)40GB的存儲(chǔ)資源包<i class="fa fa-arrow-right">創(chuàng)建儲(chǔ)存空間
創(chuàng)建的時(shí)候?qū)⒋鎯?chǔ)空間的讀寫(xiě)權(quán)限設(shè)置為公共讀正什。
獲取阿里云OSS的EndPoint和外網(wǎng)訪問(wèn)域名
進(jìn)入創(chuàng)建好的存儲(chǔ)空間的管理頁(yè)面，找到EndPoint和外網(wǎng)訪問(wèn)域名号杏。
獲取阿里云OSS的Access Key
點(diǎn)擊阿里云OSS控制臺(tái)頁(yè)面右邊的Access Key按鈕婴氮，進(jìn)入該頁(yè)面創(chuàng)建Access Key斯棒。
安裝OSS客戶端
進(jìn)入阿里云OSS控制臺(tái)頁(yè)面，在該頁(yè)面的右上角點(diǎn)擊更多主经，再點(diǎn)擊OSS客戶端下載進(jìn)行安裝荣暮。
安裝后使用 上一步獲取的AccessKeyId、 AccessKeySecret登錄客戶端罩驻，進(jìn)入已經(jīng)創(chuàng)建好的Bucket穗酥，創(chuàng)建兩個(gè)文件夾，分別為photos和min_photos惠遏。
安裝OSS的Python SDK
該SDK的運(yùn)行環(huán)境為Python 2.6砾跃，2.7，3.3节吮，3.4抽高，3.5，并需要用到pip命令進(jìn)行安裝透绩，未滿足運(yùn)行環(huán)境請(qǐng)移步百度自行搜索安裝厨内。
使用如下命令安裝SDK：
pip install oss2
構(gòu)建相冊(cè)頁(yè)面
注：本文將使用blog代替博客根目錄
創(chuàng)建頁(yè)面
使用如下命令在blog目錄下創(chuàng)建photo頁(yè)面
hexo new page photos
在主題的配置文件_config.yml中的menu選項(xiàng)下添加Photos
menu:
home: / || home
categories: /categories/ || th
archives: /archives/ || archive
about: /about/ || user
tags: /tags/ || tags
+ Photos: /photos/ || photo
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
進(jìn)入blog/source/photos目錄，修改index.md文件渺贤，并將位于第14行https://YourDomainName.com改為你的博客的地址
---
title: Photos
date: 2018-04-29 00:47:21
type: "photos"
comments: false
---
<link rel="stylesheet" href="../lib/album/ins.css">
<link rel="stylesheet" href="../lib/album/photoswipe.css">
<link rel="stylesheet" href="../lib/album/default-skin/default-skin.css">
<div class="photos-btn-wrap">
<a class="photos-btn active" href="javascript:void(0)">Photos</a>
</div>
<div class="instagram itemscope">
<a target="_blank" class="open-ins">圖片正在加載中…</a>
</div>
<script>
(function() {
var loadScript = function(path) {
var $script = document.createElement('script')
document.getElementsByTagName('body')[0].appendChild($script)
$script.setAttribute('src', path)
}
setTimeout(function() {
loadScript('../lib/album/ins.js')
}, 0)
})()
</script>
添加插件
進(jìn)入blog/themes/next/source/lib雏胃，創(chuàng)建文件夾album，然后將這個(gè)Github倉(cāng)庫(kù)中的assets文件夾志鞍、default-skin文件夾瞭亮、data.json文件、ins.css文件固棚、ins.js文件统翩、photoswipe.css文件下載下來(lái)放到新建的album文件夾內(nèi)，將該倉(cāng)庫(kù)中的photoswips.js文件此洲、photoswipe-ui-default.js文件放到blog/themes/next/source/js/src內(nèi)厂汗。
打開(kāi)ins.js文件，定位到大約121呜师、122行娶桦，如下：
var minSrc = 'https://yourBucketName.oss-cn-shenzhen.aliyuncs.com/min_photos/' + data.link[i];
var src = 'https://yourBucketName.oss-cn-shenzhen.aliyuncs.com/photos/' + data.link[i];
將yourBucketName.oss-cn-shenzhen.aliyuncs.com替換為你的阿里云OSS外網(wǎng)訪問(wèn)域名。
配置插件
進(jìn)入blog/themes/next/layout,在_layout.swig文件的</head>標(biāo)簽前加入如下引用：
<script src="{{ url_for(theme.js) }}/src/photoswipe.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.js?v={{ theme.version }}"></script>
在<body>標(biāo)簽下添加如下代碼：
{% if page.type === "photos" %}
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
{% endif %}
進(jìn)入blog/themes/next/layout/_scripts/pages文件夾汁汗，在post-details.swig中添加如下引用：
<script src="{{ url_for(theme.js) }}/src/photoswipe.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.js?v={{ theme.version }}"></script>
圖片處理與上傳
下載配置腳本
下載這個(gè)Github倉(cāng)庫(kù)衷畦，然后在該倉(cāng)庫(kù)的文件夾內(nèi)創(chuàng)建兩個(gè)文件夾，分別為photos和min_photos知牌，然后修改tool.py文件：
def handle_photo():
'''
更新json文件
'''
endpoint = 'http://oss-cn-shenzhen.aliyuncs.com'
auth = oss2.Auth('YourAccessKeyId', 'YourAccessKeySecret')
bucket = oss2.Bucket(auth, endpoint, 'YourBucketName')
file_list = []
objs=islice(oss2.ObjectIterator(bucket,prefix='photos/20',delimiter=''),None)
def aliyun_operation(flag):
'''
上傳圖片
'''
endpoint = 'http://oss-cn-shenzhen.aliyuncs.com'
auth = oss2.Auth('YourAccessKeyId', 'YourAccessKeySecret')
bucket = oss2.Bucket(auth, endpoint, 'YourBucketName')
將endpoint祈争、auth、bucket分別替換為你的阿里云OSS的EndPoint角寸，Access Key和BucketName菩混。
'''大約在130行'''
list_info.reverse() # 翻轉(zhuǎn)
tmp = bubbleYear(list_info)
bubble(tmp)
final_dict = {"list": list_info}
with open("../blog/themes/next/source/lib/album/data.json","w") as fp:
json.dump(final_dict, fp)
將上述代碼中的blog替換為你的博客根目錄的名字忿墅。
使用腳本
將需要上傳到博客相冊(cè)的圖片重命名為2018-5-1_圖片的描述.jpg形式，日期年月日之間為-沮峡，日期與圖片描述之間為_球匕，然后將圖片移動(dòng)到剛才創(chuàng)建的photos文件夾下，然后使用如下命令進(jìn)行圖片裁剪并上傳到阿里云OSS上帖烘。
python tool.py
執(zhí)行腳本可能遇到的問(wèn)題：
-
No module named 'PIL'
解決辦法：執(zhí)行
pip install Pillow
結(jié)語(yǔ)
感謝各位的閱讀亮曹。
參考文章
更新于2018年11月10日：
- 修改pool.py的單詞拼寫(xiě)錯(cuò)誤
- 更新執(zhí)行python命令可能出現(xiàn)的問(wèn)題及解決辦法
