给Hexo(Hugo)添加Bigfoot

我之前搭建Ghost博客的时候，在萌天的博客上有看到过Bigfoot，经过萌天介绍，认识了Bigfoot。现在将Bigfoot集成到我目前在用的hexo博客hiker主题中Hugo博客Fx主题中。

Bigfoot.js 是一个很漂亮的footnote脚注插件。
效果就是右边这个小气泡按钮啦，萌不萌？ ¹

下面就为Hexo博客添加Bigfoot支持吧！

下载所需文件

Bigfoot依赖jquery，所以需要下载以下内容：
Bigfoot.js
jquery
(这里jquery的版本要高于1.8，但是在用到高版本的jquery的时候，会出现bigfoot气泡样式不对的错误！)

移动文件

Hexo的一般theme的目录结构：

将下载得到的 bigfoot.min.js 和 jquery-2.0.3 放入 hiker主题下 source/js 文件夹；
将下载得到的 bigfoot-default.css 放入css 文件夹。

修改文件

打开主题名/layout/_partial/head.ejs ，在适当的位置添加：

<%- js('js/jquery-2.0.3.min.js') %>
<%- js('js/bigfoot.min.js') %>

然后打开根目录下面的scaffolds（模版文件夹）下的 post.md 文件，在最后添加：

<script type="text/javascript">
    $.bigfoot();
</script>
<script type="text/javascript">
    var bigfoot = $.bigfoot({
        deleteOnUnhover: false,
        preventPageScroll: false,
        hoverDelay: 250,
    });
</script>  

这里我没有把这些加入ejs模版文件中，出于两方面考虑，一方面bigfoot对气泡有很多额外的设置可以在这里添加，另一方面加入到什么地方都让我觉得不太优美，暂时没有找到合适的地方。

保存，hexo generate、 hexo server 看一下本地的效果，没有问题的话，deploy到服务器！

使用Bigfoot

Bigfoot 的使用时靠直接写HTML的，使用如下： 在新的post当中： 在文章需要显示气泡处，添加：
<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a> </sup>
其中数字1代表脚注序号。 文章末尾处，添加：

    <div class="footnotes"><ol>  
        <li class="footnote" id="fn:1">
            <p>footnote 里面要显示的内容<a href="#fnref:1" title="footnote 在文末的标题"> ↩</a><p>
        </li>
    </ol></div>

序号要对应。

好了，这个时候重新generate，应该会出现了！