Hexo Next 博客添加相册瀑布流

本文主要是介绍Hexo Next 博客添加相册瀑布流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文：https://rebootcat.com/2020/09/19/nextphotowall/

前言

一直没有时间来整理下博客搭建的一些事情，现在补上一篇，给 Hexo Next 博客添加一个相册功能，使用瀑布流的方式。

原理说明

• 使用 github 作为仓库存储图片文件（图床）
• 使用 jsdelivr 进行图片 CDN 加速

优点

此种方式的优点是免费，不需要购买其他的对象存储产品；并且使用的是 github 作为图床，图片不会丢失。

早期的博文使用的是七牛云的免费存储，结果后来被他们删掉了。。。结果造成文中的一些图片链接都是 404，有兴趣的可以翻一翻我早期的博客。

缺点

由于采用的是 github 仓库存储图片，但是 github 对单仓库有 50MB 的大小限制，所以单仓库可能不能够存储太多的文件；

解决方法就是建立很多的图片仓库（稍微有点费劲，不过是行得通的）；另外上传的单张图片大小最好不要太大。

还有个缺点就是得折腾啊，且看我后文。

各位可以参考下我的相册瀑布流: 摄影

开始搭建相册瀑布流

开始之前，需要简单介绍一下，我参考的是 Hexo NexT 博客增加瀑布流相册页面 这篇文章，文中涉及到的脚本主要都是 js 实现；与他不同的是，由于我对 js 的掌握远远不及我对 Python 的掌握，故部分脚本我采用了 Python 实现。

所以在开始操作之前，你可以根据自己的技能，选择不同的方式。如果你擅长 python，那么跟着我来吧。

新建 photo 页面

去到博客根目录：

mkdir -p source/photos

然后进入 photos 目录：

cd source/photos
vim index.md

把下面的粘贴保存：

---
title: 摄影
type: photos
---<!-- CSS Code -->
<style>
.MyGrid{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}
@media(prefers-color-scheme:dark){.card{background-color:#333;}}
</style>
<!-- CSS Code End --><div class="MyGrid"></div>

修改 Next 主题配置文件

添加了 photos 页面后，需要在 next 配置文件中修改：

vim themes/next/_config.yml

找到 menu 项，填入如下：

photos: /photos || fas fa-camera-retro

比如我的是这样的：

menu:home: / || homeabout: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeatguestbook: /guestbook || fas fa-commentsphotos: /photos || fas fa-camera-retrowiki: /wiki/ || wikipedia-w

完成之后还需要修改一下这个文件：

vim themes/next/languages/zh-CN.yml

找到 menu 项，加入如下一行：

 photos: 摄影

比如我的是这样的：

menu:home: 首页archives: 归档categories: 分类tags: 标签about: 关于search: 搜索schedule: 日程表sitemap: 站点地图commonweal: 公益 404guestbook: 留言photos: 摄影wiki: 维基

OK，到这里应该能看到这个 摄影 页面了，你可以现在本地测试一下看：

hexo s -g

添加 js 脚本

首先需要在 source 目录下新建一个 js 目录，用来保存自定义的一些 js 脚本；

mkdir -p source/js

然后新建 mygrid.js 文件，粘贴下面的一段代码：

// 获取网页不含域名的路径
var windowPath = window.location.pathname;
// 图片信息文件路径
var imgDataPath = '/photos/photoslist.json';
// 图片显示数量
var imgMaxNum = 50;
// 获取窗口宽度（以确定图片显示宽度）
var windowWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidt

这篇关于Hexo Next 博客添加相册瀑布流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---