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:

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

NexT

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 nameFont 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/imagesavatar.git 文件。

添加「标签」页面

新建页面

hexo new page tags

修改站点目录下 source/tagsindex.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/categoriesindex.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/aboutindex.md 文件内容,内容将显示在关于页面。

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

腾讯公益404页面

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

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

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到我的主页">
</script>

</body>
</html>

侧边栏社交链接

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

链接

链接放置在 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 主题的一些常用配置,其中包括菜单、分页、头像、侧边栏等基本设置。现在我们的站点已经基本具备博客网站的雏形,不过评论点赞分享功能还没搭建起来,下节我将继续带着大家完成这些功能的搭建。

版权声明:本文为原创,欢迎转载,转载请注明出处,勿用于商业用途!

推荐阅读更多精彩内容