0%

Hexo Next主题添加相册功能

前言

HEXO本身不自带相册功能,结合 Hexo Next 博客添加相册瀑布流 给next主题添加了相册功能,感谢林夕水共作者Smaug,由于作者图床基于github,本文则基于七牛云实现相册功能,希望对你有所帮助。

效果图

在继续往下阅读之前,先看看效果图是不是你想要的。本文结合fancybox实现更友好的查看效果。
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。

HEXO_Next主题相册效果图

图床准备

本文使用七牛云作为仓库存储图片文件(也称图床),你也可以使用其他的对象云或者github,比如上述文章使用的github来做为图床。

使用七牛云作为图床存储图片,为了长期使用,需要做一些事情:

  1. 需要先申请一个属于自己的域名,并且需要ICP备案
  2. 使用一个二级域名来绑定七牛云的空间,比如pic.marslab.cn绑定的是七牛云的marslab空间,并且根据七牛云的配置提示做相应的域名解析
  3. 给该二级域名申请SSL证书,使用 https://pic.marslab.cn 来访问图片
  4. 配置好之后,可以使用自定义域名访问图片,如图:七牛云图床自定义域名访问

图片准备

为了方便Hexo next主题博客本地图片上传到七牛云,可以采用Hexo七牛同步插件

在你的hexo主目录下运行以下命令进行安装:

npm install hexo-qiniu-sync –save
添加插件配置信息到 _config.yml 文件中,具体每个配置的含义请自行百度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
qiniu:
offline: false
sync: true
bucket: marslab
#secret_file: sec/qn.json or C:
access_key: djkuxpsD8s9DE #七牛云获取
secret_key: nqUeHlboqgTE4PviunL #七牛云获取
dirPrefix: ''
urlPrefix: https://pic.marslab.cn
up_host: http://upload.qiniu.com
local_dir: static
update_exist: true
image:
folder: image
extend:
js:
folder: js
css:
folder: css

上述配置正确之后,通过hexo s命名即可将本地文件
注意不仅限于图片(位于博客主目录下static\imgage, static\js, static\css)上传到七牛云服务器。

搭建相册功能

新建photo页面

博客根目录\source\ 下新建 photos文件夹
然后进入photos目录,新建index.md文件
然后将下面的内容粘贴到index.md中,其中已经将fancybox的js和css引入进来。

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
---
title: 摄影
type: photos
---

<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>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css" media="screen">

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="minigrid.min.js"></script>
<script type="text/javascript" src="photo.js"></script>
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>

<blockquote>
<p>主要拍摄工具是华为P30,如果对某张照片有什么建议或者感兴趣,欢迎联系。</p>
</blockquote>

<div class="MyGrid"></div>

修改Next主题配置文件

添加了 photos 页面后,需要在 next 配置文件中修改:
themes/next/_config.yml

找到 menu 项,填入如下:
photos: /photos || fas fa-camera-retro

添加之后的是这样的:

1
2
3
4
5
6
7
8
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
guestbook: /guestbook || fas fa-comments
photos: /photos || fas fa-camera-retro

完成之后还需要修改一下这个文件:
themes/next/languages/zh-CN.yml

找到 menu 项,加入如下一行:
photos: 摄影

比如是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
guestbook: 留言
photos: 摄影
wiki: 维基

JS配置

将下面几个js文件下载好之后放在根目录/source/photos/ 下面:

图片信息文件

再次回到 photos 目录,创建文件 photoslist.json
然后输入下面的内容:

1
2
3
4
[
"1080.1920;WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114_small.jpeg",
"3024.4032;WechatIMG25834.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG25834.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG25834_small.jpeg"
]

到这里应该能看到这个 摄影 页面了,你可以现在本地测试一下看:
hexo s -g

本地测试一下,如果你能看到在博客的 摄影 页面看到这两张图片,那么说明你的配置没问题,你可以进行接下来的操作了;如果你不能正确显示,说明前面的步骤出了问题,自己研究调试一下;如果你还不能解决,欢迎联系我。

使用 python 脚本生成 photoslist.json

上面可以看到,photoslist.json 存放的是图片的信息,photo.js 解析 photoslist.json 这个文件,然后在 photos 页面添加 dom.

所以核心的部分在于 photoslist.json 文件,我们可以分析下这个文件:

1
1080.1920;WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114.jpeg;https://cdn.jsdelivr.net/gh/smaugx/MyblogImgHosting/rebootcat/photowall/cat/WechatIMG114_small.jpeg

photoslist.json 保存的是一个 list,list 中每一行是一张图片的信息,包括原始图片大小、文件名、原始图片cdn链接、缩略图cdn链接

上面已经准备好七牛云作为图床,接下来使用py脚本自动生成json文件。
下载phototool.py存入 博客根目录/source/photos 下面,可以为电脑任意地方都行

这里重点需要关注的是配置:

1
2
3
4
5
6
7
8
9
10
config = {
# github 存储图片的仓库(本地仓库基准目录)
'github_img_host_base': 'D:\学习+笔记+资料\HEXO实验室日记\static\image',
# 会对这个目录下的所有文件夹进行遍历,相同目录生成_samll 的 缩略图
'img_path': 'D:\学习+笔记+资料\HEXO实验室日记\static\image',
# cdn 前缀
'cdn_url_prefix': 'https://pic.marslab.cn/image/',
# hexo 博客存放 photos 信息的 json 文件
'photo_info_json': 'D:\学习+笔记+资料\HEXO实验室日记\source\photos\photoslist.json',
}

简单解释一下这个脚本:

  • github_img_host_base: 这个目录也就是本地的仓库目录,绝对路径
  • img_path: 存放瀑布流图片,对应本地的路径
  • cdn_url_prefix:自定义域名访问图片的前缀地址
  • photo_info_json: photoslist.json 路径

然后执行:
python phototool.py

需要注意如果电脑没有安装python环境,需要百度搜索安装下环境,然后安装PIL组件:
pip install -i http://mirrors.aliyun.com/pypi/simple/ pillow
上述指定国内源快速安装

pip安装PIL成功

如果需要更新图片:

  • 只需要把新图片放到本地的文件夹,然后执行
  • python phototool.py
  • 检查一下 photoslist.json 文件对不对,然后发布博客:
  • hexo d -g

结束语

由于我是采用回忆的方式来写的博文,所以文中可能会有一些小的修改或者配置我忽略了,不过问题不大,大家如果碰到问题了可以自行研究一下,能解决的。