Hexo 搭建我的博客（七）Hexo 配置 NexT 主题

时间  2020-02-02 标签 hexo 搭建 我的 博客 配置 主题

NexT theme

环境及版本声明

本文基于如下环境及版本：node

hexo: 3.8.0
hexo-cli: 1.1.0
NexT: 7.1.0
OS: Ubuntu 18.04 LTS x86_64

本文相关 推荐阅读：android

NexT 主题简介

NexT is a high quality elegant Hexo theme.git

原项目已再也不维护github

目前使用的是其社区版本web

描述约定

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 自己的配置；另外一份位于主题目录下，这份配置由主题做者提供，主要用于配置主题相关的选项。shell

为了描述方便，在如下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。json

主题选择

Hexo 有许多 主题 供你选择，总有一款是适合你的，其中 NexT 是一个简洁优雅同时集成了许多功能的主题。缓存

安装 NexT

Hexo 安装主题的方式很是简单，只须要将主题文件拷贝至站点目录的 themes 目录下， 而后修改下配置文件便可。NexT 安装步骤以下。markdown

下载主题

在终端窗口下，进入到 Hexo 站点目录下。使用 Git 克隆最新版本：hexo

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

启用主题

与全部 Hexo 主题启用的模式同样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改成 next。

theme: next

到此，NexT 主题安装完成。下一步咱们将验证主题是否正确启用。在切换主题以后、验证以前， 咱们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

执行下列命令启动 Hexo 本地站点，能够加上 --debug 开启调试模式，方便观察异常信息，进而定位错误。

hexo s --debug

当命令行输出提示：

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

当你看到站点的外观与下图所示相似时说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

NexT Muse

主题版本管理

由于咱们的主题是 clone 下来的，因此主题自己也是一个 git 项目，因此当咱们尝试在站点根目录下执行 git add 时，是没法加入到咱们项目的版本管理的，例如：

$ git add *
The following paths are ignored by one of your .gitignore files:
db.json
node_modules
public
Use -f if you really want to add them.
warning: adding embedded git repository: themes/next
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint: 
hint: 	git submodule add <url> themes/next
hint: 
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint: 
hint: 	git rm --cached themes/next
hint: 
hint: See "git help submodule" for more information.

警告信息提示咱们已在当前仓库添加了另外一个 git 仓库，但当咱们在其它地方 clone 外部仓库（也即当前仓库）时，它不会 clone 嵌套仓库的内容，也不知道如何获取嵌套仓库的内容。

简单地说，就是外部仓库没法 track 一个嵌套仓库，外部仓库全部的 add，commit，push 都与嵌套仓库没有任何关系。下面介绍 3 种方法来管理咱们的主题。

注意：若是你以前尝试添加过嵌套仓库，应该先执行如下命令移除它：

git rm -f --cached themes/next

第1种 将嵌套仓库归入当前仓库

最简单直接的方法就是把 themes/next 目录下的 .git 文件夹删掉，这样咱们的主题文件夹就是一个普通的目录，而不是一个 git 仓库，这样嵌套仓库的内容就会成为当前仓库内容的一部分，就可使用 git add 对这些文件进行跟踪。

第2种 使用 git submodule

有种状况咱们常常会遇到：某个工做中的项目须要包含并使用另外一个项目。也许是第三方库，或者你独立开发的，用于多个父项目的库。如今问题来了：你想要把它们当作两个独立的项目，同时又想在一个项目中使用另外一个。

Git 经过子模块来解决这个问题。子模块容许你将一个 Git 仓库做为另外一个 Git 仓库的子目录。它能让你将另外一个仓库克隆到本身的项目中，同时还 保持提交的独立 。

具体介绍请参考 Git-工具-子模块

add 一个 submodule

执行如下命令，使 NexT 成为当前仓库的子模块：

git submodule add https://github.com/theme-next/hexo-theme-next themes/next

例如：

$ git submodule add https://github.com/theme-next/hexo-theme-next themes/next
Adding existing repo at 'themes/next' to the index

执行完成后，会在站点根目录下生成 .gitmodules 文件，内容以下：

[submodule "themes/next"]
    path = themes/next
    url = https://github.com/theme-next/hexo-theme-next

该配置文件保存了项目 URL 与已经拉取的本地目录之间的映射，若是有多个子模块，该文件中就会有多条记录。要重点注意的是，该文件应像 .gitignore 文件同样受到（经过）版本控制，和该项目的其余部分一同被拉取推送。有了映射关系，克隆该项目的人就知道去哪得到子模块了。

添加子模块完成后，当在父仓库时，Git 仍然不会跟踪 submodule 的文件， 而是将它看做该仓库中的一个特殊提交。

这种方法适用于使用第三方模块时，咱们本身不作任何自定义修改，只是单纯地使用或者但愿同步上游的修改的状况。

官方：项目中使用子模块的最简模型，就是 只使用子项目 并不时地获取更新，而并不在你的检出中进行任何修改。

显然这种方法并不适合咱们的需求，由于咱们的 NexT 主题都是须要自定义的，可是这种方法却适用于咱们为 NexT 主题管理第三方依赖的状况，由于这些第三方依赖咱们通常不会去修改它。

添加了子模块后，就能够像平时同样推送分支了，推送的时候不会包含子模块的文件（意味着你对子模块所作的任何修改都不会被推送，也不会被记录）。假设咱们推送到 username.github.io.git 的 dev 分支，能够参考 提交源码分支

推送到远程仓库后，远程仓库中 submodule 会和指定的 commit 关联起来。

clone 含有子模块的项目

克隆含有子模块的项目时，默认会包含该子模块目录，但其中没有任何文件，假设如今要 clone 咱们刚刚推送的分支：

# clone dev分支
$ git clone -b dev git@github.com:wylu/wylu.github.io.git
# 进入到项目文件夹
$ cd wylu.github.io
# 项目注册submodule
$ git submodule init
# clone submodule代码
$ git submodule update

或者

git clone -b dev --recursive git@github.com:wylu/wylu.github.io.git

如今 /themes/next 子目录是处在和以前提交时相同的状态了。就算官方的 NexT 仓库有了新提交，也不会有影响，由于子模块指向的 commit 与 push 时指向的 commit 是一致的，也就说在执行 git submodule update 时会 clone 指定 commit 的代码，而不是 clone 最新提交。

例如我当前主题子模块指向的是 hash 以 “71c9e8f” 为开头的提交，并非官方最新提交：

submodule commit

这个提交的完整 hash 为 “71c9e8fc1056bc070d22461696b1078d6419caf5”

update 项目子模块

只要在 子模块 的目录下，全部的常规 Git 操做，如 push，pull，reset，status等，均可以正常工做，假设如今咱们要同步子模块 NexT 的更新，只要在 /themes/next 目录下执行 git pull 便可。

  • 若是你获得一个错误信息，说你不在任何分支之上，只要运行 git checkout master 就可修复
  • 若是你在 pull 后 submodule 有一些更新, 父仓库会告诉你有一些变更须要 commit 了。submodule 自身指向一个指定的 commit, 而且若是这个 commit 改变了, 父仓库会得知这个改变。若是你的 submodule 须要在一个指定 commit 上工做, 可用 git reset 来恢复。

例如：

git reset --hard 419caf5

直接指向 子模块 历史的某次 commit 便可。

第3种 建立本身的主题仓库

将 Hexo 项目 与自定义的 NexT 主题项目分仓库管理。

首先，fork NexT 主题仓库到本身的 github，而后 clone 该仓库到本地。

而后自定义 NexT 主题，接着提交咱们对 NexT 主题的修改，push 到咱们本身的远程主题仓库。

而对于 Hexo 源码仓库一样使用 git submodule 的方式管理咱们自定义的主题模块，此时子模块的URL应该映射到你本身的仓库，例如：

[submodule "themes/next"]
	path = themes/next
	url = https://github.com/username/hexo-theme-next
	# The submodule will never be considered modified 
	# (but will nonetheless show up in the output of status and commit when it has been staged).
	ignore = all

注意：这里添加了 ignore 配置项并设置为 all，它的可选值及含义以下：

  • all：子模块永远不会被视为已修改（但仍将显示在状态输出中并在提交时提交）。
  • dirty：将忽略对子模块工做树的全部更改，仅考虑子模块的HEAD与其在超级项目中的记录状态之间的已提交差别。
  • untracked：只有子模块中未跟踪的文件才会被忽略。将显示对跟踪文件的提交的差别和修改。
  • none：默认选项，不会忽略对子模块的修改，显示全部已提交的差别以及对已跟踪和未跟踪文件的修改。

由于咱们的自定义主题仓库和 Hexo 项目仓库是分开提交的，因此 Hexo 项目的提交不须要关注子模块的修改，而子模块的修改直接在其目录下提交便可。这样就能够管理咱们自定义的主题，同时保持 Hexo 项目和自定义主题提交的独立。

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不一样的外观。同时，几乎全部的配置均可以在 Scheme 之间共用。目前 NexT 支持4种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 看起来像 Pisces，可是列块带有更加明显的阴影，视觉上更敏感

Scheme 的切换经过更改 主题配置文件，搜索 scheme 关键字。你会看到有4行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除便可。例如：

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

每种 Schemes 的效果能够到 Github 预览示例

设置主题语言

首先，须要编辑 站点配置文件， 将 language 设置成你所须要的语言。建议明确设置你所须要的语言，例如选用简体中文，配置以下：

language: zh-CN

而后若要修改具体显示的文本，则到 /themes/next/languages 文件夹下找到指定语言的文件，根据须要修改里面字段的值便可。

例如，修改 zh-CN.yml 文件中 home 对应的值以下：

menu:
  home: (^_^)

默认为 “主页”，这里咱们改为 (^_^)，显示效果以下：

language setting

NexT 经常使用语言以下：

Language Code Example
English en language: en
简体中文 zh-CN language: zh-CN
繁體中文 zh-TW or zh-HK language: zh-TW

目前 NexT 支持的语言，详见 Choosing Language

设置菜单

菜单配置项的格式为 key: /link/ || icon，包含三个部分，第一是菜单项的名称，第二是菜单项的连接，第三是菜单项对应的图标。

  • key

    key 为菜单项显示的名称（如home，archives等），Hexo 首先会根据 key 在 languages 文件夹找对应语言的翻译，若是找到则会加载该翻译，若是找不到，将使用 key 自己的值。其中 key 的值大小写敏感。

  • link

    link 是你网站内相对网址的目标连接。

  • icon

    FontAwesome 图标的名称。NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，能够知足绝大的多数的场景。

NexT 默认开启了 主页 和 归档页 菜单项：

menu setting

NexT 默认菜单项

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
key link Description
home / 主页
about /about/ 关于
tags /tags/ 标签
categories /categories/ 分类
archives /archives/ 归档
schedule /schedule/ 日程表
sitemap /sitemap.xml 站点地图
commonweal /404/ 404页面

能够根据须要取消菜单项的注释，这样就能够在菜单栏看到相应的菜单项了，你也能够添加新的菜单项，而后设置菜单项的显示文本，例如取消注释 about，tags，categories：

about tags categories

设置菜单项显示文本

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

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

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404
  something: 有料

设置菜单项图标

默认状况下，NexT 显示没有徽章的菜单项图标。

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

若是不想显示图标能够设置 icons 为 false，如：

icons: false

without menu icons

若是启用徽章，那么在菜单栏会显示 Posts / Categories / Tags 的计数，如：

badges: true

enable badges

新建 about 页面

在启用 about 或者 关于 菜单项后，由于咱们没有提供 about 页面或者配置的目标连接与实际页面位置不匹配，因此点击该菜单项时会提示没法获取 about 页面：

Cannot GET /about/

由于这里 about 菜单项的目标连接是 /about/，因此正确的文件结构是，在 source 文件夹下包含文件夹 about，about 文件夹下包含 index.md 文件。

直接在站点根目录下执行，该命令会在 source 文件夹下生成 about 文件夹及相关页面：

hexo new page about

若是你在 站点配置文件 中设置了 post_asset_folder: true，那么生成的 about 文件夹的文件结构以下：

$ tree
.
├── about
│   ├── index
│   └── index.md
└── _posts
    └── hello-world.md

3 directories, 2 files

若是 post_asset_folder: false，那么生成的 about 文件夹的文件结构以下：

$ tree
.
├── about
│   └── index.md
└── _posts
    └── hello-world.md

2 directories, 2 files

默认生成的 index.md 文件内容以下，你能够根据须要修改文件的 Front-matter 同时添加内容：

---
title: about
date: 2019-04-13 17:09:44
---

设置站点图标

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  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

默认状况下，Hexo 站点使用 hexo-site/themes/next/source/images/ 目录中的 NexT favicons，不一样的设备使用不一样大小的 NexT favicons。你能够用你本身的图标替换它们。

例如，能够将你的 favicons 放在 hexo-site/source/images/ 目录中。而后，你须要重命名它们，并更改 主题配置文件 中 favicon 部分的设置，不然来自 Next 的图标将在 Hexo 中覆盖你的自定义图标。你还能够将自定义的 favicons 放入 hexo-site/source/ 目录中。这样，你必须在配置路径时删除 /images 前缀。

要生成自定义的 Favicon，能够访问 Favicon Generator。

References

https://incoder.org/2018/05/17/git-sub/

https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97

https://git-scm.com/docs/gitmodules

联系我们 沪ICP备13005482号-10