照片墙的制作

作者 汪小祯 日期 2016-07-03
照片墙的制作

看了很多人的博客,心血来潮的突然想自己也弄个照片墙。
当然,因为服务器的原因,直接构建肯定是不行的,所以搜集了很多资料,最后整理下,将方法放在这里,希望能对有需要的人有帮助。

新建个照片页面

首先第一步要做的,自然是新建一个照片页面

hexo new page "photo"

然后在hexo___根目录___新建一个photos文件夹
注意是根目录,因为我们这个目录里面东西不上传至服务器里,上传至七牛云里

样式修改

修改我们刚刚新建的photo.md文件,加入以下代码

<link type="text/css" href="/fancybox/jquery.fancybox.css" rel="stylesheet">
<div class="instagram"><section class="archives album"><ul class="img-box-ul"></ul></section></div>
<script src="/js/photo.js"></script>

在hexo根目录下面新建一个tool.js文件
这个文件会读取photos里面的照片,并把照片名称保存在photo文件夹里面

"use strict";
const fs = require("fs");
const path = "photos";
fs.readdir(path, function (err, files) {
if (err) {
return;
}
let arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("source/photo/output.json", JSON.stringify(arr, null, "\t"));
return;
}
fs.stat(path + "/" + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
arr.push(files[index]);
}
iterator(index + 1);
})
}(0));
});

打开/thems/你的主题/source/js文件夹
新建photo.js文件,注意中间https://o90qqsid7.qnssl.com//photo/请替换为自己七牛云空间地址

define([], function () {
return {
page: 1,
offset: 20,
init: function () {
var that = this;
$.getJSON("/photo/output.json", function (data) {
that.render(that.page, data);
that.scroll(data);
});
},
render: function (page, data) {
var begin = (page - 1) * this.offset;
var end = page * this.offset;
if (begin >= data.length) return;
var html, li = "";
for (var i = begin; i < end && i < data.length; i++) {
li += '<li><div class="img-box">' +
'<a class="img-bg" rel="example_group" href="https://o90qqsid7.qnssl.com//photo/' + data[i] + '?raw=true"></a>' +
'<img lazy-src="https://o90qqsid7.qnssl.com//photo/' + data[i] + '?imageView2/1/w/225/h/225/interlace/0/q/100&raw=true" />' +
'</li>';
}
$(".img-box-ul").append(li);
$(".img-box-ul").lazyload();
$("a[rel=example_group]").fancybox();
},
scroll: function (data) {
var that = this;
$(window).scroll(function() {
var windowPageYOffset = window.pageYOffset;
var windowPageYOffsetAddHeight = windowPageYOffset + window.innerHeight;
var sensitivity = 0;
var offsetTop = $(".instagram").offset().top + $(".instagram").height();
if (offsetTop >= windowPageYOffset && offsetTop < windowPageYOffsetAddHeight + sensitivity) {
that.render(++that.page, data);
}
})
}
}
})

修改同目录下main.js
在尾部添加代码

if($(".instagram").length) {
require(['/js/photo.js', '/fancybox/jquery.fancybox.js', '/js/jquery.lazyload.js'], function(obj) {
obj.init();
});
}

测试

hexo g

hexo d

完工

参考博客

这里参考了以下博客
往事随风
那时候的我
翊翌
Hexo折腾记