为 Ghost 添加 Fluidbox Lightbox 图片查看插件达到 Medium 的效果

Ghost 博客系统什么都好,就是没有找到好的看图 lightbox 效果插件。很喜欢 Medium 的 lightbox 效果,也一直想用 Fluidbox 以达到一样的效果,但是之前 WordPress 太麻烦,现在可以一试了。

1. 接入并激活 Fluidbox

首先,用编辑器打开 Ghost 里的 default.hbs 文件,路径如下:

1
根目录/content/theme/你的主题目录/default.hbs

然后,找到靠谱的 Fluidbox CDN,把代码复制到 default.hbs 的代码尾部,并插入 Fluidbox 的一个方法来激活它

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fluidbox/1.4.3.1/css/fluidbox.css" />
<script type="text/javascript" src='https://cdn.bootcss.com/fluidbox/1.4.3.1/jquery.fluidbox.js'></script>
<script>
$('a').fluidbox({
});
</script>

效果如下图所示:

插入代码后的效果

2. 修改博客图片的链接方法

Fluidbox 是通过 img 标签外面的 a 标签来激活,即需要如下结构:

1
2
3
<a href="/path/to/image" title="">
<img src="/path/to/image" alt="" title="" />
</a>

因此,我们只需要在用 Markdown 语法 ![]() 插如图片的时候,在外面多包一层 []() 即可!

1
2
3
4
5
[![Alt 信息](图片地址)](图片地址)
// 即可生成以下结构
<a href="图片地址" title="">
<img src="图片地址" alt="Alt 信息" title="" />
</a>

搞定。

许可君.Suer wechat
本文同步更新至我的公众号与知乎专栏