Hexo安装NexT主题,并简单配置

想必你已经知道Hexo 是高效的静态站点生成框架,基于 Node.js。 使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

在之前的博客中,我们已经使用Hexo+github搭建起了自己的博客,但是我们也不难发现,默认的hexo主题比较丑,如何使用好看的hexo主题呢,这篇博客就告诉大家如何切换hexo主题,并进行简单的配置操作,以NexT主题为例。

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

首先还是向大家提供一个NexT的使用文档,这里讲解了NexT的使用方法和主题配置等大多数问题,缺点是该文档对应的版本比较低,在新的版本中有的内容已经不太适用,你可以参考本篇博客进行相应的更改,废话不多说,进入主题。

安装NexT

Hexo 安装主题的方式很简单,只需要将主题文件下载拷贝至站点目录的 themes 目录下, 然后修改配置文件即可。步骤如下:

下载主题

提供给大家NexT的github地址:https://github.com/theme-next/hexo-theme-next,这里讲述了如何下载,也附有很多NexT的插件地址,大家今后可能会经常用到。首先切换到你的博客目录,使用git下载:

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

这是使用https协议下载,如果你遇到文件过大无法下载,可能是跟你的网络有关,也有可能需要进行配置一下文件传输的命令,小编忘记截图,先提供一下解决命令:

$ git config http.postBuffer 524288000

如果这次配置还无法解决,你还可以使用SSH协议进行下载文件:

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

启动主题

启动主题比较简单,当你下载完主题之后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next

theme: next

到此,NexT 主题安装完成。我们来验证一下,首先使用 hexo clean 清除缓存,再使用hexo server开启本地模式,之后在浏览器输入localhost:4000查看是否安装成功。

你的和我的不一样很正常,因为我已经进行了很多配置的修改。下面我们进行一些简单的主题配置和修改。

主题配置

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 提供四种不同的外观,几乎所有的配置都可以 在 Scheme 之间共用。分别是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,默认导航栏在左
  • Gemini - 双栏 Scheme,默认导航栏在右

Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 会找到四行 scheme 的配置,将 scheme 前面的注释 # 去除即可使用对应的主题风格。

选定了相应的主题风格后,还有一些对应的设置进行修改,也就算是自定的部分,该部分你可以通过查看主题配置文件中的注释,进行相应的修改,在这里不做赘述。

设置语言

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

language: zh-CN

这里注意大小写,这里大小写敏感。在之前的版本简体中文是zh-Hans,最近的版本中已经改成了zh-CN。你也可以查看themes->next->languages里面的.yml文件的名称,进行设置你所需要的语言,在使用文档中提供了如下对应表格,除了简体中文改变外,其他的应该没啥大区别,没有尝试,读者可自行尝试:

语言 代码 设定示例
English en language: en
简体中文 zh-CN language: zh-CN
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

设置菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的矢量图,可以满足绝大的多数的场景。

菜单显示

编辑主题配置文件,根据你的需要去掉注释符#进行修改。

设定菜单内容,对应的字段是 menu。 菜单内容的设置格式是:item name: link || icon。其中 item name是一个名称,这个名称并不直接显示在页面上,她将用于匹配翻译;||后的icon是该menu对应的图标,需要在下面的menu_settings中设置是否开启:

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

Enable/Disable menu icons / item badges.

menu_settings:
icons: true
badges: true

使用文档中也提供了一份对应菜单项的表格(标注 !的项表示需要手动创建这个页面):

键值 设定值 显示文本(简体中文)
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页 !
tags tags: /tags 标签页 !
about about: /about 关于页面!
commonweal commonweal: /404.html 公益 404 !

菜单文本

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml{language} 为你所使用的语言)。

以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-CN.yml,在 menu 字段下添加一项:

menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
something: 有料

设置侧栏sidebar

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

设置侧栏的位置,寻找 sidebar ,该拦下拥有positiondisplay字样,position支持的选项有:

  • left - 靠左放置
  • right - 靠右放置

display支持的选项有:

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

根据你的具体需要进行修改。

设置头像avatar

编辑 主题配置文件,修改字段 avatar,值设置成头像的链接地址。使用文档提供如下列表:

地址
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/images/ (新建 images 目录若不存在) 配置为:avatar: /images/avatar.png或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png

设置站点icon

编辑 主题配置文件,修改字段 favicon,值设置成头像的链接地址。这里需要注意的是small对应的像素必须是16x16,medium对应的像素必须是32x32,否则会失效。

favicon:
small: /images/favicon-16x16-next.png
medium: /images/me.ico
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

#android_manifest: /images/manifest.json

#ms_browserconfig: /images/browserconfig.xml

设置作者昵称

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

设置站点描述

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

结语

本篇博客就到这里,还有许多其他的主题配置,将会在接下来的博客中继续更新,敬请期待!

谢谢您的鼓励!