如何在Hexo中实现自适应响应式相册功能
2018-02-24 12:07
239 查看
用最清晰简洁的方法整合一个响应式相册
效果
http://fancyapps.com/fancybox/3/
图片加载可能会太慢,所以还需要一个图片延迟加载插件 Lazyload
想使用瀑布流作为展示,粗略了解了下,便使用开源的MiniGrid,原因是它很小巧也刚好满足需求(ps:它的文档让我看了很捉急,不完善的文档是个大坑)
资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的
然后就可以在文件夹
这里使用
现在,我们就有一个相册页面了,接下来的问题是怎么批量加载那些照片。
在博客主文件夹下新建
每次在相册中更新照片后都要在控制台
它会生成一个json文件,带有每张照片的长宽及文件名。
需要它的宽高是因为我们需要它满足瀑布流样式。
output.json样式类似于:
js文件也可以放在Images文件夹下,只需要将相册页面加载的
如果你也使用了这个的话,在
效果
技术选型
由于我选用的主题使用了fancyBox作为图片弹出展示的框架,查看后表示很不错,能满足需要http://fancyapps.com/fancybox/3/
图片加载可能会太慢,所以还需要一个图片延迟加载插件 Lazyload
想使用瀑布流作为展示,粗略了解了下,便使用开源的MiniGrid,原因是它很小巧也刚好满足需求(ps:它的文档让我看了很捉急,不完善的文档是个大坑)
相册文件夹
按照Hexo官方给的建议资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于
![](/images/image.jpg)的方法访问它们。
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的
post_asset_folder选项设为
true来打开。
post_asset_folder: true
然后就可以在文件夹
source下新建一个相册文件夹
Images,将照片放入这个文件夹
相册页面
我们需要一个相册页面以加载所有照片--- title: 相册 noDate: 'true' --- <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script> <script src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script> <div class="ImageGrid"></div> <script src="/js/photo.js"></script>
这里使用
noDate来自定义一些HTML数据,加载一些JS文件(minigrid在bootcss中还是1.*的版本,只好使用它推荐的cdn了),其中
photo.js是自定义的,用来加载照片,稍后提到。
现在,我们就有一个相册页面了,接下来的问题是怎么批量加载那些照片。
脚本
大家可以集思广益,我是用的是一个教程中的脚本改的,与其思路一致。在博客主文件夹下新建
tool.js:
"use strict"; const fs = require("fs"); const sizeOf = require('image-size'); const path = "./source/Images"; const outputfile = "./source/Images/output.json"; var dimensions; fs.readdir(path, function (err, files) { if (err) { return; } let arr = []; (function iterator(index) { if (index == files.length) { fs.writeFile(outputfile, JSON.stringify(arr, null, "\t")); return; } fs.stat(path + "/" + files[index], function (err, stats) { if (err) { return; } if (stats.isFile()) { dimensions = sizeOf(path + "/" + files[index]); console.log(dimensions.width, dimensions.height); arr.push(dimensions.width + '.' + dimensions.height + ' ' + files[index]); } iterator(index + 1); }) }(0)); });
每次在相册中更新照片后都要在控制台
node tool.js一下,以便更新数据。
它会生成一个json文件,带有每张照片的长宽及文件名。
需要它的宽高是因为我们需要它满足瀑布流样式。
output.json样式类似于:
[ "3120.4160 发票.jpg", "516.516 头像.jpg", "402.180 录音.jpeg", "720.758 截图1.jpg", "720.978 截图2.jpg" ]
photo.js
photo ={ 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 += '<div class="card">' + '<div class="ImageInCard">' + '<a data-fancybox="gallery" href="/Images/' + data[i] + '">' + '<img src="/Images/' + data[i] + '"/>' + '</a>' + '</div>' + '<div class="TextInCard">'+data[i].split('.')[0]+'</div>' + '</div>' } $(".ImageGrid").append(li); $(".ImageGrid").lazyload(); this.minigrid(); }, minigrid: function() { var grid = new Minigrid({ container: '.ImageGrid', item: '.card', gutter: 12 }); grid.mount(); $(window).resize(function() { grid.mount(); }); } } photo.init();
js文件也可以放在Images文件夹下,只需要将相册页面加载的
<script src="/js/photo.js"></script>改成
<script src="/Images/photo.js"></script>即可。
css
这个样式是我自己写的,大家可以按照自己的想法自行更改:.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto;text-align: center;} .card {width:160px;height:260px;overflow: hidden;} .ImageInCard {height:185px} .ImageInCard img {height:100%;width: auto;padding: 0 0 0 0; } .TextInCard {height:75;background-color: #fff;}
自动构建
我是使用travis-ci自动构建的。(用过以后表示很鸡肋)如果你也使用了这个的话,在
travis.yml中的
script或者
before_script,添加一句
node tool.js,就可以将相册脚本也加入自动构建:
script: - node tool.js - hexo g
相关文章推荐
- [置顶] viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)
- 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
- 小程序中如何实现操作菜单的显示(点击选取图片,弹出菜单拍摄、相册)功能
- Hexo+Github实现相册功能
- C# 如何实现记住密码功能
- 如何在asp.net中实现返回上一页的功能
- Android系统如何实现UI的自适应
- 如何在asp.net中实现返回上一页的功能
- 如何在微信的自定义菜单上实现“历史消息”功能?
- 如何用C#在winform中实现简单的查找功能
- ASP.NET 如何实现抓屏功能
- C#中如何实现JAVA中的String.replaceAll()方法功能
- Asp.net如何使用access数据库做profile实现按照区域显示相应语言功能
- 如何用小程序功能实现流量变现
- Android应用如何监听自己是否被卸载及卸载反馈功能的实现(第二版)
- 如何作证书并注册控件,并实现打包下载注册的功能(接前两片文章)(3)
- 移动质监执法通项目用到如何实现拍照上传功能
- 如何实现ios屏幕的横竖屏自适应
- C# 如何实现记住密码功能
- hexo站内搜索功能实现