Bigfoot 的使用简述

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

##示例 可以看我的博客的这些文章,里面都使用了Bigfoot

我的博客使用的是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});
◀ Github 万圣节彩蛋Godaddy 狗爹的域名转移和续费优惠新方法 ▶