前言

Hexo优化使你的博客更加好看，同时方便阅读。

本文记录了本人在Hexo博客优化的相关配置，以及遇到的一些问题。

主题选择

你可以在官方Hexo主题网页中选择你喜爱的主题，并进行相关优化。

注：本人使用的是Butterfly主题，选择一个好的主题是非常必要的。

如果选择的主题不好，出现一些问题是无法解决的；

博主之前踩过坑：比如本地配置完后没有任何问题，但是部署却发生意外的问题。

推荐选择比较火热的主题，出现问题也方面网上查询相关问题。

下文以butterfly主题开展重要的一些配置，希望对你有帮助！

主题安装

1
2
// 安装butterfly
cnpm i hexo-theme-butterfly

主配置

修改 Hexo 根目錄下的 _config.yml，把主題改為butterfly

1
theme: butterfly

检查根目录package.json文件

如果没有 pug 以及 stylus 的渲染器，则需要安裝

1
cnpm install hexo-renderer-pug hexo-renderer-stylus --save

主题文件

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

当然你也可以选择直接在主题目录_config.yml修改，但是考虑到减少升级主题后带来的不便，这样规范的做法更合理。

主配置的其他项

1
2
3
4
5
6
7
title: 网页标题
subtitle: 副标题
description: 描述信息
keywords: 关键词
author: 作者
language: zh-CN          // 语言：中文
timezone: Asia/Shanghai  // 时间：选择中国

其他的可以不用配置

主题配置

以下的_config.butterfly.yml配置为博主本人的部分配置，以及在butterfly文档中没有的一部分讲解，其中更加具体配置的您可以参考官方文档Butterfly主题

页面配置

1
2
// 创建页面
hexo new page 页面名称

Front-matter是markdown文档中最上方使用---隔开的部分，是用来配置页面可文章的地方。

其中：页面Front-matter一些重要的参数

字段 值
title 【必需】页面标题
date 【必需】页面创建日期（一般自动生成）
type 【必需】标签、分类和友情链接三个页面需要配置（其他自定也页面不需要）
top_img 【可选】页面顶部图片

404页面：

1
2
3
4
5
// http://localhost:4000/404.html(主题设置开启)
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

文章配置

字段 值
title 【必需】文章标题
date 【必需】文章创建日期（一般自动生成）
tags 【可选】文章标签
categories 【可选】文章分类
top_img 【可选】页面顶部图片
description 【可选】文章描述

设置文章分类categories的写法：

  • 嵌套分类（这样会使分类 Life 成为 Diary 的子分类。）
1
2
3
4
5
---
categories:
  - Diary
  - Life
---
  • 并列分类（这样会使分类 Life 成为 Diary 的子分类。）
1
2
3
4
5
---
categories:
  - [Diary]
  - [Life]
---
  • 并列嵌套分类

这样会使 PlayStation 和 Games 同为 Diary 的子分类，而 Life 和 Diary 是并列分类。

1
2
3
4
5
6
---
categories:
  - [Diary, PlayStation]
  - [Diary, Games]
  - [Life]
---

设置文章标签tags写法：

标签没有顺序性和层次性，只能设置为同级的。也就是说，标签只有一种用法：

1
2
3
4
5
6
---
tags:
  - PlayStation
  - Games
  - [Diary, Life]
---

这样会被解析为 PlayStation、Games、Diary,Life 三个并列标签。

description：需要配置生效。

1
2
3
4
// 选择method: 2，表示优先选择description，如果没有配置description，则显示自动节选的内容。
index_post_content:
  method: 2
  length: 500

实现Hexo的本地搜索

  1. 安装插件

    1
    cnpm install hexo-generator-search --save

  2. 配置根目录下的 _config.yml 文件

    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      content: true

  3. 修改主题配置文件

    1
    2
    local_search:
      enable: true

本地图片引用和图床

本地图片引用

在/source目录中新建images的文件夹，可以将图片放在里面。

在配置文件或者其他文章中图片的引用地址则：/images/xxx.jpg这样的路径，

进行hexo g后会发现public中出现一个images的文件夹，上方是按照这个路径来引用的。

图床搭建

利用第三的库，将图片上传到别人的服务器获取外链，可以直接通过浏览器访问。

博主使用的是免费聚合图床这一款服务，你也可以使用其他的服务。

注意：使用第三方一定需要做好备份！！！

Hexo文档中的跳转

1
2
3
4
5
6
7
8
9
10
// 上下文的跳转（地址就是文章标题）
[](#前言)

// 跳转到Hexo中的某文章
{% post_link Hexo搭建个人博客 %}
{% post_link Hexo搭建个人博客 %}

// 跳转到某文章的特定标题瞄点处
<a href="{% post_path '文章名称' %}#标题名称">显示文本</a>
<a href="{% post_path 'Hexo搭建个人博客' %}#参考">hexo搭建个人博客参考</a>

效果展示

跳转前言

Hexo搭建个人博客

hexo搭建个人博客参考

实现版本控制

可能你会发现上传到Gitee上，部署的只是一个静态的文件。

如果需要通过其他电脑实现开发，这就需要用到Git的版本控制。

具体实现参考Git分支

参考