白都

linBaiDu

0%

hexo主题的更换与优化和域名的配置

发表于 更新于

一、选择主题

目前 Hexo 里面应用最多的主题基本就是 Next 主题了，我用的就是Next，另外它支持的插件和功能也极为丰富。

二、下载主题

我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。

1
https://github.com/theme-next/hexo-theme-next

命令行进入到blog项目的根目录，执行如下命令即可：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。
然后需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

1
theme: next

然后本地重新开启服务，访问刷新下页面，就可以看到 next 主题就切换成功了

Next 主题内部也提供了一个配置文件，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。

3.1 样式

Next 主题还提供了多种样式，风格都是类似黑白的搭配，但整个布局位置不太一样，通过修改配置文件的 scheme 字段即可，我选了 Pisces 样式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：

1
scheme: Pisces

3.2 favicon

https://realfavicongenerator.net/

avicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，如果我们有站点 Logo 的图片的话，我们可以自己定制小图标。到这里上传一张图，便可以直接打包下载各种尺寸和适配不同设备的小图标。

图标下载下来之后把它放在 themes/next/source/images 目录下面。
然后在配置文件里面找到 favicon 配置项，把一些相关路径配置进去即可，示例如下：

1
2
3
4
5
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

也可以将图标上传至网上通过链接获得

3.2.1 将图片上传至网络

[薄荷图床 首页 -图床外链生成器-亚马逊图片上传-无限流量-全球加速-无限数量-图片转链接-跨境电商图片空间-图片托管 (riyugo.com)](https://riyugo.com/)

上传后将路径改为地址即可

3.3 avatar

将1.png 图片放置到 themes/next/source/images/1.png 路径，然后在主题 _config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。

1
2
3
4
5
6
7
8
9
10
# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: true

3.4 top

在浏览网页的时候，想快速返回到网站的上端，一般都是有一个按钮来辅助的，这里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的设置如下：

1
2
3
4
5
6
back2top:	
  enable: true	
  # Back to top in sidebar.	
  sidebar: false	
  # Scroll percent label in b2t button.	
  scrollpercent: true

3.5 reading_process

reading_process，阅读进度。大家可能注意到有些站点的最上侧会出现一个细细的进度条，代表页面加载进度和阅读进度 ，修改_config.yml 如下：

1
2
3
4
5
6
reading_progress:	
  enable: true	
  # Available values: top | bottom	
  position: top	
  color: "#222"	
  height: 2px

3.6 pangu

希望写中文和英文的时候中间必须要留有间距，一个简单直接的方法就是中间加个空格。

pangu 就是来解决这个问题的，我们只需要在主题里面开启这个选项，在编译生成页面的时候，中英文之间就会自动添加空格，看起来更加美观。

1
pangu: true

3.7 pjax

pjax 这个技术实际上就是，利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，有可以做到无刷新加载。

要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 修改如下：

1
pjax: true

然后安装依赖库，切换到 next 主题下，然后安装依赖库：

1
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

四、发布文章

4.1、增加文章

需要调用 Hexo 提供的命令即可，比如我们要新建一篇「HelloWorld」的文章，命令如下：

1
hexo new hello-world

4.2、个性化设置

4.2.1 标签页

按上路径创建 index.md

里面输入内容

1
2
title: tags
type: "tags"

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

1
2
3
4
5
6
7
8
9
10
menu:	
  home: / || home	
  #about: /about/ || user	
  tags: /tags/ || tags	
  #categories: /categories/ || th	
  archives: /archives/ || archive	
  #schedule: /schedule/ || calendar	
  #sitemap: /sitemap.xml || sitemap	
  #commonweal: /404/ || heartbeat

分类页和标签页是一样的。

4.2.2 搜索页

我们需要搜索全站的内容，所以一个搜索功能的支持也是很有必要的。

如果要添加搜索的支持，需要先安装一个插件，叫做 hexo-generator-searchdb，命令如下：

1
npm install hexo-generator-searchdb --save

然后在项目的 _config.yml 里面添加搜索设置如下：

1
2
3
4
5
6
search:	
  path: search.xml	
  field: post	
  format: html	
  limit: 10000

在主题的 _config.yml 里面修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Local search	
# Dependencies: https://github.com/wzpan/hexo-generator-search	
local_search:	
  enable: true	
  # If auto, trigger search by changing input.	
  # If manual, trigger search by pressing enter key or search button.	
  trigger: auto	
  # Show top n results per article, show all results by setting to -1	
  top_n_per_article: 5	
  # Unescape html strings to the readable one.	
  unescape: false	
  # Preload the search data when the page loads.	
  preload: false

4.2.3 404页面

另外还需要添加一个 404 页面，直接在根目录 source 文件夹新建一个 404.md 文件即可，内容可以仿照如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---	
title: 404 Not Found	
date: 2019-09-22 10:41:27	
---	
 
	
<center>	
对不起，您所访问的页面不存在或者已删除。	
您可以<a href="   ">点击此处</a>返回首页。	
</center>	
 
	
<blockquote class="blockquote-center">	
    NightTeam	
</blockquote>

这里面的一些相关信息和链接可以替换成自己的。

五、更新部署&域名配置

5.1 Hexo更新

通过博客上面的地址输入框进入 cmd

1
2
3
hexo clean	
hexo generate	
hexo deploy

5.2 自定义域名

我本人是在华为云下面买的域名

在 GitHub 的 Repository 里面设置域名，找到 Settings，拉到下面，可以看到有个 GitHub Pages 的配置项，如图所示

下面有个 custom domain 的选项，输入想自定义的域名地址，然后添加 CNAME 解析就好了。

另外下面还有一个 Enforce HTTPS 的选项，GitHub Pages 会在我们配置自定义域名之后自动帮我们配置 HTTPS 服务。刚配置完自定义域名的时候可能这个选项是不可用的，一段时间后等到其可以勾选了，直接勾选即可，这样整个博客就会变成 HTTPS 的协议的了。

另外有一个值得注意的地方，如果配置了自定义域名，在目前的情况下，每次部署的时候这个自定义域名的设置是会被自动清除的。所以为了避免这个情况，我们需要在项目目录下面新建一个 CNAME 文件，路径为 source/CNAME，内容就是自定义域名。
我就在 source 目录下新建了一个 CNAME 文件，内容为自己的域名

可以避免了每次部署的时候自定义域名被清除的情况了。

有帮助的话可以来打赏一些或者经常来看看我哦，我在这里等你！