前言
好一陣子沒逛博客園了, 今天回自己博客搜點東西發現圖片放大功能不好使了(不是之前lightbox效果了),感覺很奇怪,難道博客園樣式升級連這個功能都給我屏蔽了?
當時記錄的博文:博客園文章圖片點擊放大功能升級 - 習慣沉澱 - 博客園 (cnblogs.com)
解決
第一感覺是博客園升級把引入的js屏蔽了,F12發現罪魁禍首是所有的a標籤都被強行加了屬性:
因爲這段js是自己定義的, 被博客園加上rel屬性後, return的a標籤字符串拼接出現語法錯誤. 導致<img>未按預期加上<a>, 放大功能自然也失效了. 原代碼:
方案一: 在覈心代碼給img包裹a標籤處手動加上rel
既然被強行加上rel屬性, 那我自己先加上還不行嗎?
"<a rel='nofollow' href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"
然並卵, 還是會被強制添加rel="nofollow"
方案二: 投機一下
發現個規律, rel屬性都是a標籤的第一個屬性, a標籤被強行加上rel屬性, 那如何識別a標籤的?能不能把<a拆開拼接?轉念一想即使拆開拼接後, 結果不一樣是<a麼?
行不行試一下先:
結果竟然成功給img包裹a標籤了
表示迷門, 觸及到知識盲區了
加上的rel="nofollow"有啥用?
nofollow主要有三個作用：
1.防止不可信的內容，最常見的是博客上的垃圾留言與評論中爲了獲取外鏈的垃圾鏈接，爲了防止頁面指向一些拉圾頁面和站點。
2.付費鏈接：爲了防止付費鏈接影響Google的搜索結果排名，Google建議使用nofollow屬性。
3.引導爬蟲抓取有效的頁面：避免爬蟲抓取一些無意義的頁面，影響爬蟲抓取的效率。
伸手黨福利
使用lightbox圖片放大功能, 在頁腳html處粘貼以下代碼即可:
<!-- lightbox的樣式 -->
<link href="https://blog-static.cnblogs.com/files/yadongliang/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心代碼 -->
<script src="https://blog-static.cnblogs.com/files/yadongliang/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<" + "a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
<script type='text/javascript'>$(".code_img_closed").unwrap();</script>
<script type='text/javascript'>$(".code_img_opened").unwrap();</script>