WordPress 4.5.2 安全更新

30 Comments
2016-7-18 更新

早上醒来，收到邮件博客已被自动更新至 WordPress 4.5.2，一个安全更新。

有些时候写博文会引用很多外部链接，如果这些外部链接全部放在文中感觉有些不妥，至少在美观度上就有些偏离大众审美，特别是对于一些很长又不规律的链接。而统一放到文末，可能读者一时半会看不出哪里引用了。

于是按照 Fooleap's Blog 的 JavaScript 实现参考资料功能 教程依葫芦画瓢添加了一个小功能 —— 根据文章内容在文末特定位置自动生成参考资料内容，并可相互跳转、高亮。（已去除该功能-2016.7.18）

下面来个 GIF 先感受一下这个功能：

379-reference-live

详细教程请看原文，我稍稍修改了一下，原代码只对站外链接做处理，因为我想站内标注也用此方法，所以加了个对 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 + '">&and;</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>
快报：Vultr 最新活动，充 $5 送 $25，可以用 $2.5 套餐 VPS 一年，活动即将结束，快上车【点击查看】| 搬瓦工年付 $19 中国直连线路补货，优惠码：BWH1ZBPVK，『点击直达』| 京东优惠券：每天可领
声明： 除非注明，常阳时光文章均为原创，转载请以链接形式标明本文地址
本文地址：https://cyhour.com/379/
Views: 270

Comments：30

  1. 老虎

    讲真，整个版面越来越繁复了

    2016.05.07 21:17 # 回复
    1楼
  2. 不亦乐乎

    学术性的网站更适合的感觉。

    2016.05.07 22:54 # 回复
    2楼
  3. 瑾瑜

    有阅读论文参考文献的感觉。

    2016.05.08 16:06 # 回复
    3楼
  4. yyyyyyyhb

    感觉注释这么玩对于个人博客来说没有必要啊，装逼倒是挺好用
    4.5.2与其说是安全更新还不如说是4.5.1的紧急挽救吧，4.5.1坑死了
    话说我早就想说了，LOGO和锐壳亚马逊广告的字体能换成雅黑吗( ▼-▼ )

    2016.05.09 00:44 # 回复
    4楼
    • 老杨

      @yyyyyyyhb 嗯，其实就是用来装的……
      雅黑好看？

      2016.05.09 23:16 # 回复
      • yyyyyyyhb

        @老杨 额不是雅黑好看是违和感强烈，如果你想把界面统一成别的我也不反对，因为框架的繁杂和风格的不统一我真的有一种看拼图的感觉==

        2016.05.14 00:40 # 回复
  5. fooleap

    或许是你文章页面内容比较丰富，看起来感觉显乱。

    2016.05.09 13:26 # 回复
    5楼
  6. CK

    收好了，有機會把此功能實現。

    2016.05.10 11:08 # 回复
    6楼
  7. 郑永

    哈哈，最近都是自动更新，我也是了，这能说明对方已经能保证更新不出错的技术了，哈哈。赞一个！

    2016.05.11 00:10 # 回复
    7楼
  8. 夏天烤洋芋

    太复杂了。就不好看了。

    2016.05.17 16:23 # 回复
    8楼
  9. Shrek

    我比较反感js特效一大堆的网站

    2016.05.18 09:10 # 回复
    9楼
    • 老杨

      @Shrek 我这算多不？

      2016.05.19 16:57 # 回复
      • 木瓜园

        @老杨 不算多，我记得有一个博客上面js特效一大堆，关键是生拼硬凑，体验不好

        2016.06.05 17:15 # 回复
        • 老杨

          @木瓜园 嗯，个人博客确实越简洁越好…我这主题从开始用到现在已经被我精简了好多东西了。

          2016.06.05 21:03 # 回复
  10. FROYO

    很久不更新了

    2016.05.18 17:46 # 回复
    10楼
  11. 满满都是爱|天长地久

    我也更新了

    2016.05.21 20:55 # 回复
    11楼
  12. 晨曦

    越来越麻烦了

    2016.05.29 11:04 # 回复
    12楼

发表留言

彩蛋：Vultr 充 $5 送 $25，活动即将结束，快上车【点击查看】| 搬瓦工年付 $19 中国直连补货，优惠码：BWH1ZBPVK，『点击直达』| 京东优惠券：每天可领