Hexo博客搭建全攻略(二)：NexT主题配置

简介

上节我们已经搭建起 Hexo 博客环境，大家应该可以完成基本的博客写作与部署工作，并且还可以对源码进行有效的管理。可是我想大多数的开发者应该不会满足于此吧，比如说好的评论、点赞功能呢？而且主题不喜欢，能不能自己随心所欲的更换呢？我们可不可以加些私货在里面呢？大家不用急，且耐着性子看下去，你们的难问我将一一为你们解答。

我们想要的东西，有许多是可以直接进行配置的。在 Hexo 项目源码目录下，有两个主要的配置文件，其名称都是 _config.yml 。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于主题相关的配置。为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

站点配置

以下是站点配置文件的默认内容，我将里面的配置项都注释说明

# Hexo 站点配置文件
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# 网站配置
title: Hexo            # 网站标题
subtitle:              # 网站副标题
description:           # 网站描述
author: John Doe       # 你的昵称
language:              # 网站使用的语言(英文:en, 简体中文:zh-Hans，繁体中文:zh-tw)
timezone:              # 网站时区，用于生成页面时填充相关时间，默认使用电脑时区，一般不用改

# URL
## 如果你的站点要放入子目录, 请将url设置为'http://yoursite.com/child' 并将根目录设置为'/child/'
url: http://yoursite.com  # 站点网址
root: /                   # 网站根目录
permalink: :year/:month/:day/:title/ #文单的永久链接格式
permalink_defaults:       # 永久链接中各部分的默认值

# 目录
source_dir: source        # 资源文件夹，这个文件夹用来存放博客内容
public_dir: public        # 公共文件夹，这个文件夹用来存放生成的站点静态文件
tag_dir: tags             # 标签文件夹
archive_dir: archives     # 归档文件夹
category_dir: categories  # 分类文件夹
code_dir: downloads/code  # Include code文件夹
i18n_dir: :lang           # 国际化文件夹，存放各种语言定义
skip_render:              # 跳过指定文件的渲染

# 写作
new_post_name: :title.md  # 新文章的文件名称
default_layout: post      # 预设布局
titlecase: false          # 把标题转换为 title case
external_link: true       # 在新标签中打开链接
filename_case: 0          # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false      # 显示草稿
post_asset_folder: false  # 启动 Asset 文件夹
relative_link: false      # 把链接改为与根目录的相对位址
future: true              # 显示未来的文章
highlight:                # 代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# 分类 & 标签
default_category: uncategorized  # 默认分类
category_map:                    # 分类别名
tag_map:                         # 标签别名

# 日期 / 时间格式
## Hexo 使用 Moment.js 来解析和显示时间
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss   # 时间格式

# 分页
## 每页显示的文章量 (0 = 关闭分页功能)
per_page: 10
pagination_dir: page

# 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape       # 主题

# 部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

站点配置并不多，我们一般只需要对网站标题、描述、语言、作者昵称部署信息进行配置就可以了，其他如果你现在看了注释还不明白是什么作用的话，那就建议你先不修改，直接使用默认设置。

Hexo 之所以如此受欢迎，我想一个很重要的原因就是有大量主题供大家选择，大家可以去Hexo官网主题选择自己的喜爱的，里面收集了许多，但不是全部。面对这么多的主题，我相信许多人会跟我当初一样，有选择困难症。如何选到自己心仪的主题呢，也许大家可能想看看别人都喜欢什么样的主题，如果刚好你此想法的话，建议你看看知乎上这篇有哪些好看的 Hexo 主题的贴子，它将受欢迎的主题进行一个排行。其中居榜首的就是NexT，它将是我们今天的主角，其他主题配置基本类似。

安装

官方提供了两种安装方法：

克隆最新版本

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

下载稳定版本

前往 NexT下载页选择最新的发布版本下载，然后将下载的压缩包解压至站点的 themes 目录下，并将解压后的文件更改为 next

官方提供的方法，克隆方式可能会导致主题的git项目与之前站点源码的git项目混在一起，管理起来很不方便。下载稳定版本的方式，可以将NexT主题源码添加了之前的站点源码的git项目中管理，但是它们结合得太紧，如果不爱折腾，而且需要进行主题源码管理的，我觉得下载稳定版本方式就可以了，但要同步主题最新代码不太方便。但我相信大部分开发者还是比较爱折腾的，所以，我下面介绍一种我使用的安装方式。

子项目

进入NexT项目源码页面，点击fork，这样就将最新的主题源码fork成为自己的项目，任何的代码改动都可以通过自己fork的项目进行管理。

执行以下指令，将自己fork的主题源码做为子项目添加了到之前的站点目录下。

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

导入子项目后，站点根目录会多出.gitmodules文件，其内容如下：

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

如此就将 NexT 主题源码做为子项目导入进来了。next目录任何与 NexT 相关的改动都可以提交并推送到自己的fork的项目中。

当然，此时有人可以会问， NexT 源码不断更新，我是不是可以跟着更新呢？答案当然可以，而且我们将主题源码做为子项目，就是为了方便与源项目代码进行同步。我们进入next目录执行

git remote add upstream https://github.com/iissnan/hexo-theme-next.git

将NexT项目源仓库加入进来后，接着执行以下命令就会完成与原始源码的同步

git fetch upstream
git merge upstream/master

启用

与所有Hexo主题一样，把主题源码导入themes目录后，打开站点配置文件，找到 theme 字段，并将其值更改为 next 就完成了主题的切换。

theme: next

切换主题后，最好清理下缓存

hexo clean

重新生成静态页面并开启本地服务

hexo s -g

使用浏览器访问 http://localhost:4000 看到下面内容证明主题启用成功

主题设定

选择 Scheme

借助Scheme，NexT提供了多种不同的外观，目前NexT支持以下三种：

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

更改主题配置文件，找到 scheme ，你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 即可。你可以分别选择预览下效果，选择一个你最喜欢的。

#选择 Pisce Scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置菜单

进入主题配置文件，找到 menu 字段，菜单内容的设置格式是：item name: link 。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

# 菜单示例配置
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

注意：若你的站点运行在子目录中，请将链接前缀的 / 去掉

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

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

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

设定菜单项的图标，对应的字段是 menu_icons。此设定格式是 item name: icon name ，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

# 菜单图标配置示例
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

侧栏设置

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

设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

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

设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：

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

头像设置

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

# 将头像放置主题目录下的 source/uploads/ （新建uploads目录若不存在） 配置为：
avatar: /uploads/avatar.png
# 放置在 source/images/ 目录下, 配置为：
avatar: /images/avatar.png
# 完整的互联网 URI
avatar: http://example.com/avatar.png

当然最简单暴力方法: 直接覆盖主题目录下的 source/images 的 avatar.git 文件。

添加「标签」页面

新建页面

hexo new page tags

修改站点目录下 source/tags 的 index.md 文件如下：

---
title: tags
type: "tags"
comments: false
---

修改主题配置文件，取消 #tags: /tags 这行注释，内容如下

# 菜单示例配置
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

新建测试文章，在新文章的头部添加tags信息，如下：

title: 测试文章
tags:
  - Testing
  - Another Tag
---

启动本地服务，就可以看到标签菜单，点击可进入标签页，看到 测试文章 证明标签页面添加成功。

添加「分类」页面

新建页面

hexo new page categories

修改站点目录下 source/categories 的 index.md 文如下：

---
title: categories
type: "categories"
comments: false
---

修改主题配置文件，取消 #categories: /categories 这行注释，内容如下

# 菜单示例配置
menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html

在刚才测试的文章里面添加

title: 测试文章
tags:
  - Testing
  - Another Tag
categories: Testing
---

启动本地服务，就可以看到分类菜单，点击可进入分类页，看到 测试文章 证明分类页面添加成功。

添加「关于」页面

新建页面

hexo new page about

修改主题配置文件，取消 #about: /about 这行注释，内容如下

# 菜单示例配置
menu:
  home: /
  archives: /archives
  about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html

编辑站点目录下 source/about 的 index.md 文件内容，内容将显示在关于页面。

启动本地服务，就可以看到关于菜单，点击可进入关于页，显示内容即是 source/about/index.md 对应内容。

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如 http://www.ixirong.com/404.html

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。两者配置均在主题配置文件中。

链接

链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

链接图标

链接图标对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

圆形头像

现在很多网站都流行圆形头像，但 NexT 主题默认还不支持，当然我们可以很方便地添加圆形头像效果，将以下代码覆盖主题目录下 source/css/_common/components/sidebar/sidebar-author.styl 文件内容

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1; 

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

开启本地服务，预览后就可以看到头像效果。

总结

本文主要介绍了 Hexo 站点的常规配置以及 NexT 主题的一些常用配置，其中包括菜单、分页、头像、侧边栏等基本设置。现在我们的站点已经基本具备博客网站的雏形，不过评论点赞分享功能还没搭建起来，下节我将继续带着大家完成这些功能的搭建。

版权声明：本文为原创，欢迎转载，转载请注明出处，勿用于商业用途！

Hexo博客搭建全攻略(二)：NexT主题配置

简介

站点配置

NexT

安装

启用

主题设定

选择 Scheme

设置菜单

侧栏设置

头像设置

添加「标签」页面

添加「分类」页面

添加「关于」页面

腾讯公益404页面

侧边栏社交链接

圆形头像

总结

你可能感兴趣的:(Hexo博客搭建全攻略(二)：NexT主题配置)