对于一个不懂前端技术的人，能实现 bigfoot.js 动态注脚实在是太刺激了¹。其实官网上说的已经够多，但前端白痴如我，还是绕了好多弯子，捉急²。

下载

下载 bigfoot.js 源码，解压缩后其中的 bigfoot.js 和 bigfoot-default.scss 有用，其他可删。

还需要 jquery 模块支持，我用的是 jquery-1.9.1.min.js。你可以通过 command + alt + i 组合键打开开发人员工具³，通过 Source ▶ javascripts ▶️ jquery-1.9.1.min.js ▶️ 右键 ▶️ Save 来获取⁴。

加载

bigfoot.js 拖到 source/javascripts 文件夹，然后编辑 source/_includes/custom/head.html。添加以下代码

1
2
3
4
5

<script src="/javascripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/javascripts/bigfoot.js" type="text/javascript"></script>
<script type="text/javascript">
  $.bigfoot();
</script>

bigfoot-default.scss 拖到 sass/custom，在 sass/custom/_styles.scss 中注册。一行代码

1

@import "bigfoot-default.scss";

footnotes

保证你的 octopress 注脚插件已注册，_config.yml 默认是注册的，kramdown 也可以

1
2
3
4

markdown: rdiscount
rdiscount:
  extensions:
    - footnotes

然后语法是这样

1
2
3
4

对于一个不懂前端技术的人，能实现 bigfoot.js 动态注脚实在是太刺激了[^1]。
......

[^1]: 效果赞炸   

可能的问题

什么都做了但没卵用

到这里如果没有意外应该就是妥妥的了，不幸的是我正是意外制造机。折腾了半天发现没有卵用，还是默认的 octopress footnotes 的效果，打开控制台发现有一行诡异的错误输出

1

Uncaught TypeError: $.bigfoot is not a function

这是闹啥嘞，明明就是从官网 copy 下来的啊。找了两个使用了 bigfoot 的网页⁵看其源代码，根本就是一样的嘛为毛我这报错？

开始以为是和页脚自动生成原文链接那有冲突，卸了还是一样报错。几番折腾，发现了破解大法：把 bigfoot.js 的注册写在 head.html 的开头。为什么会这样我不知道，如果好心的你知道可能的原因就偷偷告诉我吧！

移魂大法以后不报错了，显示也妥，只是在页尾还是有冗余的注脚信息。参照 options 给我们的 bigfoot 加一些修饰

1
2
3
4
5
6
7
8

<script type="text/javascript">
  $.bigfoot({
    actionOriginalFN: "delete",
    activateOnHover: "true",
    deleteOnUnhover: "true",
    hoverDelay: "500"
  });
</script>

首页不显示效果

如果 Post 里用了 <!--more--> 分页，那么显示在首页的注脚是没有效果的

VS

这个没想到简单的解决办法⁶，要么分页前部分不包括注脚，要么不分页。

大功告成，撒花 🌺🌺

original link: http://hedleyyan.github.io/blog/2015/07/31/bigfoot-dot-js-zhu-jiao-shi-xian/
written by hedley  posted at http://hedleyyan.github.io