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

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