我们分析一下,想要获取相册图片,首先得拿到图片得线上地址,其次,我们可以想到,既然我们的博客内容都放在了github得服务器,那么图片又何尝不能呢?
使用hexo搭建博客的同学都知道,github上会建立一个名为username.github.io的仓库,而且仓库只存储了整个项目的一部分(source文件夹的内容),而且貌似这个仓库有大小限制,总之就是说不能把图片放在这个仓库里。
我们再考虑另一个问题,假如我们有一天需要在另一台电脑写博客怎么办?所以博客备份就是需要的了。那么好,我们在Github 上再建一个仓库,用来存储整个博客项目的文件,假如某一天换个环境,直接全部down下来,就能拿到所有文章的源文件了,所以正好,我们可以在根目录下新建一个photos文件夹用来存放相册需要展示的图片文件了。
ok,分析结束,敲定技术方案:
我们新建文件夹photos用来存放图片文件,然后新建一个基于nodejs的js文件用来读取所有图片再生成一个json接口文件供相册页面的js文件使用。
存放照片
在博客的根目录下创建一个photos的文件夹,里面存放你想要展示的照片文件。然后把整个项目部署到github上,才能访问到图片的线上地址。
生成json文件
在根目录下创建一个nodejs文件tool.js,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| "use strict"; var fs = require("fs"); var path = "./photos/"; fs.readdir(path, function (err, files) { if (err) { return; } var arr = []; (function iterator(index) { if (index == files.length) { fs.writeFile("./source/photos/data.json", JSON.stringify(arr, null, "\t")); console.log('get img success!'); return; } fs.stat(path + files[index], function (err, stats) { if (err) { return; } if (stats.isFile()) { arr.push(files[index]); } iterator(index + 1); }) }(0)); });
|
运行这个文件node tool.js,运行之后,会在/source/photos/目录下创建一个data.json文件,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| [ "IMG_0011.JPG", "IMG_0019.JPG", "IMG_0020.JPG", "IMG_0022.JPG", "IMG_0045.JPG", "IMG_0099.JPG", "IMG_0106.JPG", "IMG_0191.JPG", "IMG_0306.JPG", "IMG_0438.JPG", "IMG_0451.JPG", "IMG_0648.JPG", "IMG_0670.JPG", "IMG_0842.JPG", "IMG_1078.JPG", "IMG_1239.JPG", "IMG_1429.JPG", "IMG_1634.JPG" ]
|
每次修改photos文件夹里的照片,都得运行一下这个js文件,以更新生成的data.json文件。
创建相册页面
在根目录下执行命令:
hexo page photos
会在source/photos目录下生成一个index.md文件,编辑文件内容如下:
1 2 3 4 5 6
| <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>
|
修改themes/yilia/js/photo.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| 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://github.com/xiaohang96/blog/blob/master/photos/' + data[i] + '?raw=true"></a>' + '<img lazy-src="https://github.com/xiaohang96/blog/blob/master/photos/' + data[i] + '?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); } }) } } })
|
上述文件读取json文件,将图片的线上url拼接起来渲染在页面上,相册样式使用yilia主题提供。然后上传这些文件,根据自定义的路径访问url,就能看到相册了。那么,到这里就基本完成了相册的制作。