如何在Hexo中实现自适应响应式相册功能

用最清晰简洁的方法整合一个响应式相册

效果

技术选型

• 由于我选用的主题使用了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="/