NexT主题个性化配置

上一篇博文介绍了博客的基础搭建，这一篇主要介绍怎么个性化配置Next主题，使你的博客更加符合你的风格。

设置

这部分可以有表述不清楚的地方可以参考NexT-使用文档

基本信息

在Hexo目录下的_config.ylm文件中设置网页的信息以及显示的语言

title: # 页标题
subtitle: # 副标题
description: # 个性签名
author: # 作者
language: zh-Hans # 简体中文
timezone:

当然，你还需要有一个帅气的头像。在/themes/next/_config.ylm中搜索avatar，会看到这一行

1	#avatar: /images/avatar.gif

也就是说你只要在next/source/images目录下放你的头像例如：photo.jpg，去掉avatar前的#，并修改路径，即：

1	avatar: /images/photo.jpg

聪明的你是不是会想到修改网站的图标呢？同样在next/_config.ylm中搜索favicon，将small和medium的路径换成/images下的图片名（如：icon.png）就可以了

1
2
3

favicon:
  small: /images/icon.png
  medium: /images/icon.png

Scheme

NexT主题下有4种子主题可供选择，需要在/themes/next/config.yml主题配置文件中修改。在Scheme Settings处，将默认的Muse前面用“#”注释掉，把Pisces前的#去掉，即本博客使用的主题。当然你可以尝试其他的风格并选择自己心仪的

菜单栏

同样是修改/themes/next/config.yml配置文件，在menu节点，默认启用的菜单项是home、tags、categories、archives，当然此时在你的博客上点击标签（tags）和分类（categories）还不能正常跳转，因为没有相应的资源文件，需要自己建立对应的文件夹，详见2.1

功能

Tag & Category

在Hexo目录下运行Git Bash，输入命令hexo new page tags，执行命令后会在Hexo/source下建立tags文件夹，菜单的“标签”项就是对应此处的资源文件。

1	$ hexo new page tags

INFO Created: E:\Hexo\source\tags\index.md

文本编辑器打开/tags中的index.md文件，添加type节点。

---
title: tags
date: 2017-11-05 18:16:18
type: "tags"
comments: false
---

如若添加了评论系统，可以在这页加上comment: false
建立category同理，即将上文中的tags改为categories
在你发布新文章时，在开头的tag和category填上相应的标签与分类，并注意冒号后需要有空格

---
title: NexT主题个性化配置 # 标题
date: 2017-11-27 15:01:20 # 时间
tags: hexo # 标签
categories: # 分类
---

多标签的语法格式如下：

tags:
- 标签1
- 标签2
- 标签3

或者tags: [标签1, 标签2]

注：1. 菜单栏的其他选项也可以用同样的方法创建并使用
2. 在删掉tags和categories后，如若发现标签及分类数统计不对，可以执行hexo clean

文章阅读量

使用的是LeanCloud平台统计，具体步骤如下：
1. 在注册完进入主页后，点击「应用」->「创建新应用」（比如应用名是View，完成创建） ->点击「View」->选择「存储」->点击「创建Class」(Class名称填Counter，直接选择创建Class）
2. 选择「设置」->点击「应用Key」；在/themes/next/_config.yml中搜素leancloud_visitors，将App ID和App Key相应替换为#<app_id>和#<app_key>

leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>

3. 在「设置」中点击「安全中心」，在「Web安全域名」填入您博客的网址

访问量

NexT主题自带了卜算子计数功能，在/themes/next/_config.yml中搜索busuanzi，将enable值改为true，最终内容如下：

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

社交链接

在Hexo/themes/next/config.yml配置文件中搜索social，去掉social以及需要的社交链接前的#，并将链接地址改为正确的网址。
其中seoial_icons节点中后面的值是http://fontawesome.io/icons/ 中提供的图标的名称。之后其他链接如推特，微博等都可自行增减。

404Page

在hexo/source目录下创建404.html

<!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>

插件

评论系统

…

Hypercommitment

Gitment

插入音乐

用网易云网页版的外链播放器即可，将生成的html代码粘贴到文章的后面，如：

<iframe frameborder="no" border="0" marginwidth="0" 
	marginheight="0" width=330 height=86
	src="//music.163.com/outchain/player?type=2&id=22712173&auto=1&height=66">
</iframe>

当然你也可以在themes/next/layout/_macro/sidebar.swig的最后插入生成的html，即在侧边栏嵌入播放器，但是每次切换到新页面时都会重新播放，所以还是建议在需要的文章里放置。

绶带

给blog主页添加一个“Fork me on Github”的绶带（ribbon），比如选择了红色的ribbon，将相应代码复制到Hexo正在使用的theme下layout.ejs中。比如我使用的pacman theme，那么将下面的代码（注意将you改为你自己的github上的注册名）

<a href="https://github.com/zhchnchn"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>