如何修改Hexo的主题

这是利用Hexo写博客以来的第一篇正儿八经的文章,就记一记眼下正在做的事情:给Hexo更换主题

文章主要内容是讲述更换主题的操作步骤,从本文你可以了解到:

  • 如何获取一个Hexo的主题
  • 如何安装和配置主题
  • 如何设置菜单、分类、标签、关于我等内容

Hexo主题的获取与安装

Hexo搭建完成之后,默认主题是这样的:

默认主题

想要修改这个主题,我们可以去Hexo的主题市场选择一个自己喜欢的主题。

我选择了简洁干净的NexT主题

按照GitHub中该NexT项目的Installation执行安装:

Step 1 进入Hexo目录

$ cd hexo
$ ls
_config.yml  node_modules  package.json  public  scaffolds  source  themes

step 2 获取NexT

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

step 3 设置NexT

在hexo根目录下,设置_config.yml文件:

theme: next

step 4 查看效果

hexo g
hexo d

安装并启用NexT主题之后,我的博客变了模样:

NexT

设置菜单


在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件
接下来,我们为新的主题配置菜单,菜单配置一般包括三个部分:

  • 第一是菜单项设置,包括菜单名称和链接
  • 第二是菜单项显示文本配置
  • 第三是菜单项对应的图标配置

设置菜单项的名称和链接

主题配置文件 中做如下配置

menu:
  home: /
  archives: /archives
  about: /about
  categories: /categories
  tags: /tags

提交修改,重新deploy后,由于还没有相应的页面,所以虽然在首页上出现了相应的菜单,但是点击链接确实404页面。
添加菜单项之后

创建存档、分类、标签等页面

以创建标签页面为例:

Step1 新建页面

1
2
$ cd your-hexo-site
$ hexo new page tags

Step2 设置页面类型

编辑刚刚新建的页面,将页面类型设置为 tags ,主题自动为这个页面显示标签云。

1
2
3
4
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---

其他页面按照标签页的创建方式依次创建即可。
创建完成后发布到github,稍等片刻会发现原来为404的标签页已经可以正常打开了。