hexo的fluid主题添加瀑布流懒加载相册功能

首发于:https://www.aigisss.com/blog/posts/798ba833.html

创建相册页面

新建相册页 hexo new page photos,编辑 /source/photos/index.md，输入以下内容：

---
title: photos
date: 2020-12-30 19:04:03
layout: photo
---
<style>
.ImageGrid {
width: 100%;
max-width: 1040px;
margin: 0 auto;
text-align: center;
}
.card {
overflow: hidden;
transition: .3s ease-in-out;
border-radius: 8px;
background-color: #efefef;
padding: 1.4px;
}
.ImageInCard img {
padding: 0;
border-radius: 8px;
width:100%;
height:100%;
}
@media (prefers-color-scheme: dark) {
.card {background-color: #333;}
}
style>
<div id="imageTab">div>
<div class="ImageGrid">div>


处理图片信息

为了加快图片的加载速度,我使用GitHub +jsDelivr的方式，**网上有许多的教程，此处不再演示。**文件夹结构如图:

主要功能是使用image-size( npm i -S image-size安装)访问照片文件夹，获取每张照片的大小和文件名，并生成对应的 json 文件：

cnpm i安装之后,把照片放在目录后，执行以下命令：

node gallery/create.js


如果报错，请注意检查保存本地照片的文件夹里有没有非图片类文件，特别是要删除如 .DS_Store 这样的隐藏文件。json 文件样例如下：

[
{
"name": "广州一游",
"children": [
"1080.1440 圣心大教堂.jpg",
"1080.1440 广州塔顶夜晚景色.jpg",
"1080.1440 广州塔顶夜晚景色2.jpg",
"1080.1440 晚上广州塔.jpg",
"1080.1443 白天广州塔.jpg"
]
},
{
"name": "澳门游玩",
"children": [
"1080.1443 夜晚澳门巴黎铁塔.jpg",
"1443.1080 微信图片_20210108213615.jpg",
"1443.1080 微信图片_20210108213635.jpg",
"1443.1080 微信图片_20210108213645.jpg",
"1443.1080 微信图片_20210108213707.jpg",
"1080.1443 白天澳门巴黎铁塔.jpg"
]
}
]


将photos.json拷贝到博客目录下的photos

加载 js和css文件

在 /source/js/ 目录下创建 photoWall.js：

var imgDataPath = "/blog/photos/photos.json"; //图片名称高宽信息json文件路径
var imgPath = "https://cdn.jsdelivr.net/gh/Cenergy/images/gallery/"; //图片访问路径
var imgMaxNum = 50; //图片显示数量
var windowWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (windowWidth < 768) {
var imageWidth = 145; //图片显示宽度(手机端)
} else {
var imageWidth = 250; //图片显示宽度
}
const photo = {
page: 1,
offset: imgMaxNum,
init: function () {
var that = this;
$.getJSON(imgDataPath, function (data) {
that.render(that.page, data);
//that.scroll(data);
that.eventListen(data);
});
},
constructHtml(options) {
const {
imageWidth,
imageX,
imageY,
name,
imgPath,
imgName,
imgNameWithPattern,
} = options;
const htmlEle = `

${imageWidth}px">

${
(imageWidth * imageY) / imageX
}px">
${imgPath}${name}/${imgNameWithPattern}"
data-caption="${imgName}" title="${imgName}">
${imgPath}${name}/${imgNameWithPattern}"
src="https://img.php1.cn/3cd4a/1eebe/cd5/43a754c811e7ec5c.webp"
οnlοad="lzld(this)"
lazyload="auto">

然后使用注册器将需要的js,css注入,在scripts/injector.js(如没有,则创建)中输入以下内容:

const { root: siteRoot = "/" } = hexo.config;
// layout为photo的时候导入这些js与css
hexo.extend.injector.register(
"body_end",
`




`,
"photo"
);


至此,已经能看到加载出图片了,但是假如不使用cdn或者其他懒加载策略的话会感觉很慢!!

参考:https://blog.dlzhang.com/posts/31/