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,完成。