博客园文章自定义的图片放大功能失效修复

前言

好一阵子没逛博客园了, 今天回自己博客搜点东西发现图片放大功能不好使了(不是之前lightbox效果了),感觉很奇怪,难道博客园样式升级连这个功能都给我屏蔽了?

当时记录的博文:博客园文章图片点击放大功能升级 - 习惯沉淀 - 博客园 (cnblogs.com)

解决

第一感觉是博客园升级把引入的js屏蔽了,F12发现罪魁祸首是所有的a标签都被强行加了属性:

 

 

 因为这段js是自己定义的, 被博客园加上rel属性后语法错误, 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"属性简介 - Raychan - 博客园 (cnblogs.com)

标签：img,自定义,加上,标签,博客园,rel,失效,属性
来源： https://www.cnblogs.com/yadongliang/p/15535933.html