早上醒来,收到邮件博客已被自动更新至 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>
本文首发于:WordPress 4.5.2 安全更新-垃圾站
讲真,整个版面越来越繁复了
@老虎 确实有点,折腾得多了就复杂了。
学术性的网站更适合的感觉。
@不亦乐乎 说得我都想把它去掉了…
有阅读论文参考文献的感觉。
@瑾瑜 看起来好严肃的样子…
感觉注释这么玩对于个人博客来说没有必要啊,装逼倒是挺好用
4.5.2与其说是安全更新还不如说是4.5.1的紧急挽救吧,4.5.1坑死了
话说我早就想说了,LOGO和锐壳亚马逊广告的字体能换成雅黑吗( ▼-▼ )
@yyyyyyyhb 嗯,其实就是用来装的……
雅黑好看?
@老头 额不是雅黑好看是违和感强烈,如果你想把界面统一成别的我也不反对,因为框架的繁杂和风格的不统一我真的有一种看拼图的感觉==
@yyyyyyyhb 业余的,加上东拼西凑,凑合着看呗。
或许是你文章页面内容比较丰富,看起来感觉显乱。
@fooleap 囧,适得其反了……
收好了,有機會把此功能實現。
@CK 不难,稍稍折腾就好。
哈哈,最近都是自动更新,我也是了,这能说明对方已经能保证更新不出错的技术了,哈哈。赞一个!
@郑永 未必,偶尔还是会有意外发生的……就看 RP ……
@老头 我倒不觉得,没有十足把握,不会自动更新,黑掉所有的站!
@老头 你把他们的责任看轻了。
太复杂了。就不好看了。
@夏天烤洋芋 相比以前,已经不算复杂了…
我比较反感js特效一大堆的网站
@Shrek 我这算多不?
@老头 不算多,我记得有一个博客上面js特效一大堆,关键是生拼硬凑,体验不好
@木瓜园 嗯,个人博客确实越简洁越好…我这主题从开始用到现在已经被我精简了好多东西了。
很久不更新了
@FROYO 嗯,不知道写啥呢…
我也更新了
@满满都是爱|天长地久 4.6 已经不远了……
越来越麻烦了
@晨曦 也还行吧。