前言

突发奇想，想做个相册。just do it!

网上有太多的添加相册的教程，我看了一天最后经过挑选以后开始实践，最后发现居然选的是一条hard模式。经过填坑以后，把更为简洁的路线给抽取出来。本教程利用新建hexo页面和加载github仓库的照片为例。基本步骤包括以下两块：一是构建github相册源，二是新建photo的页面。

理论上讲这个教程也适用于七牛云、腾讯云、阿里云等

构建Github测试相册源

由于构建完整的相册源需要多个步骤，因此这里先构建一个相册源来测试

相册源的选择。

本地存储：方便！但是流量和速度可能有影响，本地生成静态博客速度比价慢，不建议。
github存储：推荐！免费，也不复杂，流量和速度可以接受。
第三方云存储：不太会用（七牛云、腾讯云、阿里云.如果有想法可以选择其他,对比三种云存储）

在github中新建仓库Blog_Album，

放入两个文件夹,在两个文件各放入一张照片，分别是原图和缩略图。
文件名类似于2013-07-25_描述.jpg

序号文件夹描述

1 photos 原图

2 min_photos 缩略图

序号	文件夹	描述
1	photos	原图
2	min_photos	缩略图

添加相册页面

目前掌握的就是新建photo页面，加载js动态生成html页面，其他的暂时不懂。

添加photo配置文件并修改

在yourBlog\source\下添加photos文件夹，然后放入以下文件

序号	文件	类别	描述
1	index.md	md	photo页面文件（动态）
2	photo.js	js	读取数据
3	data.json	json	数据文件
4	ins.css	css	样式配置1
5	photoswipe.css	css	样式配置2
6	assets	文件夹	空缩略图
7	default-skin	文件夹	样式配置3

修改photo配置文件index.md

替换以下链接为你的博客域名
1
<a href="https://huguohua.cn/"

修改photo配置文件photo\.js

将第120行左右修改为自己的相册源路径

1
2

var minSrc = 'https://raw.githubusercontent.com/guohuahu/Blog_Album/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/guohuahu/Blog_Album/master/photos/' + data.link[i];

添加主题js文件并修改

在yourBlog/themes/next7.0.0/source/js/src下放入（如果没有scr文件夹，可以新建）

序号文件类别描述

1 photoswipe.min.js js 图片浏览插件

2 photoswipe-ui-default.min.js js 图片浏览插件

序号	文件	类别	描述
1	photoswipe.min.js	js	图片浏览插件
2	photoswipe-ui-default.min.js	js	图片浏览插件

修改post-details.swig

在 ‘yourBlog/themes/next7.0.0/layout/_scripts/pages/post-details.swig’文件中添加：

1
2

<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>

修改_layout.swig

在’yourBlog/themes/next7.0.0/layout/_layout.swig’文件中，

<head>标签以前添加(注意是html标签内，head标签以前)

1 2	<script src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script> <script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.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>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <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 %}

可能遇到的错误

图片总是加载中

这个错误是弄了最久的，而且超出了我的能力范围。当时弄了很久搞不定，就找了淘宝上的小哥hj不死少年（店铺hojun的万事屋）帮忙排查。那天他远程操作的时候网络太卡，折腾了1-2个小时到了凌晨。最后他也熬不住了，跟我说懒得搞了。

但是他指出问题所在:与安装了aplayer插件冲突有关! Aplayer会自动添加一段代码到html头部，导致生成的html报错。要不卸载这个播放器插件，要不更换一个简单点的相册。

具体原因是
官方说明如下：

使用 after_post_render 会有重复载入 APlayer.js 的情况（例如当一个页面中存在多篇博客时），以及一些非文章页面将无法使用本插件。

如果想完全解决这个问题，用户可能需要自己在主题文件中手动加入 Aplayer.js 与 Meting.js，同时关闭插件的自动脚本插入功能：　　
1
2
aplayer:
asset_inject: false
在hexo配置文件里有了这个设置，基本上就没问题了。

构建完整的Github相册源

在第一步构建测试相册源当中，其实已经搭建了相册源的框架。这部分将介绍如何批量处理文件，包括文件的重命名、批量制作缩略图、生成data.json和上传到github.

文件重命名

有很多文件重命名的工具可以用，我这里使用lightroom来实现。
将所有文件重命名为2013-07-25_描述.jpg这种形式

批量制作缩略图

理论上页可以直接使用lightroom批量导出尺寸较小的图

生成data.json

原理：运行make-json.py，将自动读入photo文件夹中的所有图片，然后生成data.json。

注意修改文件末尾修改路径参数：

1 2	if __name__ == "__main__": handle_photo('Blog_Album/photos/', 'E:/Blog/source/photos/data.json')

前面的路径是photo文件夹路径，后面路径是data.json路径
由于python对中文支持不好，建议所有的路径都不要用中文。

上传到github

假设处理好的图片都已经放在Blog_Album\min_photos和Blog_Album\photos文件夹下了

在Blog_Album下，打开git bash，然后运行git clone下载对应仓库
1
git clone https://github.com/GuohuaHu/Blog_Album.git
初始化本地git
1
git init
添加所有文件
1
git add .
提交所有文件
1
git commit -m "提一次提交"

链接仓库（第一次需要）

1	git remote add origin git@github.com:*/*.git

拉取仓库
1
git pull origin master
推送到仓库
1
git push origin master

注意：如果没有权限，还需要设置ssh-keygen
参考：https://blog.csdn.net/zamamiro/article/details/70172900

到这里，本教程就结束了！

使用python批量处理图片的教程和坑

这部分为什么单独拿出来？网上提供了处理图片的python代码，但是对于没有配置好python环境的人来讲简直步步是坑。

其实批量处理图片就两步，

第一步运行compress.py生成缩略图，
第二步运行make-json.py生成data.json

但是配置python环境还是比较费事的。

python和pip配置

检查python安装

安装python以后，在cmd中输入以下命令，如果返回正常路径表示ok。
1
where python
然后设置系统环境变量包含python路径：

在高级系统设置–环境变量–系统变量中找到path双击，添加python所在的路径（也就是python.exe所在的路径）,对我个人而言是，
1
2
C:\Python27\ArcGIS10.4
C:\Python27\ArcGISx6410.4
验证python安装：

设置完环境变量以后，重启cmd使设置生效，然后在cmd中输入
1
2
where python
python --verison
可返回路径、版本号。
检查pip

搜索电脑里的pip.exe所在路径，然后添加到系统环境变量。对我个人而言是:
1
2
C:\Python27\ArcGIS10.4\Scripts
C:\Python27\ArcGISx6410.4\Scripts
命令行中输入
1
pip --verison
可以得到版本号。
(https://blog.csdn.net/BetterFate/article/details/71123976)

如何用pip安装pillow库和opencv-python库？

pillow库是啥？

一个python的图像处理库，它是另一个图像处理库PIL的一个分支，但是两个只能装一个。
pillow库怎么安装？

命令行
1
pip install Pillow
可添加参数（–target=d:\xxx\xxx），例如
1
pip install Pillow --target=C:\Python27\Pillow
验证安装是否成功。
重新输入安装命令，见到成功安装提示和安装路径即可。
1
pip install Pillow
或者输入python，进入python环境，然后输入
1
2
#python
from PIL import Image
导入成功的话也说明安装成功
同样的安装opencv-python

命令行
1
pip install opencv-python
注意：安装opencv-python会重复安装numpy导致报错，所以需要卸载完所有的numpy，然后重新安装numpy
(参考：https://blog.csdn.net/qq_38228254/article/details/88880189)
其他参考

（https://blog.csdn.net/weixin_44345862/article/details/87003478）
（https://blog.csdn.net/u014513863/article/details/83118176）

运行py文件的方式

几种运行方式，

双击运行

(需要提前制定打开方式，比如制定到python.exe，如果安装了其他IDE，可能双击时会被其他软件打开)
拖到命令行运行，在cmd环境下输入
1
python compress.py
（注意：compress.py代码中使用相对路径读取文件是，所以需要cd到有photos和min_photos的文件夹下）
python shell 运行

（发现无法导入PIL模块）
pycharm运行(推荐)

（同样发现无法导入PIL模块，只有在python全新配置python和pillow环境的才能正常运行）

相册显示优化

如何设置缩略图大小和间距？

在ins.css文件中修改

.instagram .thumb {
	width: 20%;	
	padding-bottom: 20%;	
	margin: 10px;
}

如何自动获取缩略图大小

添加size变量

设置data-size=size
修改后如图所示

var size = data.size[i];
liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\
                  <a href="' + src + '" itemprop="contentUrl" data-size="' + size + '" data-type="' + type + '" data-target="' + target + '">\
                    <img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="./assets/empty.png" itemprop="thumbnail" onload="lzld(this)">\

如何将日期显示补齐零：

在photo.js文件中113行修改日期显示

假设data.month是月份数字，可利用(‘00’ + data.month).slice(-2)补齐零
1
ulTmpl = ulTmpl + '<section class="archives album"><h1 class="year">' + data.year + '-' + ('00' + data.month).slice(-2) +