Hexo系列 | Hexo+next主题搭建炫酷的个人博客网站

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 网站配置文件， 后者称为 主题配置文件。

目录

主要包括以下高级使用：

• 更换主题
• 更改头像
• 设置Menu
• 侧边栏社交信息设置
• 摘要自动生成
• 主页文章添加阴影效果
• 添加字数统计、阅读时长
• 修改底部标签样式
• 文章底部添加版权信息
• 设置动态背景
• 添加网页进度加载条
• 底部隐藏由Hexo强力驱动、主题–NexT.Mist
• 显示当前浏览进度
• 设置网站的图标Favicon
• Hexo博客添加站内搜索
• 修改markdown解释之后标题的字号的大小
• 更换markdown解析和渲染插件—hexo-renderer-markdown-it 插件

1. 更换主题

网络上有很多hexo相关的主题，只要把相应的主题文件下载下来，放到theme目录中，然后修改网站配置文件_config.yml中theme字段的值。下面是以安装next主题为例

• 切换到Blog文件夹下（就是hexo init的文件夹），查看文件

$ cd [Blog]	
$ ls
_config.yml node_modules    scaffolds   themes
db.json     package.json    source

• 通过curl安装NexT

$ mkdir themes/next
$ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

• 更新主题NexT

$ cd themes/next
$ git pull

• 编辑网站配置文件_config.yml文件，切换成Next主题

## Themes: https://hexo.io/themes/
#theme: landscape
theme: next

• next现在有4种主题风格，可以通过修改主题配置文件中的scheme值，来选择一款自己喜欢的主题风格。

# Schemes
scheme: Muse  //默认主题
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

完成上述操作之后，用hexo clean命令清除下缓存，之后hexo g生成静态网页，可以通过hexo s来进行预览。

next主题的安装和配置可参考nexT主题官方文档，nexT github官网中文文档

2. 更改头像

编辑主题配置文件，修改 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

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

3. 设置Menu

menu是如下图所示的导航栏

• 默认的只有首页和归档两个，但是可以通过修改主题配置文件_config.yml来添加menu 项，menu配置项中上下的顺序决定了menu显示的顺序。

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  archives: /archives/
  tags: /tags/
  about: /about/
  #sitemap: /sitemap.xml
  #commonweal: /404/

• 当选择添加tags之后，还需要创建相应的文件，命令如下

$ hexo new page "tags"

• 最后编辑创建index.md文件，内容如下

---
title: All tags
date: 2018-01-20 18:57:48
type: "tags"
---

假如只对主题配置文件进行了修改，即只添加了tagsmenu项，不创建相应的文件，当在博客网站点击标签菜单可能会提示

其他Menu选项也同理创建，如categories项目、about项。添加categories项之后，创建的文件内容填写如下

---
title: All categories
date: 2018-01-20 18:57:48
type: "categories"
---

添加about选项之后，创建的文件内容可以随意。

4. 侧边栏社交信息设置

编辑主题配置文件_config.yml，修改social字段的值

# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  #LinkLabel: Link
  Github: https://github.com/yourgithub
  E-Mail: mailto:dawnxu96@gmail.com
  Instagram