Hexo next 博客增加瀑布流相册页面

参考:asdfv1929’s Home - Hexo NexT主题内添加相册功能

要展示自己拍摄的一些照片,可以给博客添加一个瀑布流的相册页面。

1. 创建页面和导航栏

首先新建相册页面 hexo new page photos,这样会在 /source/ 下创建 photos/index.md,在其中添加 type: picture

之后在主题配置文件中对应位置 menu 里添加 photos: /photos || camera-retro ,这样生成后就有导航栏菜单了。

2. json 文件处理图片信息

在博客根目录的 /scripts/ 文件夹下新建一个 phototool.js 文件,内容如下。主要功能是访问照片文件夹,获取每张照片的大小和文件名,并生成对应的 json 文件:

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
"use strict";
const fs = require("fs");
const sizeOf = require('image-size');
//本地照片所在目录
const path = "source/photos/images";
//要放置生成的照片信息文件目录,建议直接放在 source/photos/ 文件夹下
const output = "source/photos/photoslist.json";
var dimensions;
fs.readdir(path, function (err, files) {
if (err) {
return;
}
let arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFileSync(output, 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));
});

创建好并把照片放在目录后,执行以下命令:

1
2
3
cd <folder-path>  #定位到 Hexo 博客目录
npm install image-size #如果已安装了 image-size 可以跳过
node scripts/phototool.js #生成对应的 json 文件

node script/phototool.js这个步骤以后可以不用手动执行,每次 hexo s 或者 hexo deploy 时候会被自动执行。 json 文件样例如下:

1
2
3
4
5
6
7
8
9
[
"4032.3024 IMG_0391.JPG",
"12500.3874 IMG_0404.JPG",
"4032.3024 IMG_0416.JPG",
"4032.3024 IMG_0424.JPG",
"3024.4032 IMG_0427.JPG",
"4032.3024 IMG_0429.JPG",
"4032.3024 IMG_0430.JPG"
]

3. photo.js 和 minigrid.min.js

/themes/next/source/js/src/ 目录下创建一个 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
47
48
49
50
51
photo ={
page: 1,
//offset 用于设置照片数量的上限
offset: 100,
init: function () {
var that = this;
//这里设置的是刚才生成的 json 文件路径
$.getJSON("/photos/photoslist.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, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
for (var i = begin; i < end && i < data.length; i++) {
imgNameWithPattern = data[i].split(' ')[1];
imgName = imgNameWithPattern.split('.')[0]
imageSize = data[i].split(' ')[0];
imageX = imageSize.split('.')[0];
imageY = imageSize.split('.')[1];
//这里 250 指的是图片的宽度,可以根据自己的需要调整相册中照片的大小
li += '<div class="card" style="width:250px">' +
'<div class="ImageInCard" style="height:'+ 250 * imageY / imageX + 'px">' +
//href 和 src 的链接地址是相册照片外部链接,也可以放博客目录里
'<a data-fancybox="gallery" href="/photos/images/' + imgNameWithPattern + '?raw=true" data-caption="' + imgName + '">' +
'<img src="/photos/images/' + imgNameWithPattern + '?raw=true"/>' +
'</a>' +
'</div>' +
// '<div class="TextInCard">' + imgName + '</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();

minigrid.min.js 可以 下载 获得,放在同样的目录下。

然后如果指向让两个文件在相册页加载,需要修改 /themes/next/layout/_scripts/commons.swig为以下内容,这里的判断语句表示如果页面的类型是 picture 就加载 minigrid.min.jsphoto.js(注意,其他的 js 文件你的可能和我不一样,请将直接原本的内容放在 else 中,比如我额外增加了一个 canvasline.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% if page.type ==='picture' %}
{%
set js_commons = [
'src/utils.js',
'src/motion.js',
'src/minigrid.min.js',
'src/photo.js',
'src/canvasline.js'
]
%}
{% else %}
{%
set js_commons = [
'src/utils.js',
'src/motion.js',
'src/canvasline.js'
]
%}
{% endif %}

{% for common in js_commons %}
<script type="text/javascript" src="{{ url_for(theme.js) }}/{{ common }}?v={{ version }}"></script>
{% endfor %}

4. 配置样式

按照我在 CSS 自定义样式文件中的 设置,设置好相册的样式。

5. 开启 lazyload 和 fancybox

在主题配置文件中,一步一步按照说明安装和开启 lazyloadfancybox 功能即可,不再赘述。

6. 放入相册

在第一步创建好的 /source/photos/index.md 文档中编辑好自己需要的相册页面内容,在需要放置相册的位置加入以下内容即可:

1
<div class="ImageGrid"></div>

最后 hexo clean && hexo deploy -g 就可以把相册页设置好了。

总结

终于有了瀑布流的相册页面功能了,之前尝试了好多种方法都不尽如人意,借鉴了 asdfv1929 的方法这次终于搞定,还是很开心的。当然因为 asdfv1929 的方法对主题源文件做了过多的修改,导致步骤看起来有点复杂了,所以我自己稍微进行了改进,这样操作起来更加容易。

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×