​ 该文章基于aircloud/hexo-theme-aircloud: A concise hexo theme (github.com)的hexo博客主题搭建,里面虽然已经有教程,但是当我这个小白照着做的时候仍然遇到一些问题。所以现在写一篇文章来聊聊我遇到的一些问题吧。

中文问题

​ 默认是英文页面。需要改为中文。

博客搭建1

​ 找到_config.yml,将language: en一栏改为language: zh

博客搭建2

​ 部署hexo s查看情况

博客搭建3

头像问题

​ 跟着做之后,我遇到了头像无法正确解析的问题。

博客搭建4

​ 这可能是原博客的设置问题,通过以下方法即可解决。

​ 1.打开\themes\hexo-theme-aircloud\layout\_partial\nav.ejs,找到

1
<img src="<%= config['root'] %><%= config['sidebar-avatar'] %>" />

博客搭建5

​ 将这一行改为

1
<img src="<%=theme.avatar%>" class="js-avatar show" />

博客搭建6

​ 2.将自己的头像放在\themes\hexo-theme-aircloud\source\img\下

博客搭建7

​ 3.打开\themes\hexo-theme-aircloud_config.yml,在后面添加下面代码(将avatar.jpg改为自己的图像文件名,如果用图床方法则改为url,具体方法参考后面的部署到图床上)

1
avatar: /img/avatar.jpg

博客搭建8

​ 4.部署hexo s查看情况

博客搭建9

博客文章加载问题

​ 当我点开博客文章的时候,显示

博客搭建10

​ 这是因为_config.yml默认设置问题,将里面的url改改就行了。如果本地测试改成http://localhost:4000

博客搭建11

​ 之后就可以正常打开文章了。

图片问题

图片插入两种方法

直接放到本地

​ 优点:直接

​ 缺点:GitHub加载图片慢,且图片保存在本地占空间,每次插入图片都要自己输入路径,还不能在本地Typora加载图片。本主题还会将小图片拉大。

​ 图片直接放到本地博客\source\img\下,然后在Typora下想要插入图片的位置加上

1
![](/img/xxx.jpg)

部署到图床上(推荐)

​ 优点:选择国内服务器的话图片加载快,省本地空间,Typora与PicGo搭配效率高。

​ 缺点:第一次部署相对麻烦,不够直接,图片不保存在本地可能会被删库跑路(也可以自己备份就是了)。

​ 先介绍几个概念。

图床

​ 图床一般是指储存图片的服务器。选择国内的图床加载快。下面给出一些免费的图床网站,本博客只演示目前在我这里最快的图床——vika。

​ 维格表vika:https://vika.cn/

​ ImgTP:https://www.imgtp.com/

​ bilibilli(用这个怕被叔叔封号,且存在跨域问题):https://www.bilibili.com/

PicGo

​ PicGo是一个用于快速上传图片并获取图片 URL 链接的工具,关键是他可以与Typora配套一起使用,在粘贴图片的同时上传图片,十分方便!

Releases · Molunerfinn/PicGo (github.com)

​ 建议优先选择带有绿色Latest版本,本文演示的是2.3.1版本,本人是Windows64位系统,我选择下载PicGo-Setup-2.3.1-x64.exe版本,并安装。

image-20230319123114541

​ 安装后打开可能会提示要更新,建议先不要更新。然后点开插件设置,搜索并安装vikadata插件。

image-20230319124309658

​ 安装好后重启一下软件,点开PicGo设置,滑到最下面把请选择显示的图床都取消勾选,留下vika维格表(如果你用其他的图床就不要取消那个勾选)

image-20230319124426477

​ 点图床设置->vika维格表

image-20230319124648183

​ 之后在vika注册账号,注册好登录后可以填我邀请码05665721,能拿1000 V币,3000 V币可以找客服扩容。点左下角头像->邀请好友注册领取1000 V币里面填写即可。

image-20230319140715681

​ 一个空间有1G的容量,每个人大概可以创建10个空间,一个图片也才几百KB,所以这些完全够用了。

​ 接下来创建维格表点+号->新建空白维格表。

image-20230319141129630

​ 可重命名为图床

image-20230319143131038

获取API Token

​ 随后点击左下角头像->个人设置,绑定自己的邮箱后,获取API Token

image-20230319160531198

image-20230319141859374

image-20230319142109256

获取维格表ID

image-20230319142639209

image-20230319143541221

​ 另外两栏可以选默认。点确定后可以试试上传。可以自己调链接格式。

image-20230319143541221

上传成功后可以点相册->复制到markdown或者浏览器查看情况。

image-20230319143541221

设置Typroa

​ 点文件->偏好设置

image-20230319143541221

​ 点开后按照图片那样设置。

image-20230319150646293

image-20230319150246053

设置好后你可以直接复制粘贴到markdown并自动上传图片了,十分方便。

当使用本地图片时

如果用以下插入图片的方法

1
![](本地路径)

​ 设置的图片大小可能会小图片拉大太糊,或者长图片显示太小,于是建议使用嵌入HTML代码的方法来自定义大小直至到满意的尺寸。

​ 1.先在\source\img\下放自己想要的图片,如test.jpg

​ 可以先在外面包围div来居中,如:

1
2
3
<div align="center">    
<img src="xxx" />
</div>

​ 这虽然在Typora上是认不出来,但是在本地测试部署上的网页是正常的。

​ 一般比较长的图片或者正常的图片也不用再添加格式样式来改,但是对于宽的图片最好还是要缩放。以下是反例。

​ 下面是加上缩放,缩放长高都设为100%。具体多少视情况而定。
1
2
3
<div align="center">    
<img src="xxx" width="100%" height="100%"/>
</div>

网页标题问题

​ 搭建后点开文章,发现标题有个undefined

image-20230327152753641

​ 打开\_config.yml,加上

1
SEOTitle: 替换undefined的内容

网页上方座右铭

image-20230327163809685

​ 打开\_config.yml,加上

1
subtitle: "你的座右铭"

2023.5.15更新用维格作为图床403Forbidden问题

前几天上博客看了下,图片都是403Forbidden,估计是维格那边的政策变了。于是找了解决方法。

打开\themes\hexo-theme-aircloud\layout\_partial\head.ejs,在几行meta之间加上

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

image-20230515160307762

然后再部署就正常了

2023.12.16更新博客转移到自己服务器上

参考文章将 Hexo 搭建的博客站点从 GitHub Pages 迁移到腾讯云 VPS - 知乎 (zhihu.com)

证书申请使用了let’s encrypt的自动更新证书certbot功能https://certbot.eff.org