Hexo+Next+阿里云OSS实现相册功能
本文主要内容是利用阿里云对象存储OSS做图床，实现Hexo下Next主题的相册功能，本文首发于笔者博客
相册
前言
由于Next主题本身是没有实现相册的，所以相册功能需要手动添加，主要的内容是需要做一个图床，然后将本地图片上传至图床，在打开博客的时候从图床上请求并加载图片。
最终效果参见我的相册。
解决方案对比
可用的解决方案
-
用Github的一个仓库做图床
-
用七牛云做图床
-
用阿里云OSS做图床
Github
利用Github仓库做图床是一个最常用的解决方案，但是有很多限制，比如存储空间只有1GB，并且还会受到流量的限制，当图片越来越多或者图片很大的时候Github就不太适用了。
七牛云
七牛云确实是一个很好的解决方案，注册账号并实名认证之后会有10GB永久存储空间，10GB/月 HTTP国内流量，10GB/月 HTTP海外流量，但是七牛云会强制实名认证，并且需要上传手持身份证正面和反面的两张照片，所以这也是我没有用七牛云的原因，当然不在意的朋友可以忽略。
阿里云OSS
阿里云OSS，即阿里云对象存储，速度、安全这些便不用说了，收费方式比较复杂，最简单的方法是购买一个40GB的存储宝即可，一年9元钱，流量和请求使用默认的按量计费即可，流量费用00:00-08:00（闲时）：0.25元/GB，8:00-24:00（忙时）：0.50元/GB，请求费用0.01元/万次，显然，个人博客能达到GB流量/小时、万次访问的博主完全不会在乎这些费用了，未达到的个人博客收费不出意外的话应该每小时为0.00元，如下图所示：
消费明细
综上，我选择阿里云OSS。
创建阿里云OSS存储空间
创建
创建阿里云<i class="fa fa-arrow-right">账号开通阿里云OSS服务<i class="fa fa-arrow-right">购买一个40GB的存储资源包<i class="fa fa-arrow-right">创建储存空间
创建的时候将存储空间的读写权限设置为公共读。
获取阿里云OSS的EndPoint和外网访问域名
进入创建好的存储空间的管理页面，找到EndPoint和外网访问域名。
EndPoint和外网访问域名
获取阿里云OSS的Access Key
点击阿里云OSS控制台页面右边的Access Key按钮，进入该页面创建Access Key。
Access Key
安装OSS客户端
进入阿里云OSS控制台页面，在该页面的右上角点击更多，再点击OSS客户端下载进行安装。
安装后使用 上一步获取的AccessKeyId、 AccessKeySecret登录客户端，进入已经创建好的Bucket，创建两个文件夹，分别为photos和min_photos。
安装OSS的Python SDK
该SDK的运行环境为Python 2.6，2.7，3.3，3.4，3.5，并需要用到pip命令进行安装，未满足运行环境请移步百度自行搜索安装。
使用如下命令安装SDK：
pip install oss2
构建相册页面
注：本文将使用blog代替博客根目录
创建页面
使用如下命令在blog目录下创建photo页面
hexo new page photos
在主题的配置文件_config.yml中的menu选项下添加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
进入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 href="https://YourDomainName.com" 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>
添加插件
进入blog/themes/next/source/lib，创建文件夹album，然后将这个Github仓库中的assets文件夹、default-skin文件夹、data.json文件、ins.css文件、ins.js文件、photoswipe.css文件下载下来放到新建的album文件夹内，将该仓库中的photoswips.js文件、photoswipe-ui-default.js文件放到blog/themes/next/source/js/src内。
打开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外网访问域名。
配置插件
进入blog/themes/next/layout,在_layout.swig文件的</head>标签前加入如下引用：
<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>标签下添加如下代码：
{% 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 %}
进入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>
图片处理与上传
下载配置脚本
下载这个Github仓库，然后在该仓库的文件夹内创建两个文件夹，分别为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() # 翻转
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替换为你的博客根目录的名字。
使用脚本
将需要上传到博客相册的图片重命名为2018-5-1_图片的描述.jpg形式，日期年月日之间为-，日期与图片描述之间为_，然后将图片移动到刚才创建的photos文件夹下，然后使用如下命令进行图片裁剪并上传到阿里云OSS上。
python tool.py
执行脚本可能遇到的问题：
-
No module named 'PIL'
解决办法：执行
pip install Pillow
结语
感谢各位的阅读。
参考文章
更新于2018年11月10日：
- 修改pool.py的单词拼写错误
- 更新执行python命令可能出现的问题及解决办法
