关于给hexo博客增加相册页面(实现瀑布流相册,实现加密相册)


本文参考博客Neko

ps:亲测该博客中所写均能正确实现,但是有些遗漏在此补充并在此感谢该博主。

1、baguetteBox插件下载及配置

博客中使用了baguetteBox插件,特此放上链接
baguetteBox插件下载链接
插件放置路径:\hexo-theme-matery\source\libs\MyGallery ,将解压后的两个文件夹放入该文件夹下(需要新建MyGallery)。

2、修改主题下_config.yml文件

libs:
  css:
    matery: /css/matery.css
    mycss: /css/my.css
    fontAwesome: /libs/awesome/css/all.css # V5.11.1
    materialize: /libs/materialize/materialize.min.css # 1.0.0
    aos: /libs/aos/aos.css
    animate: /libs/animate/animate.min.css # V3.5.1
    lightgallery: /libs/lightGallery/css/lightgallery.min.css # V1.6.11
    aplayer: /libs/aplayer/APlayer.min.css
    dplayer: /libs/dplayer/DPlayer.min.css
    gitalk: /libs/gitalk/gitalk.css
    jqcloud: /libs/jqcloud/jqcloud.css
    tocbot: /libs/tocbot/tocbot.css
    prism: /libs/prism/prism.css
    baguetteBoxCss: /libs/MyGallery/css/baguetteBox.css  #相册展示页面css
  js:
    matery: /js/matery.js
    jquery: /libs/jquery/jquery.min.js
    materialize: /libs/materialize/materialize.min.js # 1.0.0
    masonry: /libs/masonry/masonry.pkgd.min.js # v4.0.0
    aos: /libs/aos/aos.js
    scrollProgress: /libs/scrollprogress/scrollProgress.min.js
    lightgallery: /libs/lightGallery/js/lightgallery-all.min.js # V1.6.11
    clicklove: /libs/others/clicklove.js
    busuanzi: /libs/others/busuanzi.pure.mini.js
    aplayer: /libs/aplayer/APlayer.min.js
    dplayer: /libs/dplayer/DPlayer.min.js
    crypto: /libs/cryptojs/crypto-js.min.js
    echarts: /libs/echarts/echarts.min.js
    gitalk: /libs/gitalk/gitalk.min.js
    valine: /libs/valine/Valine.min.js # 若想保持最新版,请替换为 https://unpkg.com/valine/dist/Valine.min.js  默认为 /libs/valine/Valine.min.js
    minivaline: /libs/minivaline/MiniValine.js
    jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
    tocbot: /libs/tocbot/tocbot.min.js
    canvas_nest: /libs/background/canvas-nest.js
    ribbon: /libs/background/ribbon.min.js
    ribbonRefresh: /libs/background/ribbon-refresh.min.js
    ribbon_dynamic: /libs/background/ribbon-dynamic.js
    instantpage: /libs/instantpage/instantpage.js
    baguetteBoxJs: /libs/MyGallery/js/baguetteBox.js  # 相册页面js 

ps: js和css最后一行是添加内容

3、gallery.json文件中img_url配置

可以将图片放到GitHub,GitHub图床配置参考PicGo软件使用方法。


结束

万事无如退步人,孤云野鹤自由身;
松风十里时来往,笑揖峰头月一轮。

文章作者: cyf
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 cyf !
  目录