Next主题官方文档笔记

一、开始使用

1.1 安装 NexT

HEXO中将主题文件拷贝至站点目录的 themes 目录下，然后修改下 网站配置文件 _config.yml 中的 theme: next 即可；

NEXT主题下载方式：

# 方式1：下载最新的NEXT主题
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

# 方式2：进入next版本发布页面，下载稳定版：https://github.com/iissnan/hexo-theme-next/releases；
# 下载好了压缩包后到站点的themes下解压，再修改修改下网站配置文件 `_config.yml` 中的 `theme: next`

执行下面的命令查看主题是否安装成功：hexo server -i 127.0.0.1 -p 5000

1.2 主题设定

1.2.1 选择「Scheme」

NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

Next主题设置其具体主题是修改 主题配置文件 _config.yml 中的 scheme 关键字；

1
2
3

#scheme: Muse
scheme: Mist # 使用NEXT的Mist主题
#scheme: Pisces

1.2.2 设置「界面语言」

HEXO 的 网站配置文件 _config.yml 中的 language 关键字;

zh-Hans ：表示简体中文
zh-hk 或者 zh-tw：表示繁体中文
en：表示英文

1.2.3 设置「菜单」

NEXT 的主题配置文件 _config.yml 中的 menu、menu_icons字段设定菜单内容及图标;

设定菜单内容，对应的字段是 menu。

menu:
  home: / || home #主页
  archives: /archives/ || archive #归档页
  tags: /tags/ || tags #标签页
  categories: /categories/ || th #分类页
  about: /about/ || user #	关于页面
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat #公益 404

设置菜单项的显示文本: NexT 主题目录下的 languages/{language}.yml（{language} 为你所使用的语言），修改里面的 menu 字段；

# languages/zh-Hans.yml 修改简体中文文件
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料

设定菜单项的图标，对应的字段是 menu_icons。

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

1.2.4 设置「侧栏」

NEXT 的主题配置文件 _config.yml 中的 sidebar 字段，侧栏的设置一是侧栏的位置，二是侧栏显示的时机。

设置侧栏的位置：sidebar 字段下的 position 选项 ，设置值为 left/right；【注意仅仅是NEXT的 Pisces Scheme 主题支持该设置】
设置侧栏显示的时机： sidebar 字段下的 display 选项，设置值为：
- post - 默认行为，在文章页面（拥有目录列表）时显示
- always - 在所有页面中都显示
- hide - 在所有页面中都隐藏（可以手动展开）
- remove - 完全移除

1.2.5 设置「头像」

NEXT 的主题配置文件 _config.yml 中的 avatar 字段，值设置成头像的链接地址；例如：avatar: http://example.com/avatar.png

1.2.6 设置「作者昵称」

HEXO 的 网站配置文件 _config.yml 中的 author 关键字;

1.2.7 设置「站点描述」

HEXO 的 网站配置文件 _config.yml 中的 description 关键字;

1.3 集成第三方服务

1.3.1 百度统计

登录到百度统计，查看网站代码；
在源码中搜索下面代码 hm.src = "//hm.baidu.com/hm.js?****"; //****为你的脚本的id
NEXT 的主题配置文件 _config.yml 中的 baidu_analytics 字段，值设置成你的脚本的id；

未1.3.2 阅读次数统计（LeanCloud）

未1.3.3 Algolia 搜索

二、主题配置

2.1 设置「RSS」

NEXT 的主题配置文件 _config.yml 中的 rss 字段，设置值：

false：禁用 RSS，不在页面上显示 RSS 连接。
留空：使用 Hexo 生成的 Feed 链接。你可以需要先安装 hexo-generator-feed 插件。
具体的链接地址：适用于已经烧制过 Feed 的情形。

1
2
3

# 先下载该插件，再改对应 rss 字段的值
$ npm install hexo-generator-feed --save
rss: /atom.xml

2.2 添加「标签-tags」页面

2.3 添加「分类-categories」页面

为文章添加标签或者分类的步骤如下：

使用 hexo new page 新建一个页面，命名为 tags/ categories
1
2
$ cd your-hexo-site
$ hexo new page tags # categories

编辑刚新建的页面，将页面的类型设置为 tags/ categories ，主题将自动为这个页面显示标签/ 分类云。

title: 标签
date: 2014-12-22 12:39:04
type: "tags" 
comments: "false" 
---
title: 分类
date: 2014-12-22 12:39:04
type: "categories" 
comments: "false" 
---

在菜单中添加链接。编辑NEXT 的主题配置文件，添加 tags/ categories 到 menu 中；

2.4 设置「字体」

NEXT 的主题配置文件 _config.yml 中的 font 字段，设置以下范围字体的值：

全局字体：定义的字体将在全站范围使用
标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
文章字体：文章所使用的字体
Logo字体：Logo 所使用的字体
代码字体：代码块所使用的字体

2.5 设置「代码高亮主题」

NEXT 的主题配置文件 _config.yml 中的 highlight_theme 字段，NexT 默认使用的是白色的 normal 主题，可选的值有 normal，night（黑色）， night blue（蓝黑）， night bright（深黑）， night eighties（灰黑）

2.6 侧边栏社交链接

NEXT 的主题配置文件 _config.yml 中的 social / social_icons 字段，一是链接，二是链接图标；

# 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
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

# 也可以将 Social Icons 放在 Social links 中，写法如下：
social:
  GitHub: https://github.com/your-user-name || github

2.7 开启打赏功能

NEXT 的主题配置文件 _config.yml 中的 reward_comment / wechatpay / alipay 字段，分别加入图片地址即可（最好是网络资源，本地资源测试加载出错）

1
2
3

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

2.8 设置友情链接

NEXT 的主题配置文件 _config.yml 中的 links 字段:

links_title: Links
# links_layout: block # 表示链接为块标签显示
links_layout: inline # 表示链接为行内标签显示
links:
  Vue: https://cn.vuejs.org/
  Vux: https://doc.vux.li/zh-CN/
  HEXO: https://hexo.io/zh-cn

2.9 腾讯公益404页面

新建 404.html 页面，使用 hexo new page 生成，放到NEXT主题的 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"/>
  <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>

2.10 站点建立时间

NEXT 的主题配置文件 _config.yml 中的 since 字段 : since: 2013

2.11 订阅微信公众号

NEXT 的主题配置文件 _config.yml 中的 wechat_subscriber 字段下的属性:

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

2.12 设置「动画效果」

NEXT 的主题配置文件 _config.yml 中的 motion 字段下的各个属性的动画；

2.13 设置「背景动画」

NEXT 的主题配置文件 _config.yml 中的 canvas_nest / three_waves / canvas_lines / canvas_sphere 字段设置为 true则开启该动画；

三、第三方服务

3.1 评论系统

3.1.1 Disqus

NEXT 的主题配置文件 _config.yml 中的 disqus 字段下的各个属性值修改如下；

disqus:
  enable: true
  shortname:
  count: true # 用于指定是否显示评论数量。

3.1.2 Facebook Comments

3.1.3 HyperComments

3.1.4 网易云跟帖

3.1.5 来必力

先到来必力网站进行注册，再登陆；
选择免费的city版本，在显示的代码中查找 data-uid= 'xxxx'，复制该值；

将NEXT 的主题配置文件 _config.yml 中的 livere_uid 字段值设置为刚刚复制的值；

1
2
3

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: {你的来必力id}

3.2 数据统计与分析

3.2.1 百度统计

登录到百度统计，查看网站代码；
在源码中搜索下面代码 hm.src = "//hm.baidu.com/hm.js?****"; //****为你的脚本的id
NEXT 的主题配置文件 _config.yml 中的 baidu_analytics 字段，值设置成你的脚本的id；

3.2.2 Google 分析

3.2.3 腾讯分析

3.2.4 CNZZ 统计

3.2.5 不蒜子统计

编辑HEXO主题配置文件 _config.yml 中的 busuanzi_count 字段的的配置项即可。

busuanzi_count:
  # count values only if the other configs are false
  enable: true # 代表开启全局开关
  # custom uv span for the whole site
  # 效果：本站访客数12345人次
  site_uv: true # 代表在页面底部显示站点的UV值
  site_uv_header: 本站访客数
  site_uv_footer: 人数
  # custom pv span for the whole site
  # 效果：本站总访问量12345次（一般不开启这个）
  site_pv: false # 代表在页面底部显示站点的PV值。
  site_pv_header: 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  # 效果：本文总阅读量12345次
  page_pv: true # 代表在文章页面的标题下显示该页面的PV值（阅读数）。
  page_pv_header: 本文总阅读量
  page_pv_footer: 次

注意：由于不蒜子统计网站的原有域名不能使用，还需要按照下面解决方法修改域名:

找到主题调用不蒜子的swig文件，路径是”\themes*\layout\_third-party\analytics\busuanzi-counter.swig”

更改域名：

把原有的：
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
域名改一下即可：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script

3.2.6 腾讯移动分析

3.3 内容分享服务

3.3.1 JiaThis

3.3.2 百度分享

3.4 搜索服务

3.4.1 Swiftype

3.4.2 微搜索

3.4.3 Local Search

添加百度/谷歌/本地自定义站点内容搜索

安装 hexo-generator-searchdb 包，在HEXO站点的根目录下执行以下命令：
1
$ npm install hexo-generator-searchdb --save
编辑HEXO主题配置文件 _config.yml ，新增以下内容到任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 NEXT主题配置文件 _config.yml 中的Local search 字段，启用本地搜索功能：
1
2
3
# Local search
local_search:
enable: true

3.4.4 Algolia

3.5 其他服务

3.5.1 MathJax

3.5.2 Facebook SDK

3.5.3 Google Webmaster tools

四、内建标签

4.1 文本居中的引用

该标签会生成一个带上下分割线的引用，同时引用内文本将自动居中，适用于单行文本展示，如文章开篇引用或者结束语之前的总结引用；

使用方式：

HTML方式：使用这种方式时，给 img 添加属性 class="blockquote-center" 即可；
标签方式：使用 centerquote 或者简写 cq;

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}
<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

4.2 突破容器宽度限制的图片

当使用此标签引用图片时，图片将自动扩大 26%，并突破文章容器的宽度。此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力；

使用方式：

HTML方式：使用这种方式时，为 img 添加属性 class="full-image" 即可;
标签方式：使用 fullimage 或者简写 fi，并传递图片地址、 alt 和 title 属性即可。属性之间以逗号分隔;

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}
<!-- 别名 -->
{% fi /image-url, alt, title %}

4.3 Bootstrap Callout

Bootstrap 的官方文档

使用方式：


            Content (md partial supported)

；其中的 class_name 可以是以下列表中的一个值：default、primary、success、info、warning、danger；

五、进阶设定

5.1 设置「JavaScript 第三方库」

六、常见问题

6.1 如何设置「阅读全文」？

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式：

在文章中使用  手动进行截断，Hexo 提供的方式；强烈推荐使用
在文章的 front-matter 中添加 description，并提供文章摘录；

自动形成摘要，修改NEXT的主题配置文件 _config.yml 中的auto_excerpt 字段：

1
2
3

auto_excerpt: # 默认截取的长度为 150 字符，可以根据需要自行设定
  enable: true
  length: 150

6.2 Favicon 设置后没有生效？

注意设置的文件使用的路径的问题；修改NEXT的主题配置文件 _config.yml 中的url 字段：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://geek-lhj.gitee.io #填写你自己的站点链接,geek-lhj为我的github的用户名
root: / #设置根目录的位置

6.3 如何更改字体？

编辑主题下的 source/css/_variables/custom.styl 文件；

6.4 如何更改内容区域的宽度？

编辑主题的 source/css/_variables/custom.styl 文件;

修改NEXT的主题配置文件 _config.yml 中的menu 字段，若是自定义的菜单需要修改对于的语言文件中的内容，例如中文的语言文件在...languages/zh-Hans.yml目录下；

6.6 标签/分类数量统计不准确？

是由于缓存的问题，重新进行打包发布即可：

hexo clean  # 清除生成的本地public目录的代码
hexo g  # 生成目标文件
hexo s  # 本地进行预览，查看效果
hexo d  # 发布到自己的GitHub、Gitee或者其他的仓库中，进行网站页面的部署

6.7 为何语言显示不正确？

修改HEXO的网站配置文件 _config.yml 中的language 字段

6.8 如何关闭新建页面的评论功能？

当集成了评论系统，如 Disqus，所有新建的页面都将自动开启评论。若不需要评论，在页面的 Front-matter 里添加 comments 字段，并将值设置为 false。

title: All tags
date: 2015-12-16 17:05:24
type: "tags"
comments: false
---