博客不显示在gitee存储的图片

在网站加载图片时发送的请求标头中包含referrer值,这个值可能为当前网站的域名。只有当referrer值是gitee官网或者不存在referrer时会响应请求的图片。

referrer的值是由浏览器决定的无法修改(调试只能临时更改看效果,所以不算)。默认情况下当网站进行降级请求时,为了安全referrer头部也不会发送(但是gitee好像设置了只能通过https://请求,不能用http://)。

解决办法

在网站页面的head标签里添加

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

使网站发送的请求中不包含referrer, 浏览器默认的content值是no-referrer-when-downgrade

在butterfly主题下的解决办法

这个博客网站用的是butterfly主题,给网站的每个页面都添加这个meta标签显然十分麻烦,可以修改主题生成网页头部内容时用到的head.pug文件。这个文件在主题目录下的layout\includes文件夹下, 在文件写meta标签的地方上加一行

1
meta(name="referrer" content="no-referrer")

这样的话主题生成的页面的head标签里都会带有这个内容

如果想指定某个元素的referrer

假如说是

1
<link rel="shortcut icon" href="https://gitee.com/*/22.png" type="image/x-icon">

可以添加referrerPolicy属性

1
<link rel="shortcut icon" referrerPolicy="no-referrer" href="https://gitee.com/*/22.png" type="image/x-icon">

以下是不同referrer值的含义

no-referrer: 当设置为 no-referrer 时,浏览器在任何情况下都不会发送 HTTP Referer 头部。这意味着无论是在同一个域名内导航还是跨域导航,都不会有 Referer 头部被发送。
no-referrer-when-downgrade (默认值): 这是默认行为。当设置为 no-referrer-when-downgrade 时,浏览器仅在从 HTTPS 导航到 HTTP 时不发送 Referer 头部,以避免用户信息泄露给不安全的站点。在其他情况下,比如同为 HTTPS 或从 HTTP 导航到 HTTPS,Referer 头部会被发送。
origin: 当设置为 origin 时,浏览器会发送一个只包含域名(不包括路径或查询字符串)的 Referer 头部。这适用于同源请求和跨域请求。
origin-when-cross-origin: 当设置为 origin-when-cross-origin 时,对于同源请求,浏览器会发送完整的 Referer 头部。对于跨域请求,则只发送域名部分。
same-origin: 当设置为 same-origin 时,Referer 头部仅在请求的目标是相同来源时发送。如果请求是跨源的,则不会发送 Referer 头部。
strict-origin: 类似于 origin,但当导航到一个降级的协议(例如从 HTTPS 到 HTTP)时,Referer 头部会被省略。
strict-origin-when-cross-origin: 类似于 origin-when-cross-origin,但当导航到一个降级的协议时,Referer 头部会被省略。
unsafe-url: 这是一个不安全的选择,因为它会发送完整的 Referer 头部,即使在跨域请求中也是如此,这可能会导致用户信息泄露。

关于butterfly主题使用的Font Awesome图标

表格内容为不同版本图标的前缀,以及它的说明

Version 5 Version 6 图标前缀的含义
fas fa-solid solid(实心的, 加粗的), 实心图标
fab fa-brands brand(商标), 是一些品牌的图标, 例如, GitHub, Bilibili
fad fa-duotone doutone(双色的), 由两种颜色(基本上是深灰和浅灰)设计的图标
far fa-regular regular(常规的), 与fas相反, 线条图标
fal fa-light light(轻的), 比far的线条还要细的图标

注入器(Injector)

除了在butterfly主题的配置文件(_config.butterfly.yml)中的inject部分和butterfly主题的原文件中可以加入自己想要加入的静态代码片段之外, 还可以通过Hexo本身自带的注入器(Injector)功能添加。
更多内容可以参考官网

添加Live2D模型

详细内容可以参考

自定义右键和页面随机跳转

详细内容可以参考

自定义页面类型

以创建网站收藏页面为例

详细内容可以参考

在标签右上角增加相应文章数量

在原有用标签字体大小表示相应文章数量的基础上, 让标签右上角显示文章数量

详细内容可以参考

设置文章置顶

在文章的Front Matter中添加 sticky属性, 即可在首页置顶该文章. sticky值越大, 越靠前

Web端引用iconfont

引用方法可以参考