网站搭建过程中遇到的问题

npm换源

网络上的一些npm换源文章里的镜像源已经过期了，但内容没有更改

更换新的镜像源

npm config set registry https://registry.npmmirror.com #用于npm
yarn config set registry https://registry.npmmirror.com #用于yarn

有很多可以用的镜像源, 可参考国内npm源镜像

如果换源之后依然报错可能是在文件中锁定了源, 可以通过编辑器的查找替换功能进行修改

.*.github.io访问失败

可以通过更改网络的DNS服务器地址解决

取消自动选择, 使用下面的DNS服务器地址

首选DNS服务器(P): 223.5.5.5

备用DNS服务器(A): 223.6.6.6

刷新DNS解析缓存

在终端输入

ipconfig/flushdns

如果还是不行可以试试其他的DNS服务器

因网络问题, Git无法连接到GitHub

修改电脑上的host文件

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

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

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

解决办法

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

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

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

在butterfly主题下的解决办法

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

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

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

如果想指定某个元素的referrer

假如说是

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

可以添加referrerPolicy属性

<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的线条还要细的图标

Font Awesome官网

注入器(Injector)

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

添加Live2D模型

详细内容可以参考nova1751/live2d-api: nova1751自建的live2d_api (github.com)

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

详细内容可以参考

Hexo + Butterfly 自定义右键功能 | JayHrn (lvhrn.cn)

Hexo博客实现页面随机跳转 | JayHrn (lvhrn.cn)

自定义页面类型

以创建网站收藏页面为例

详细内容可以参考Butterfly如何自定义页面，简单明了！创建自己的网站收藏页面 | JayHrn (lvhrn.cn)

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

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

详细内容可以参考Butterfly标签云增加文章数上下标 | JayHrn (lvhrn.cn)

哔哩哔哩卡片标签外挂

设置方法

设置方法可以参考哔哩哔哩卡片标签外挂 | Leonus

使用方法

使用这个标签外挂需填写视频链接和时长(时长可以不填)

例如

{% bilibili https://www.bilibili.com/video/BV1h84y1Y7nn 36:02 %}
<!-- 如果想要隐藏简介，添加true即可（注意，要隐藏简介则必须填写视频时间！），如下 -->
{% bilibili https://www.bilibili.com/video/BV1h84y1Y7nn 36:02 true %}

第一行(不隐藏简介)的效果为

hint: 同一个视频的卡片不能同时显示, 如果同时设置多个同一个视频的卡片, 只会在第一个位置显示(且样式会被最后一个的样式覆盖)