hexo matery 相册视频相册相册加密描述备注

我的基本相册功能和相册加密功能是完全参考这篇matery相册功能和这篇matery相册加密功能实现的。有需要可以自取。

在此基础上，我进一步想实现以下两个功能：

视频相册功能，即相册既可以放图片也可以放视频；
描述备注功能，即在合适的位置为图片或视频显示一行描述。

我的实现效果可以看这里。我没有使用原文的等高功能，而用了瀑布流，所以看起来会有点不一样。

思路

本来对前端不太熟悉，我经过尝试发现原文里使用的fancybox插件可以播放视频并且和图片无缝切换，这就解决了最关键的视频播放问题。我们只需要给视频添加封面即可，这样我们只需要自己p一张图作为封面就好了。
经过百度和谷歌发现fancybox可以读取html5里面的data-caption字段显示在图片下方，文档在这里，然后我们只需要在.json里面再添加一个图片描述，放在data-caption字段就好了。

更改.json相册文件

原文里的galleries.json如下：

 [{"name": "2019","cover": "2019/IMG_20190331_165713_1.jpg","description": "2019年记录","photos": ["2019/IMG_20190118_200104.jpg","2019/IMG_20190118_200120.jpg","2019/IMG_20190118_200456.jpg"]}]

我把.json，即原文里的galleries.json改成了类似于这种形式，主要是：

把原本的photo字段改为contents字段，因为我不仅放图片还放视频；
添加tinies字段作为图片和视频的封面图，视频的封面需要自己p一张，我的做法是找一张视频播放的插画插入视频截图里，图片的封面就用原图就行；
添加descriptions字段作为图片和视频描述。

[{"name": "不玩游戏","cover": "https://z3.ax1x.com/2021/09/03/hyEtHA.jpg","description": "不玩游戏，要玩玩具","contents": ["/medias/video/nianbao.mp4","https://z3.ax1x.com/2021/09/03/hyEtHA.jpg","https://z3.ax1x.com/2021/09/03/hyEYBd.jpg"],"tinies": ["https://z3.ax1x.com/2021/09/04/hgiyPP.png","https://z3.ax1x.com/2021/09/03/hyEtHA.jpg","https://z3.ax1x.com/2021/09/03/hyEYBd.jpg"],"descriptions": ["小粘包动次打次 2021/8/29","代码珠 2021/8/29","小油比 2021/8/20"]
}]

更改 gallery.ejs

原文的gallery.ejs里面一段内容用于生成imgsStr，如下：

var currentGallery = getCurrentGallery(galleries, pageTitle)var photos = currentGallery.photos;let imageStr = ''for (var i = 0, len = photos.length; i < len; i++) {var photo = photos[i];imageStr += "<a href=\"http://图片地址.com/" + photo + "\"" +"     class=\"photo-item\" rel=\"example_group\"" +"     data-fancybox=\"images\">" +"      <img src=\"http://图片地址.com/" + photo + "\"" +"       alt=" + photo + ">\n" +"    </a>"}

我把改为这样，主要是：

把photos和photo分别改为contents和content，对应于galleries.json；
把description放入data-caption字段；
把tiny放入缩略图src字段。

var currentGallery = getCurrentGallery(galleries, pageTitle)
var contents = currentGallery.contents;
var tinies = currentGallery.tinies;
var descriptions = currentGallery.descriptions;
let imageStr = ''
for (var i = 0, len = contents.length; i < len; i++) {var content = contents[i];var tiny = tinies[i];var description = descriptions[i];imageStr += "<a href=\"http://图片地址.com/" + content + "\"" +"     class=\"photo-item\" rel=\"example_group\"" +"     data-fancybox=\"images\"" +"     data-caption=\"" + description + "\">" +"      <img src=\"http://图片地址.com/" + tiny + "\"" +"       alt=" + tiny + ">" +"    </a>"
}

更改相册图标

然后在主题的_config.yml里面把相册Galleries的图标改为fas fa-photo-video，这才是真正的相册呢。

ok，完成。