NexT 主题的安装及个性化设置

安装 NexT 主题

Hexo 安装主题的方式比较简单,只需要将主题文件拷贝至站点目录的 themes 目录下,然后修改配置文件即可。

下载主题

使用 Git checkout 主题源代码到 themes 目录下

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

启用主题

修改站点配置文件中的 theme 字段的值

theme: next

启动本地服务器预览主题

1
2
$ hexo g
$ hexo server

个性化设置

选择 Scheme

NexT 提供了三种不同的外观,通过删除站点配置文件中的 scheme 字段前的注释 # 来启用不同的外观

#scheme: Muse
scheme: Mist
#scheme: Pisces

设置语言

修改站点配置文件中的 language 字段的值,例如选用简体中文

language: zh-Hans

设置背景动画

NexT 提供了两种背景动画效果

修改主题配置文件,通过设置值为 true 或者 false 来选择不同的背景动画

canvas_nest: true
three_waves: false

设置菜单

修改主题配置文件,通过删除 menu 字段下的注释 # 来显示相应的菜单项,例如:

menu:
 home: /
 #categories: /categories/
 archives: /archives/
 tags: /tags/
 about: /about/
 #commonweal: /404.html

添加标签页面

虽然在上一步中启用了 “tags”,但是此时点击菜单中的 “标签”会显示 page not found

执行如下命令,会在 source 目录下生成tags文件夹,并在 tags 文件夹中生成 index.md 文件

1
$ hexo new page tags

修改该文件,将页面的类型设置为 tags

title: tags
date: 2017-06-19 01:56:41
type: “tags”

这时菜单中的 “标签”就可以正常使用了,当要为某一篇文章添加标签时,只需在该文章的 tags 中添加标签即可,例如:

title: NexT主题的个性化设置
date: 2017-06-19 03:00:15
tags: [Hexo, NexT]
description: NexT主题的使用及个性化设置

添加关于页面

与上一步类似,执行如下命令,在 source 目录下生成about文件夹

1
$ hexo new page about

修改 about 目录下的 index.html 文件即可

添加侧边栏社交链接

修改主题配置文件socialsocial_icons 部分,例如:

social:
 Github: https://github.com/PengbinLee
 微博: http://weibo.com/u/3775610741

social_icons:
 enable: true
 GitHub: github
 Weibo: weibo

添加公益404页面

使用腾讯公益 404 页面,寻找丢失儿童,让大家一起关注此项公益事业!

在主题的 source 目录下新建 404.html 页面,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

添加站点建立时间

修改主题配置文件,新增 since 字段,并为其设置值,这个时间将会显示在站点底部。例如:

since: 2017

设置阅读全文

通常博客网站只会在首页显示文章的部分内容,当点击“阅读全文”时会跳转到该文章的具体页面。NexT 提供了三种设置阅读全文的方式。

  • 在文章中使用 <!-- more --> 手动进行截断
  • 在文章的 front-matter 中添加 description,并提供文章摘录
  • 自动形成摘要,在主题配置文件中进行如下修改:

    auto_excerpt:
     enable: true
     length: 150

    默认截取的长度为 150 个字符,可根据需要自行修改

隐藏 powered-by 和 theme-info 信息

修改 themes\next\layout\_partials 目录下的 footer.swing 文件,将相应 div 注释掉即可

1
2
3
4
5
6
7
8
9
10
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>

添加访问量

修改 themes\next\layout\_partials 目录下的 footer.swing 文件,添加如下代码:

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

在相应的位置添加如下 div 用来显示访问量

1
2
3
4
5
6
<div class="powered-by">
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
访问量:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

关于访问量,有两种不同的计算方式,代码如下:

  • pv 的方式,单个用户连续点击 n 篇文章,记录 n 次访问量

    1
    2
    3
    <span id="busuanzi_container_site_pv">
    访问量<span id="busuanzi_value_site_pv"></span>
    </span>
  • uv 的方式,单个用户连续点击 n 篇文章,只记录 1 次访客数

    1
    2
    3
    <span id="busuanzi_container_site_uv">
    访问量<span id="busuanzi_value_site_uv"></span>
    </span>

修改文章标签的 # 为 Font Awesome 图标

修改 themes\next\layout\_macro 目录下的 post.swing 文件,搜索 rel="tag">#,将 # 换为 <i class="fa fa-tag"></i>

参考文章

http://theme-next.iissnan.com/getting-started.html
http://www.jianshu.com/p/f054333ac9e6