早上醒来，收到邮件博客已被自动更新至 WordPress 4.5.2，一个安全更新。
有些时候写博文会引用很多外部链接，如果这些外部链接全部放在文中感觉有些不妥，至少在美观度上就有些偏离大众审美，特别是对于一些很长又不规律的链接。而统一放到文末，可能读者一时半会看不出哪里引用了。
于是按照 Fooleap's Blog 的 JavaScript 实现参考资料功能 教程依葫芦画瓢添加了一个小功能 —— 根据文章内容在文末特定位置自动生成参考资料内容，并可相互跳转、高亮。（已去除该功能-2016.7.18）
下面来个 GIF 先感受一下这个功能：
详细教程请看原文，我稍稍修改了一下，原代码只对站外链接做处理，因为我想站内标注也用此方法，所以加了个对 href = ## 的指定链接也作同样的处理，下面直接上代码。
js 代码
//自动参考资料 start
var autorefa = /^参考资料/;
var autorefb = /^标注/;
$('.single-content h3').last().each(function() { // 选取文章最后一个 h3，.single-content h3 根据主题实际修改
if ($(this).text().match(autorefa) || $(this).text().match(autorefb)) {
$(this).after('<ol id="refs"></ol>')
}
});
// 选择非本站链接 与 href="##" 的链接
$('a[href*="##"],[href*="http:"]:not([href*="' + location.hostname + '"]), [href*="https:"]:not([href*="' + location.hostname + '"])').each(function(){
// 去掉所选链接文本的最前、最后字符
var num = $(this).text().substring(1, $(this).text().length-1);
// 判断是否为数字
if(!isNaN(num) && num){
var note = 'note-' + num;
var ref = 'ref-' + num;
var noteTitle = $(this).attr('title');
var noteHref = $(this).attr('href');
$(this).attr({href: '#' + note, id: ref, 'class': 'ref anchor-fix'}).wrap('<sup>');
$('#refs').append('<li class="note"><a class="anchor-fix" href="#'+ ref + '">∧</a> <a href="'+ noteHref + '" title="' + noteTitle + '" id="' + note +'" class="exf-text" target="_blank">' + noteTitle + '</a></li>')
}
})
var noteLinks = $('a[href^="#note"], a[href^="#ref"]');
noteLinks.click(function(){
// 清除背景颜色
noteLinks.parent().css('background-color', '');
// 高亮目标背景
var href = $(this).attr('href');
$(href).parent().css('background-color', 'rgb(235, 235, 235)');
})
//自动参考资料 end
html 代码示例
外站链接参考资料：Fooleap's Blog <a href="http://blog.fooleap.org/reference.html" title="JavaScript 实现参考资料功能 | Fooleap's Blog">[1]</a>
<h3>参考资料</h3>
-------------------- 分隔线 --------------------
标注/注释：Fooleap's Blog <a href="##" title="JavaScript 实现参考资料功能 | Fooleap's Blog">[2]</a>
<h3>标注</h3>
讲真，整个版面越来越繁复了
@老虎 确实有点，折腾得多了就复杂了。
学术性的网站更适合的感觉。
@不亦乐乎 说得我都想把它去掉了…
有阅读论文参考文献的感觉。
@瑾瑜 看起来好严肃的样子…
感觉注释这么玩对于个人博客来说没有必要啊，装逼倒是挺好用
4.5.2与其说是安全更新还不如说是4.5.1的紧急挽救吧，4.5.1坑死了
话说我早就想说了，LOGO和锐壳亚马逊广告的字体能换成雅黑吗( ▼-▼ )
@yyyyyyyhb 嗯，其实就是用来装的……
雅黑好看？
@老杨 额不是雅黑好看是违和感强烈，如果你想把界面统一成别的我也不反对，因为框架的繁杂和风格的不统一我真的有一种看拼图的感觉==
@yyyyyyyhb 业余的，加上东拼西凑，凑合着看呗。
或许是你文章页面内容比较丰富，看起来感觉显乱。
@fooleap 囧，适得其反了……
收好了，有機會把此功能實現。
@CK 不难，稍稍折腾就好。
哈哈，最近都是自动更新，我也是了，这能说明对方已经能保证更新不出错的技术了，哈哈。赞一个！
@郑永 未必，偶尔还是会有意外发生的……就看 RP ……
@老杨 我倒不觉得，没有十足把握，不会自动更新，黑掉所有的站！
@老杨 你把他们的责任看轻了。
太复杂了。就不好看了。
@夏天烤洋芋 相比以前，已经不算复杂了…
我比较反感js特效一大堆的网站
@Shrek 我这算多不？
@老杨 不算多，我记得有一个博客上面js特效一大堆，关键是生拼硬凑，体验不好
@木瓜园 嗯，个人博客确实越简洁越好…我这主题从开始用到现在已经被我精简了好多东西了。
很久不更新了
@FROYO 嗯，不知道写啥呢…
我也更新了
@满满都是爱|天长地久 4.6 已经不远了……
越来越麻烦了
@晨曦 也还行吧。