NexT主题的使用和优化

发表于   |   分类于   |     |   阅读次数

我选择使用了NexT主题，所以，在这呢咱们只介绍NexT主题的使用。
在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置，我们叫它站点配置文件；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项，我们叫它主题配置文件。

安装NexT主题

鉴于大家都搭建完了github＋hexo，所以说环境已经配备完全，我们可以直接用命令行去克隆最新的NexT主题。NexT主题配置

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


我下载下来的主题文件夹的名字叫hexo-theme-next，没有修改，所以以下主题目录我都会用到这么名字。下面我们去站点配置文件中，修改我们所使用的主题名字，如图：

这个时候，你已经成功安装并启用了NexT主题，下面我们将要更改一些主题的设定。

主题设定

选择Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。目前 NexT 支持三种 Scheme，他们是：
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

1
2
3
4
#Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces

切换Scheme，我们需要修改主题配置文件，你可以分别去掉前面的”#”，来观察每个Scheme的效果，以便找到你中意的一款。

设置语言

打开站点配置文件，将language修改成你想要的语言，如下是对简体中文的配置：

1
language: zh-Hans

目前 NexT 支持的语言如以下表格所示：

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id

设置头像

选择好你要使用的图片，重命名avtar.png，把avtar.png放置到source/images/目录下，打开站点配置文件，新增配置如下：

1
avatar: /images/avatar.png

设置导航和tags、categories两个页面

有些童鞋想再博客中拥有分类和标签两个页面，在这只交怎么处理分类和标签。我们需要进入到主题配置文件中，找到如下配置：

1
2
3
4
5
6
7
menu:
  home: /
  #categories: /categories
  #about: /about
  archives: /archives
  #tags: /tags
  #commonweal: /404/html

去掉categories和tags前面的＃，就可以在导航栏上看见它们了。
我们这个时候只是解开了categoies和tags的展示，当我们点击他们的时候，会报404页面。这是由于我们站点中并没有这两个页面的存在，我们需要新建这两个页面。命令如下：

1
hexo new page tags

进入到yoursite/source/tags/目录，编辑index.md，新增type为tags的页面类型，页面展示如下：

1
2
3
4
title: tags
date: 2014-12-22 12:39:04
type: "tags"
---

这个时候我们就可以看见tags页面了，如果，你已经写了博文并设置了其标签，那么我们就可以在这个页面中看见已定义过的标签了。categories页面的操作同上。

1
hexo new page categories

进入到yoursite/source/categories/目录，编辑index.md，新增type为categories的页面类型，页面展示如下：

1
2
3
4
title: categories
date: 2014-12-22 12:39:04
type: "categories"
---

hiahia~是不是可以看见categories中的东西了呢，当然，前提是你要有博文，并且已经做了分类。

注：如果这个时候你还没有看见应该展示内容，那么就要看看你的””是不是英文的。尤其是使用MacOS的小伙伴需要格外注意，我就是栽在这个上面了，中英文切换了n次，直到后来复制了一个小伙伴提供的英文引号，才解决了这个问题。不知道是Mac输入法的问题，还是编辑器的问题。

其他个人信息设置

打开站点配置文件，我们能看见如下配置：

1
2
3
4
title: 博客名字
subtitle: 副标题
description: 描述
author: 作者昵称

以上配置，可凭自己喜好定义。

首页展示部分文章内容

童鞋们可能会看见有些博客首页的文章只是展示了一部分，并写下面有阅读全文的按钮，而自己的却是展示全部内容，这个要怎么处理呢？打开你的主题配置文件，找到auto_excerpt，页面展示如下：

1
2
3
auto_excerpt:
  enable: true
  length: 1000

其中length: 1000，就是你想展示内容的多少，你可以设定一个自己满意的值。

为NexT主题增加统计阅读量的功能

这个时候我们的博客有了，主题的基本配置也设置完毕，那么我们就想进一步优化其功能了，下面我们先从统计阅读量做起

使用不蒜子脚本

编辑themes\next\layout_partials\footer.swig文件，将busuanzi.js的引用放到最后面

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

编辑iBlog/themes/next/layout/_macro/post.swig文件,操作如下：

1
2
3
4
5
在<div class="post-header"></div>中找到<div class="post-meta"></div>在其中末尾处,添加如下代码:(该代码实现,非博客主页,才显示阅读量统计)
{% if not is_index %}
          <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

写到这，我们就可以在每篇文章里看见浏览量了，但是首页的文章下是不显示浏览量的。
pv的计算方式是，单个用户连续点击n篇文章，记录n次访问量；uv的计算方式是，单个用户连续点击n篇文章，只记录1次访客数。
pv：网站的浏览次数；

1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

uv：网站的访客数。

1
2
3
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

LeanCloud

开始我用的是不蒜子的脚本，后来知道了NexT集成了LeanCloud，所以想尝试一下。就换成了LeanCloud，因为是刚开始写博客，所以不会在意浏览量，如果有一定的被访问量了，就不要轻易的更换了。(LeanCloud可以在首页显示每篇文章的浏览量)。
因为Doublemine提供了很全面的LeanCloud的使用方法，在这我就不过多的介绍了。详细内容，请参见为NexT主题添加文章阅读量统计功能。

多说评论

想要使用多说评论，那么要打开多说站点，点击我要安装，可以选择任意一个社交账号登陆。
创建站点，填写站点相关信息。注意，多说域名，这一栏填写的即是你的duoshuo_shortname。

编辑站点配置文件，添加duoshuo_shortname字段，设置如下：

1
duoshuo_shortname: your-duoshuo-shortname

打开主题配置文件，我们可以对多说做如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 设置多说域名
duoshuo_shortname: xiamianyu
# 开启多说分享
duoshuo_share: true
# 显示多说评论框UA信息
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: xxx
  admin_nickname: xxx

如需转载，请注明出处：YauLam’s Blog，thank u~