Hexo Next主题添加相册功能

by Posted on

前言

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

效果图

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

{% qnimg HEXO_Next主题相册效果图.png title:HEXO_Next主题相册效果图 alt:HEXO_Next主题相册效果图 ‘class:class1 class2’ %}

<!– more –>

图床准备

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

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

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

图片准备

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

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

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

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引入进来。

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

添加之后的是这样的：

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: 摄影

比如是这样的：

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

JS配置

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

图片信息文件

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

[  "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 文件，我们可以分析下这个文件：

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 下面，可以为电脑任意地方都行。

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

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
上述指定国内源快速安装
{% qnimg pip安装PIL成功.png title:pip安装PIL成功 alt:pip安装PIL成功 ‘class:class1 class2’ %}

如果需要更新图片：

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

结束语

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

Published by admin

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注