【Hexo搭建个人博客】（五）第三方主题（Next）的基本配置

mculover666
546 阅读4分钟

0. 引言

更换 Hexo 主题非常容易，只需要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题。

在Hexo官方页面给出了很多Hexo主题，可以前往寻找一个喜欢的主题。

1. 配置使用Next主题

1.1.下载

这里我选择iissnan 的hexo-theme-next主题，放上其github 。

首先进入博客的theme目录，如图：

然后将主题克隆下来：

1.2.修改网站配置文件

git克隆完成后，打开当前目录下的“_config.yml”配置文件，找到theme的配置选项，将theme选项配置为我们新下载好的next主题即可：

1.3.预览

首先清除之前生成的页面，生成新的页面：

hexo clean && hexo g

然后在本地启动服务：

hexo s


在浏览器输入http://localhost:4000查看效果预览：

2. Next主题设定

Next的主题配置文件_config.yml在主题文件夹下，关于NexT主题的更多配置和使用方法，包括第三方服务，可查看 Next官网。

2.1.选择 Scheme

Scheme用来设置NexT主题的外观，目前 NexT 支持三种 Scheme：

  • Muse：默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist：Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces：双栏 Scheme，小家碧玉似的清新

在主题配置文件，搜索 scheme 关键字，有三行 scheme 的配置，将需用启用的 scheme 前面注释符 # 去除即可：

2.2. 设置界面语言

编辑站点配置文件， 将 language 设置成简体中文，配置如下：

2.3. 设置菜单

菜单配置包括三个部分：

  • 菜单项（名称和链接）；
  • 菜单项的显示文本；
  • 菜单项对应的图标；

编辑 主题配置文件，修改以下内容：

  1. 设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name是一个名称，这个名称用于匹配图标，并不直接显示在页面上：
  2. 设置菜单项的显示文本，在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本，这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言，这里选择zh-CN.yml）：
  3. 菜单项的图标设置

    最后设置好的页面如下：

2.4.设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。

通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为，侧栏的设置包括两个部分：

  • 侧栏的位置
  • 侧栏显示的时机
  1. 设置侧栏的位置（目前仅 Pisces Scheme 支持 position 配置） ，修改 sidebar.position 的值，支持的选项有：
  • left - 靠左放置：
  • right - 靠右放置：
  1. 设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：
  • post - 默认行为，在文章页面（拥有目录列表）时显示
  • always - 在所有页面中都显示
  • hide - 在所有页面中都隐藏（可以手动展开）
  • remove - 完全移除

2.5. 为侧栏菜单项添加页面（关于、标签、分类）

在博客根目录打开Git bash，输入：

hexo new page about


然后在自动生成的这个md文档中添加类型：

然后在此文档中编辑，请参考：博客“关于我们”页面写什么？。

编辑完后成部署即可。

同样的方法，新建“标签”页面和“分类页面”

hexo new page tags
hexo new page categories

其中tags页面内容为：

---
title: 标签
date: 2019-05-29 14:45:15
type: "tags"
comments: false
---

categories页面内容为：

---
title: 分类
date: 2019-05-29 14:49:08
type: "categories"
comments: false
---

2.6. 设置头像

编辑主题配置文件， 修改字段 avatar， 设置成头像的链接地址，链接地址可以是网络URL，也可以是站点内的地址。

  1. 将头像图片放置在 source/images/ 目录下；
  2. 在主题配置文件中配置为：avatar: /images/avatar.png：

2.7. 设置网站图标

编辑主题配置文件， 修改字段 favicon， 设置成网站图标的链接地址：

  1. 将头像图片放置在 source/images/ 目录下；
  2. 在主题配置文件中配置：

2.8. 设置作者昵称和站点描述

在站点配置文件中设置：

2.9. 设置页底信息

2.10.设置右上角Github链接

最后主页效果如下：

底部信息栏效果如下：

2.11. 添加RSS

先安装 hexo-generator-feed插件：

npm install hexo-generator-feed --save


安装之后编辑站点设置文件，添加以下内容：

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '


最后打开 主题配置文件 搜索rss，设置为：

avatar
文章
阅读
粉丝