网站搭建过程中遇到的问题
博客不显示在gitee存储的图片
在网站加载图片时发送的请求标头中包含 referrer,只有当 referrer 值是gitee官网或者不发送来源信息时会响应请求的图片
解决办法
在网站页面的head标签里添加
1 | <meta name="referrer" content="no-referrer" /> |
使网站发送的请求中不包含 referrer, 浏览器默认的 content 值是 no-referrer-when-downgrade
在butterfly主题下的解决办法
修改主题生成网页头部内容时用到的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(来源)值及含义
| Referrer 值 | 描述 | 同源请求发送内容 | 跨源请求(HTTPS → HTTPS)发送内容 | 跨源请求(HTTPS → HTTP)发送内容 |
|---|---|---|---|---|
| no-referrer | 不发送任何来源信息 | 不发送 | 不发送 | 不发送 |
| no-referrer-when-downgrade | 默认行为:HTTPS→HTTPS发送,HTTPS→HTTP不发送 | 发送完整 URL | 发送完整 URL | 不发送 |
| origin | 只发送源(协议+域名+端口),不带路径或参数 | 发送源 | 发送源 | 不发送 |
| origin-when-cross-origin | 同站发送完整 URL,跨站只发送源 | 发送完整 URL | 发送源 | 不发送 |
| same-origin | 只在同源请求中发送来源,跨域请求不发送 | 发送完整 URL | 不发送 | 不发送 |
| strict-origin | 只发送协议+域名,仅在安全协议之间发送 | 发送源 | 发送源 | 不发送 |
| strict-origin-when-cross-origin | 同源发送完整 URL,跨域只发送源(安全协议间) | 发送完整 URL | 发送源 | 不发送 |
| unsafe-url | 始终发送完整 URL,包括路径和参数 | 发送完整 URL | 发送完整 URL | 发送完整 URL |
关于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的线条还要细的图标 |
Font Awesome官网
Font Awesome
注入器 ( Injector )
除了在butterfly主题的配置文件 ( _config.butterfly.yml ) 中的 inject 部分和butterfly主题的原文件中可以加入自己想要加入的静态代码片段之外,
还可以通过 Hexo 的注入器 ( Injector ) 功能添加
更多内容可以参考官网
注入器(Injector) | Hexo
Hexo
添加Live2D模型
详细内容可以参考
nova1751/live2d-api: nova1751自建的live2d_api
github@nova1751
设置文章置顶
在文章的 Front Matter 中添加 sticky 属性, 即可在首页置顶该文章。 sticky值越大, 越靠前
Web端引用iconfont
引用方法可以参考
Web端如何引用iconfont - iconfont所有的引用方式
iconfont.js-CSDN博客
jsDelivr 缓存刷新方式
将链接的https://cdn.jsdelivr.net/... 替换成 https://purge.jsdelivr.net/...即可刷新。刷新成功后,浏览器会返回缓存刷新成功的信息
