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});
Comments
Write a Comment