如何在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="/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

转载于:https://www.cnblogs.com/fchange/p/8465144.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适用于MongoDB和Mongometer的SpiderMonkey至V8

通过10gen将MongoDB 2.3 / 2.4的默认JavaScript引擎从SpiderMonkey切换到V8&#xff0c;我想我将借此机会使用mongometer比较这些发行版的相对性能。 作为安全专家&#xff0c;我真的应该首先研究“ 其他身份验证功能” ……嘿。 我将记录比较过程中所采取的步骤&#xff08;包…

百度联盟广告如何理解按父容器宽度

创建百度联盟广告位的时候&#xff0c;选择按父容器宽度展示&#xff0c;但是在加入之后&#xff0c;查看代码发现广告的宽度为页面的宽度&#xff0c;并不是希望的父级的宽度&#xff0c; 如图在这里查看&#xff1a; 解析&#xff1a;百度联盟广告自动生成的div按父级的div宽…

php中文字转,PHP文字转图片功能原理与实现方法分析

本文实例讲述了PHP文字转图片功能。分享给大家供大家参考&#xff0c;具体如下&#xff1a;这项功能主要用于对邮箱地址、手机等可能被网络爬虫抓取的重要信息的处理。将文字转化为图片绝对是个好注意。验证码的基本生成原理也与此差不多&#xff0c;只是对再对文字转化为图片的…

Java 系列之spring学习--spring搭建(一)

一、新建maven项目 二、引入spring jar包 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0…

php简单分页,php简单实现分页查询的方法

这篇文章主要为大家详细介绍了php简单实现分页查询的方法&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下关于php,最近学了好多&#xff0c;老师跟我们说&#xff0c;现在学的都是php的核心部分&#xff0c;所以我比较注意了一下&#xff0c;也多练习…

django用户认证系统——登录4

用户已经能够在我们的网站注册了&#xff0c;注册就是为了登录&#xff0c;接下来我们为用户提供登录功能。和注册不同的是&#xff0c;Django 已经为我们写好了登录功能的全部代码&#xff0c;我们不必像之前处理注册流程那样费劲了。只需几分钟的简单配置&#xff0c;就可为用…

web前端黑客技术揭秘 6.漏洞挖掘

6.1  普通XSS漏洞自动化挖掘思路 6.1.1  URL上的玄机 6.1.2  HTML中的玄机 2.HTML标签之内 6.1.3  请求中的玄机 6.1.4  关于存储型XSS挖掘 6.2.1  HTML与JavaScript自解码机制 <input type"button" id"exec_btn" value"exec" on…

Webpack基础使用

目录 一.什么是Webpack 二.为什么要使用Webpack 三.Webpack的使用 1.下载yarn包管理器 2.Webpack的安装 3.Webpack的简单使用 4.效果 四.Webpack打包流程 一.什么是Webpack Webpack是一个静态模块打包工具 二.为什么要使用Webpack 在开发中&#xff0c;我们常常会遇到…

阿帕奇骆驼遇见Redis

键值商店的兰博基尼 Camel是最好的面包集成框架&#xff0c;在本文中&#xff0c;我将向您展示如何通过利用另一个出色的项目Redis使它更加强大。 Camel 2.11即将发布&#xff0c;具有许多新功能&#xff0c;错误修复和组件。 这些新组件中的几个是我创作的&#xff0c; red…

HTML 教程- (HTML5 标准)摘抄笔记

HTML 教程- (HTML5 标准) 教程网址&#xff1a;http://www.runoob.com/html/html-tutorial.html http://blog.csdn.net/ljfbest/article/details/6700148 HTML版本 从初期的网络诞生后&#xff0c;已经出现了许多HTML版本: 版本发布时间HTML1991HTML 1993HTML 2.01995HTML 3…

Java EE CDI ConversationScoped示例

在本教程中&#xff0c;我们将向您展示如何在Web应用程序中创建和使用ConversationScoped Bean。 在CDI中&#xff0c;bean是定义应用程序状态和/或逻辑的上下文对象的源。 如果容器可以根据CDI规范中定义的生命周期上下文模型来管理其实例的生命周期&#xff0c;则Java EE组件…

Git 中文教程

以下内容转载自&#xff1a;http://www.open-open.com/lib/view/open1328928294702.html Git是一个分布式的版本控制工具&#xff0c;本篇文章从介绍Git开始&#xff0c;重点 在于介绍Git的基本命令和使用技巧&#xff0c;让你尝试使用Git的同时&#xff0c;体验到原来一个版本…

php markdown的转化函数,markdown公式转为知乎格式

在知乎中写技术类文章&#xff0c;经常会用到markdown知乎文章可以导入markdown格式&#xff0c;但是不支持Latex公式。知乎大神提供了替代方案&#xff1a; https://zhuanlan.zhihu.com/p/69142198为实现自动化&#xff0c;用python将其简易实现&#xff0c;代码如下&#xff…

Java EE CDI Producer方法教程

这是CDI Producer方法的教程。 在CDI中&#xff0c;生产者方法生成一个可以注入的对象。 当我们要注入本身不是bean的对象&#xff0c;要注入的对象的具体类型在运行时可能有所不同&#xff0c;或者当对象需要一些bean构造函数不执行的自定义初始化时&#xff0c;可以使用生产者…

牛客网Java刷题知识点之方法覆盖(方法重写)和方法重载的区别

不多说&#xff0c;直接上干货&#xff01; https://www.nowcoder.com/ta/review-java/review?query&asctrue&order&page6 方法重写的原则&#xff1a; 重写方法的方法名称、参数列表必须与原方法的相同&#xff0c;返回类型可以相同也可以是原类型的子类型(从Jav…

AngularJS的ng-repeat显示属性名和属性值

代码下载&#xff1a;https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.rar 代码&#xff1a; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app&qu…

2018.2.28(延迟加载和缓存)

1.延迟加载 编写配置 测试类 2.侵入式延迟 3.深度延迟 4.一级缓存 5.二级缓存 配置 测试类 转载于:https://www.cnblogs.com/xu06123/p/8483245.html

小爬麦子学院教师

任务描述&#xff1a;将麦子学院指定网页下教师信息&#xff08;姓名&#xff0c;职称&#xff0c;介绍信息&#xff09;爬取下来并保存到数据库。 1.页面分析&#xff1a; 2.代码&#xff1a; mydb.py: #!/usr/bin/env/python #coding:utf-8 操作数据库import MySQLdb as dbcl…

[HNOI2015] 落忆枫音

题目描述 「恒逸&#xff0c;你相信灵魂的存在吗&#xff1f;」 郭恒逸和姚枫茜漫步在枫音乡的街道上。望着漫天飞舞的红枫&#xff0c;枫茜突然问出这样一个问题。 「相信吧。不然我们是什么&#xff0c;一团肉吗&#xff1f;要不是有灵魂......我们也不可能再见到你姐姐吧。」…

Java中的模板方法设计模式

模板方法模式是一种行为设计模式&#xff0c;它为算法提供了基础方法&#xff0c;称为模板方法&#xff0c;该方法将其某些步骤推迟到子类中&#xff0c;因此算法结构相同&#xff0c;但某些步骤可以由子类根据上下文重新定义。 模板是指预设格式&#xff0c;例如HTML模板&…