实验室日记

记录成长足迹,回味美好人生

0%

Hexo Next主题添加相册功能

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 5k 阅读时长 ≈ 5 分钟

前言

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

结束语

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