FancyBox 是基于 JQuery 开发的类 Lightbox 插件,可以将图片放大查看,同时支持对放大的图片添加阴影效果,并对于一组相关的图片添加导航操作按纽。对于 Next 7.0+ 主题来说,当文章出现图片时,无法将图片放大查看,为此其内置了 FancyBox3,关于该插件的具体介绍见其Github项目
安装并导入
由于安装基于JQuery框架,所以要想正常使用,首先安装并导入JQuery(同时可以解决Next 7.0中导入一些第三方插件时出现的$
未定义错误)。解决方法为,打开themes/hexo-theme-next/layout/_partials/head
文件夹中的 head.swig
文件,在其中添加如下代码(直接添加到最后空白处就得):
‘’’JavaScript
‘’’
修改主题配置文件_config.yml
找到主题配置文件中的fancybox
字段,将false
修改为true
,如下图所示:
安装fancybox插件
进入到 hexo-theme-next/next/
文件夹下,运行 Git Bash,执行以下代码:
‘’’JavaScript
git clone https://github.com/theme-next/theme-next-fancybox3.git source/lib/fancy
‘’’
效果图
安装后就可以发现你文章中的图片可以点击放大了,如下图,可点击放大