为 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 的一个方法来激活它

<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 语法 ![]() 插如图片的时候，在外面多包一层 []() 即可！

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

搞定。