这篇文章主要汇集了一些先驱者在搭建过程中遇到的各种问题,如果正在搭建博客的你正好遇到了文章中所提到的问题,可以先尝试着按对应策略去解决,如果无法解决,可在评论区留言。

前言

本站基于Hexo搭建,用的 🦋 hexo-theme-butterfly 主题 v3.7.1,请注意最新的🦋 hexo-theme-butterfly 版本已经更新到 v4.3.0

如果你是 v3.7.1 之外的版本,可能有些地方会有出入,请留意。

注意:我的博客根目录路径为 【G:/hexo-blog/blog-demo】,下文所说的根目录都是此路径,将用[BlogRoot]代替。如果不清楚根目录路径,请回到教程 基于 Hexo 从零开始搭建个人博客(二),查看你执行hexo init xxx这条命令时所选择的路径,例如我选择的路径是【G:/hexo-blog】,我的博客根目录即为【G:/hexo-blog/xxx】。

修改站点配置文件_config.yml,路径为【BlogRoot/_config.yml】。

修改主题配置文件_config.butterfly.yml,路径为【BlogRoot/_config.butterfly.yml】。

如果改动了站点配置文件_config.yml 和主题配置文件_config.butterfly.yml,需要重新编译才能看到效果。

关于自定义的 js 和 css 文件

可以分别在 source/js、source/css 文件夹下创建自己的 js 和 css,只要在主题配置文件_config.butterfly.yml中的inject引入即可。

css文件在 head 引入,js文件 在 bottom 引入,这里表示加载的顺序而已,你也可以把 js 放到 head 部分,视情况而定。

大致的规则如下:

inject:
head:
# 自定义css
- <link rel="stylesheet" href="/css/custom.css">
bottom:
# 自定义js
- <script src="/js/custom.js"></script>

博客为什么是英文,如何换成中文?

修改站点配置文件_config.yml,将language设置成zh-CN

本地预览样式正常,部署后样式错乱?

修改站点配置文件_config.yml,如果未购买域名,将url设置成<用户名>.github.io,如果已经购买域名,将url设置成你的域名,再重新部署即可看到效果。

顶部出现 Loading

生成前先执行命令行 hexo clean

首页打字机效果

在主题配置文件_config.butterfly.yml中搜索subtitle,按照提示去配置即可。

搜索栏为什么出现在底部?

如果执行hexo deploy后在站点进行搜索,搜索栏出现在页面底部或样式错乱,如下图:

执行hexo generate前先执行hexo clean,在执行hexo deploy

建议执行命令的顺序为:【hexo clean】->【hexo generate】->【hexo deploy】

鼠标在有序标签上会旋转是怎么实现的?

给 hover 加一个 旋转的属性就行了,把这段代码加到你自定义的 css 里就行了

#article-container ol li:hover:before
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}

星光背景没效果?

星光背景只在黑夜模式下有明显效果,如果想让主题默认设置为黑夜模式,修改主题配置文件_config.butterfly.yml,将display_mode设置为dark即可。

首页博客卡片出场动画效果如何实现?

这个效果 用到了 wow.js,你可以参考另外一篇文章,选择标志着推荐的插件配置方案 wow.js引入教程

豆瓣插件运行 hexo douban 没爬到东西

node 版本过高导致,可以下个 nvm 来控制 node 版本,建议安装较低的 node 版本(推荐v12.18.0)

部分页面顶部视频效果

效果请移步 留言板友链,这个需要改动源码,具体操作请看第六篇中的提到的 部分页面插入视频

关于相册的一些问题

相册页面页只是普通的页面,你只需要hexo new page xxxxx 创建你的页面就行。

然后使用标签外挂 galleryGroup,具体用法请查看对应的内容。

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://bu.dusays.com/2021/03/06/38a2c5cd8b44e.jpg %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

效果如下:

基本的格式为:

{% galleryGroup '相册名' '相册描述' '盛放相册内容的页面路径' 相册封面 %}

关于【盛放相册内容的页面路径】,也就是子页面,这里再解释一下,例如:【/Gallery/wallpaper】,被编译过后其实它的目录结构变成了【/Gallery/wallpaper/index.html】。所以你只需要在【Gallery】文件夹下新建一个名为【wallpaper】的文件夹,【wallpaper】下的文件就是盛放【收藏的一些壁纸】的容器,让它去展示相册内容,你可以新建【index.md】,也可以新建【index.html】(这里如果是 html 文件,不需要被编译,可配置站点配置文件_config.yml,让它跳过编译),建议你用 markdown,所以在【wallpaper】的文件夹下新建一个【index.md】即可。

在子页面,也即是【/Gallery/wallpaper/index.md】中,你可以用【gallery】去展示相册,

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

效果如下:

你也可以正常的去写 markdown,我的相册以及子页面的效果如下:

相册页效果
相册页效果
子页面效果-01
子页面效果-01
子页面效果-02
子页面效果-02

域名已经解析到github, 但是输入xxx.github.io却报404

这时候检查你的项目根目录有没有一个名为CNAME的文件。如果没有的话,打开博客/source目录,我的是G:/hexo-blog/blog-demo/source,新建CNAME文件,注意没有后缀。然后在里面写上你的域名(例如:tzy1997.com),保存。最后运行hexo ghexo d上传到github。这样到最后当你在地址栏输入xxx.github.io时,才会自动跳转到你的域名。

ERROR TypeError: D:\008-Player\002-Todo_Web\005-Blog\node_modules\hexo-theme-butterfly\layout\includes\page\flink.pug:13
11| .flink-desc!=i.class_desc
12| .flink-list
> 13| each item in i.link_list
Cannot read properties of undefined (reading ‘length’)

如果报这个错误,请检查link.yml的格式。正确的格式为:

- class_name: 友情链接
class_desc: 那些人,那些事
link_list:
- name: 唐志远の博客
link: https://tzy1997.com/
avatar: https://bu.dusays.com/2022/05/02/626f92e193879.jpg
descr: 古今之成大事者,不惟有超世之才,亦必有坚忍不拔之志。
- class_name: 网站
class_desc: 值得推荐的网站
link_list:
- name: Twitter
link: https://twitter.com/
avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
descr: 社交分享平台
- name: Youtube
link: https://www.youtube.com/
avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
descr: 视频网站
- name: Weibo
link: https://www.weibo.com/
avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
descr: 中国最大社交分享平台

err: Error: ENOENT: no such file or directory

err: Error: ENOENT: no such file or directory, open ‘E:\blog\themes\butterfly\layout\includes\loading\load_style\gear.pug’

Error: ENOENT: no such file or directory,如果你遇到了这个错误,有可能是你的文件名、分类或者标签的名字混淆了大写和小写,你可以尝试检查每一个标签和分类的名称,是否大小写一致来修复这一问题。可以看下官方给出的问题解答 https://hexo.io/zh-cn/docs/troubleshooting

Twikoo + Vercel 部署时出现 504 GATEWAY_TIMEOUT

检查 创建 MongoDB 数据库用户的时候,是否设置好允许所有 IP 地址(0.0.0.0/0)连接。

Twikoo + Vercel 部署时出现 1000 bad auth : Authentication failed

如果报了如下错误:

{
"code":1000,
"message":"bad auth : Authentication failed."
}

请检查第 7 步:进入【Settings】->【Environment Variables】,添加环境变量【MONGODB_URI】时,目标字符串中的<password>是否替换成了 第 3 步中的【数据库密码】。