半夜摸鱼的时候突然想搞个相册，google了一圈教程，然后发现大概是因为不同版本的hexo next主题layout的原理不同，前前后后试了大概4种方法，没一个能跑的……
万念俱灰时转念一想，我不就是想做个静态的图集页面吗，研究那么多JS渲染干嘛？？于是有了这个逆练css实现的相册界面_(:з」∠)_
19.3.31 更新：因为这篇文章在谷歌排名靠前了所以更新了一个模板文档！【点击此处】跳转XD
.+†+.
首先是实现的效果浏览，为了防止各位照我的方法做完发现不是自己想要的↓
已经实现的效果：
- 三等分列√
- 按图片原长宽比平铺√
- 本地保存图片√
- 与文章内插图保持格式统一√
待实现的效果：
- 点击查看大图○
我觉得这个效果后续还是挺好实现的，加个超链接新窗口打开图片就OK了，但是今天又通了个宵有点困所以写鸽置一下……
那么接下来是实现过程XD
创建相册页面
在hexo根目录下执行：
hexo new page photos
会自动在hexo\source目录下生成photos文件夹，然后打开对应的主题设置界面设置导航栏的文字内容和图标，跟创建别的页面是一样的。
然后注意要在标题底下加一行comments: false来关闭评论。
图片的存放与处理
在刚生成的hexo\source\photos目录下新建一个文件夹存放图片，我是命名为img了。
然后这种方法是把你的相册图片和blog内容一起推送到git pages的，加载的时候也会一起读取，所以为了读取速度最好把图片缩放一下。
注意事项：不需要统一高度，不需要统一宽度，什么都不需要统一，只要文件大小合适就可以了！
然后就可以开始创建相册内容。
编辑相册内容
打开刚才生成的photos/index.md，添加如下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div class="gallery-page">
<div class="gallery-list">
<div class="gallery-column">
<img src="img/图片1.xxx">
<img src="img/图片2.xxx">
<img src="img/图片3.xxx">
</div>
<div class="gallery-column">
<img src="img/...">
</div>
<div class="gallery-column">
<img src="img/..x">
</div>
</div>
</div>
这个时候在本地浏览中打开相册页面，应该有图片依次出现在页面上了，如果没有请检查图片路径。
我用的是分三列的代码，如果你只要分两列就去掉一个<div class="gallery-column">，分四列就再加一个，以此类推。
实现图片分栏排列
为了实现分栏+顶端对齐的效果我用的是flex布局，参考了这篇知乎文章：https://zhuanlan.zhihu.com/p/25303493
在用户自定义css文件custom.styl中添加如下代码：1
2
3
4
5
6.gallery-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
然后回本地刷新一下，相册的形状就完成了√
如果发现有哪一列的图片特别长，调整一下index.md里的html代码把超长图片补到最短的一列即可。
实现图片倒序显示（可选）
因为正常的书写习惯是从上到下写图片列表，但是相册显示的时候一般还是把最近图片放在顶端比较好。
用css的flex布局可以直接实现倒序显示，当然你也可以直接倒序写图片列表，就不用看这里了。
在用户自定义css文件custom.styl中添加如下代码：1
2
3
4.gallery-column {
display: flex;
flex-direction: column-reverse;
}
至此就全部完成啦~
装饰篇（可选）
然后这个相册其实还是一个普通的markdown文件，你还可以在相册的上方和下方写点小作文，比如我的：
甚至可以加些小插件什么的，正文可以实现的效果都能实现。这个相册大概就算是一个加强版的文章插图吧……
因为完全不涉及js代码做出来难免非常简陋OTLLL但是这种方法有一个优点，就是可以用相同的方式插入到正文里，稍微拓展一下似乎可以实现相册分类的效果？总之等有空的时候再研究啦~
模板文档
不知道为啥这篇文章在谷歌搜索里排到第一了OTL所以更新了一下模板文档，详情可以参考我后面写过的另一篇进阶版相册：
模板文档下载地址：