小道博客

Android和前端知识的技术积累

0%

hexo博客更换主题

之前用hexo搭建完博客之后,发现官方默认的主题太丑,反正是不太符合我的审美了,好像我的审美也不咋滴o(╯□╰)o
既然主题不好看,那就得换一套,实在不行也可以自己改改样式。
改称自己喜欢的样子,这里不做过多讨论。
那么问题就简单了,选一套符合自己口味的主题,然后更换。

第一步:选择主题

主题从哪里找呢?官方就有提供了一些 主题,可以从中选择。
官方提供的主题不少,可是并不一定有自己喜欢的或者又很难选择,这是个头疼的问题。
之前我的博客主题就是随便选了一个还算看的过去的。
但是再使用的过程中发现了一些问题:

  • 不会自动生成目录
  • 不能自动获取摘要
  • 有很多配置不太方便

虽然有些问题,但并不影响整体使用,所以也没想去换主题了。
前端时间逛知乎,发现这样一个问题:有哪些好看的 Hexo 主题?
查看第一名的答案,有个主题排行,发现排第一名的主题 next
然后点开主题看了一下,发现主题简约,配置详细,能够解决我之前存在的问题,于是就决定选择这个主题了。

第二步:安装主题

Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为 站点配置文件,后者称为 主题配置文件。

Hexo 安装主题的方式非常简单,只需要将主题文件放置于站点目录的 themes 目录下,然后修改下配置文件即可。具体到 NexT 来说,安装步骤如下。

下载 NexT 主题

下载NexT主题稳定版:

  1. 前往 NexT 版本 发布页面
  2. 选择你所需要的版本,下载 Download 下的 Source Code (zip) 到本地。 例如,下载 v0.4.0 版本:
  3. 解压所下载的压缩包至站点的 themes 目录下,并将 解压后的文件夹名称(hexo-theme-next-0.4.0)更改为 next

启用NexT主题

克隆/下载 完成后,打开 站点配置文件,找到 theme 字段,并将其值更改为 next

验证主题是否启用

运行 hexo s --debug,并访问 http://localhost:4000,确保站点正确运行。

第三步:配置

选择 Scheme

NexT 通过 Scheme 提供主题中的主题。 Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在 主题配置文件 中将 #scheme: Mist 前面的 # 注释去掉即可。

语言设置

编辑 站点配置文件,将 language 设置成你所需要的语言。
例如选用正体中文,则配置为:

1
language: zh-Hans

可用的语言如以下表格所示:

语言 代码 设定值
English en language: en
简体中文 zh-Hans language: zh-Hans
French fr-FR language: fr-FR
正体中文 zh-hk/zh-tw language: zh-hk
Russian ru language: ru
German de language: de

菜单设置

菜单配置在 主题配置文件的 menu。 若你的站点运行在子目录中,请将链接前缀的 / 去掉。默认支持的菜单项有:

键值 设定值 comment
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页(需手动创建)
tags tags: /tags 标签页(需手动创建)
about about: /about 关于页面 (需手动创建)
commonweal commonweal: /404.html 公益 404 (需手动创建)

菜单示例配置:

1
2
3
4
5
6
7
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html

侧栏设置

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示。可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。

支持的选项有:

  • post - 默认行为,在文章页面(拥有目录列表)时显示
  • always - 在所有页面中都显示
  • hide - 在所有页面中都隐藏(可以手动展开)

侧栏示例配置:

1
sidebar: post

头像设置

编辑 站点配置文件,新增字段 avatar, 值设置成头像的链接地址。

其中,头像的链接地址可以是:

地址
完整的互联网 URL https://avatars1.githubusercontent.com/u/32269?v=3&s=460
站点内的地址 /uploads/avatar.jpg - 需要将你的头像图片放置在 站点的 source/uploads/(可能需要新建uploads目录)
  /images/avatar.jpg - 需要将你的头像图片放置在 主题的 source/images/ 目录下

头像设置示例:

1
avatar: https://avatars1.githubusercontent.com/u/32269?v=3&s=460

作者名称

编辑 站点配置文件,设置 author 为你的昵称。

站点描述设置

编辑 站点配置文件,设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

总结

到这里整个主题更换和配置就已经完成,现在可以看到博客已经成为预期的样子了。
如果更换其它的主题,也大同小异,都是这三步,只是涉及到具体的配置就有些区别而已。

更多的配置可以参考下面的链接:

最后附上NexT下载地址:
https://github.com/iissnan/hexo-theme-next