解决 hexo 博客的图片链接失效问题


1.首先找到 hexo 博客的主题文件夹目录

D: \Blog_leader755\Blog_leader755\themes\Blog_leader755\themes\halo\Blog_leader755\themes\halo\layout\Blog_leader755\themes\halo\layout\_partial\Blog_leader755\themes\halo\layout\_partial\head.ejs;

修改上述路径的文件 head.ejs ,因为每个页面都会包含 head 这个文件,在里面加上一行代码就能解决。

2.加入此行代码到页面

<meta name="referrer" content="no-referrer" />

3.暂时解决载了外链限制的问题

image.png

4.随之而来的问题出现了

如果你同时使用了 不蒜子 (https://busuanzi.ibruce.info/)统计,你会发现问题,查看控制台会出现不蒜子出现跨域的请求。这是为什么呢。由于使用了 no-referrer。

关于 no-refferrer 的相关问题可以自行搜索,在这里就不一一解释,直接给出解决方案。

5.目前的解决方案

1>方案-:

按照网友的说法是,meta 是可以放在 <body> 里的吧。
所以把 <meta name="referrer" content="never"> 放到 archive-book.ejs 的最前面。
然后在网页结构里就会是这个样子:

......
<head> </head>
<body class="main-center no-sidebar okayNav-loaded" ...>
  <header class="header" ...>
  <aside class="sidebar" ...>
  <main class="main" role="main">
    <meta name="referrer" content="never">
    <article class="article article-links article-type-list" ...>
......

在它之上的所有链接都会带来源信息,之后的就是 no-referrer 了。所以理论上也就规避了图片的防盗链了。
划重点,但是并没有如愿解决不蒜子的跨域问题。

2>方案二:终极解决方案

由于可以给 [<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [<area>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area), [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [<iframe>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), 或者[<link>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)元素设置referrerpolicy属性。

<a href="http://example.com" referrerpolicy="no-referrer">

所以,可以为所有文章内的图片动态添加 referrerpolicy 属性,通过查看控制台找到图片 img 的类名
image.png

在文件夹中全局搜索类名,找到如下代码:
image.png

//为文章内的图片添加no-referrer来隐藏referer(解决第三方图片外链不显示问题)
$(this).attr("referrerPolicy", "no-referrer");

注意每个主题中的文章下的图片类名应该都不一致,所以类名需要根据实际情况,在控制台中查找文章中的图片类名,再去找相应的代码,为其动态添加 referrerPolicy 属性。


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
PicGo+ 又拍云创建个人图床工具 PicGo+ 又拍云创建个人图床工具
1.首先注册又拍云账号点击云存储,创建新的云存储服务 2.创建服务设置服务名称(唯一的性),加速区域 看自己需求决定。选择暂不授权。点击创建,创建成功过后会弹出成功框。 3.进入配置,点击进行绑定自己的域名 划重点,敲黑板(估计很多同学会搞
2020-06-03
下一篇 
4.mac 上使用 vi 4.mac 上使用 vi
上一篇博客提到 mac 进入 vi 编辑界面,复制 ssh key。这篇就是介绍如何保存退出 vi。 如果是 vi,则:Esc 退出编辑模式,输入以下命令::wq 保存后退出 vi,若为 :wq! 则为强制储存后退出(常用):w 保存但不退
2019-11-23
  目录