Bigfoot 的使用简述

博客添加了Bigfoot这个脚注插件，还是听【比特新声】的主播郝海龙介绍的，但是因为farbox的模板里面原本没有，所以使用起来没有WordPress里的Bigfoot插件那么方便，我自己也是折腾了很久，看了不少外国的博客分享的经验最后实现了。由于最近给别人分享了一下Bigfoot的使用方法，顺便也都贴到这里。

示例

可以看我的博客的这些文章，里面都使用了Bigfoot

• 回归手的第一段
• 听说今天是平等和爱的胜利的第一段
• 我的黑苹果之路(华硕B85-PLUS)的最后

我的博客使用的是Bigfoot的Demo效果中的“Defalult”，并且打开了JavaScript。你可以选择该样式后直接下载。

引入

然后要注意的是，在引入jQuery、Bigfoot.js和bigfoot.css后还需要添加bigfoot的option，这在Bigfoot的usage里面有提到，代码如下

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

使用方法

还是按照Bigfoot官网的使用方法，使用是分为两个部分的。

1. link

第一个部分是link，就是你在文中插入的部分，代码如

<sup id="fnref:1">
    <a href="#fn:1" rel="footnote">1</a>
</sup>

解释一下这段代码

• <sup></sup>是html的上标标签，使用后文本会变为上标
• 这段里面的<sup id="fnref:1">必须和content里面的<a href="#fnref:1"></a>对应
• <a href="#fn:1" rel="footnote"></a>必须与content里面的<li class="footnote" id="fn:1">对应
• <a href="#fn:1" rel="footnote"></a>标签的中间，可添加文本，也可不添加，不影响效果

2. content

第二个部分是content，也就是你要脚注的内容，这个部分我是放在文章的最后的，因为markdown支持html所以直接插入就好了。代码如

<div class="footnotes"><ol>
    <li class="footnote" id="fn:1">
        <p>footnote.<a href="#fnref:1" title="return to article"> ↩</a><p>
    </li>
</ol></div>

我解释一下这段代码

<div class="footnotes"><ol>
    <li class="footnote" id="fn:此处可自定义">
        这里为你要插入的脚注内容
     </li>
</ol></div>

这个div标签中的格式是必须一样，但是其中的li的id的fn:后面是可以自定义的

我的源码

因为还是担心不会使用，所以这里提供我使用的模板的源码下载，下载地址。包括我的模板Template文件夹，以及回归手的源码。Template文件夹里主要参考base.jade里的写法。PS，该模板原地址为farbox-theme-cais

html
    ......
	head
		meta(http-equiv="Content-Type", content="text/html; charset=UTF-8")
		block title
			title= post.title or site.title
		+mobile_meta()
		meta(name="author", content="ryuzheng,ryuzheng@foxmail.com")
		meta(name="keywords", content=site.configs.keywords.escaped)
		meta(name="description", content=site.raw_content.escaped)
		+load('font')
		+get_resource("blog_basic.css")
		+load('/template/style/css/style.scss /template/bigfoot.css')
	body
   ......
		+load('jquery')
		+load("/template/style/js/jquery-migrate-1.2.1.min.js")
		+load("/template/style/js/jquery.appear.js")
		+load("/template/style/js/menu.js")
		+load("/template/bigfoot.js")

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