Icarus主题-相册解决方案

2016-08-19

html

css, hexo, html, js

Catalogue

1. Icarus主题-相册解决方案
2. 8.19 更新

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

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

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

1	$('.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

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