Hexo - 相册解决方案 - Icarus主题

前言

为了蛋疼的执念，也为了对百度空间的缅怀，自己执意要添加一个相册模块。 不需要很复杂，简单就好 主要需求有：

• 能够展示照片（废话）
• 能够点击照片放大
• 能够左右翻阅照片
• 能够显示照片对应文件名
• 有缩略图功能
• 随着页面滚动分段加载
• 自适应排列

github对比vps的主要优势在于其不限制流量、访问数等等参数，且国内外访问速度都不慢。作为一个图床比较合适。 可惜github对于单仓库貌似有1GB大小限制。由于并不需要传大文件，暂时忽略这个问题。

起手

干完以后发现网上的方案都是天才吖~ 屎

主要参考了yilia主题的两篇博文： http://luckykun.com/work/2016-05-20/hexo-advance.html#修改themes-yilia-js-photo-js： http://zlwis.me/photo/

关于fancybox： 一般博文里使用直接用以下方式即可： http://sowm.cn/aips/article/0E1C44647F2F34C99E070ACF324407E7.html

/**
* Syntax:
*  { % fancybox /path/to/image [/path/to/thumbnail] [title] % }
*/

先去看fancybox的documentation。用起来比较简单，直接调用就好

$('.fancybox').fancybox();

由于Icarus主题作者ppoffice贴心地在main.js配置好了fancybox载入相关的内容，我们只需要将需要载入的图片调整好标签的格式就行。 于是乎，就按照上面的需求开始设计这个相册。

首先建立导航栏中的相册gallery分类；其次在该分类下放indexpage。index.md配置如下：

---
title: 相册
layout: "page"
comments: false
noshare: true
---
<link type="text/css" href="/cht/vendor/fancybox/jquery.fancybox.css" rel="stylesheet">
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
<div class="instagram">
    <section class="archives album">
        <ul class="img-box-ul"></ul>        
    </section>
</div>

此处加入了一个require.js。主要原因在于作者没有学过js也不想看文档，就想照猫画虎。参考的博主是这么做的，直接学习。 需要注意的是，requirejs使用时有一些限制，具体需要参考其文档。一个错误使用方法造成的报错可参考以下页面： http://luckykun.com/photos/http://requirejs.org/docs/errors.html#mismatch 报错：Uncaught Error: Mismatched anonymous define()

js的修改

由于yilia主题和icarus主题所用的js不尽相同，文件夹结构也不同，很多地方需要调整。 首先，为了区分相册页面中的图片与普通博文中的图片，上面在标签中添加了Instagram的属性。 在main.js中需要对这个标签进行处理：

//insta
if($('.instagram').length) {
    var bp = document.createElement("script");
	bp.src = "/js/photo.js";
	var s = document.getElementsByTagName("script")[0];
	s.parentNode.insertBefore(bp, s),
	require(['/js/photo.js', '/js/jquery.lazyload.js', '/vendor/fancybox/jquery.fancybox.js'], function(obj) {
        obj.init();
    });
}

接着来到require到的三个js。首先是photo.js 主要实现的功能就是从另一个repo中读取照片链接，在页面上加载并改变尺寸装到fancybox里，最后实现滚动异步加载。 为了节省空间并没有专门生成thumbnail，只得以费流量为代价了（不痛不痒） 具体实现请参考仓库中代码（偷懒）

主要难点

其实没啥难点，就是因为自己比较倔非得不看文档瞎写。

总之，实现请参考： https://yo1995.github.io/cht/gallery/

终于搞定了，最后在fancybox的css中加一项

.img-box-ul li {
	float: left;
	list-style-type:none;
	margin: 18px;
}

这样可以使图片列表横向载入

最后

网上的方案看的我尴尬都犯了，有个用一样主题的家伙直接用fancybox加载结果还是一堆叉叉…… 自己写的总还是费了点脑筋的……

8.19 更新

又重新倒腾了一下，主要解决了横向排列的适配问题。 可以考虑的方案主要有两种：

• clearfix + float: left
• display: inline

本文采用了后一种方案，主要为了定死相册显示的样式。 另外更新了标签中关于图片标题的展示方法。

另外，新加入了缩略图功能。由于本人js并没学过，因而用Python + PIL写了个简单的缩略图生成器，放到每次初始化的代码里运行一下。 这样载入的时候就不必等着转菊花啦哈哈！

具体样例参考:

https://yo1995.github.io/cht/awards/

• 异步载入
• 缩略图
• 点击放大键盘翻页
• 响应式设计