NexT的主题设定与配置

本篇文章将介绍NexT的主题设定与配置

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

主题设定

选择 Scheme

Scheme 是 NexT提供的一种特性，借助于Scheme``，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

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

Scheme的切换通过更改主题配置文件，搜索scheme关键字。 你会看到有三行 scheme的配置，将你需用启用的 scheme 前面注释 # 去除即可。

选择 Pisces Scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置 语言

编辑站点配置文件， 将 language设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

language: zh-Hans

设置 菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是Font Awesome提供的图标，Font Awesome 提供了 600+的图标，可以满足绝大的多数的场景，同时无须担心在Retina 屏幕下 图标模糊的问题。

编辑主题配置文件

，修改以下内容：

1、 设定菜单内容，对应的字段是menu。 菜单内容的设置格式是：item name:link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

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

若你的站点运行在子目录中，请将链接前缀的 /去掉

NexT默认的菜单项有（标注 的项表示需要手动创建这个页面）：

键值	设定值	显示文本（简体中文）
home	home: /	主页
archives	archives: /archives	归档页
categories	categories: /categories	分类页
tags	tags: /tags	标签页
about	about: /about	关于页面
commonweal	commonweal: /404.html	公益 404

2、 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在NexT 主题目录下的languages/{language}.yml（{language} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件languages/zh-Hans.yml，在 menu字段下添加一项：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料

3、 设定菜单项的图标，对应的字段是menu_icons。 此设定格式是item name: icon name，其中 item name与上一步所配置的菜单名字对应，icon name是 Font Awesome 图标的 名字。而enable可用于控制是否显示图标，你可以设置成false来去掉图标。

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

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome图标名字） 的情况下，NexT 将会使用 作为图标。

设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件

中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。

1、设置侧栏的位置，修改 sidebar.position的值，支持的选项有：

• left - 靠左放置
• right- 靠右放置

sidebar:
  position: left

2、 设置侧栏显示的时机，修改sidebar.display的值，支持的选项有：

• post - 默认行为，在文章页面（拥有目录列表）时显示
• always - 在所有页面中都显示
• hide - 在所有页面中都隐藏（可以手动展开）
• remove - 完全移除

sidebar:
  display: post

设置 头像

编辑 主题配置文件

， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

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

avatar: http://example.com/avatar.png

设置 作者昵称

编辑 站点配置文件， 设置author为你的昵称。

站点描述
编辑 站点配置文件， 设置 description字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

## 主题配置

设置RSS

NexT中RSS 有三个设置选项，满足特定的使用场景。 更改主题配置文件

，设定 rss 字段的值：

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

添加「标签」页面

新建「标签」页面，并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签，若你的所有文章都未包含标签，此页面将是空的。 底下代码是一篇包含标签的文章的例子：

title: tags
tags:
  - Testing
  - Another Tag
---

新建页面

在终端窗口下，定位到Hexo 站点目录下。使用hexo new page 新建一个页面，命名为 tags：

$ cd your-hexo-site
$ hexo new page tags

设置页面类型

编辑刚新建的页面，将页面的类型设置为tags，主题将自动为这个页面显示标签云。页面内容如下：

title: 标签
date: 2018-2-22 23:39:04
type: "tags"
---

修改菜单

在菜单中添加链接。编辑主题配置文件

， 添加 tags到 menu中，如下:

menu:
  home: /
  archives: /archives
  tags: /tags

注意：如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段comments并将值设置为false，如：

title: 标签
date: 2018-2-22 23:39:04
type: "tags"
comments: false
---

添加「分类」页面

新建「分类」页面，并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类，若你的所有文章都未包含分类，此页面将是空的。 底下代码是一篇包含分类的文章的例子：

title: categories
categories: Testing
---

新建页面

在终端窗口下，定位到 Hexo站点目录下。使用 hexo new page 新建一个页面，命名为categories ：

$ cd your-hexo-site
$ hexo new page categories

设置页面类型

编辑刚新建的页面，将页面的type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下：

title: categories
date: 2018-2-22 23:39:04
type: "categories"
---

修改菜单

在菜单中添加链接。编辑主题配置文件

， 添加 categories 到 menu中，如下:

menu:
  home: /
  archives: /archives
  categories: /categories

注意：如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments并将值设置为false，如：

title: categories
date: 2018-2-22 23:39:04
type: "categories"
comments: false
---

设置字体

NexT开放了 5 个特定范围的字体设定，他们是：

• 全局字体：定义的字体将在全站范围使用
• 标题字体：文章内标题的字体（h1, h2, h3, h4, h5, h6）
• 文章字体：文章所使用的字体
• Logo字体：Logo所使用的字体
  = 代码字体： 代码块所使用的字体
  各项所指定的字体将作为首选字体，当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组：
• 非代码类字体：Fallback 到 PingFang SC, Microsoft YaHei, sans-serif
• 代码类字体： Fallback 到 consolas, Menlo, PingFang SC, Microsoft YaHei, monospace
  另外，每一项都有一个额外的external 属性，此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体，减少不必要的请求（请求大小）。

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置代码高亮主题

NexT使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。NexT默认使用的是 白色的 normal主题，可选的值有normal，night，night blue， night bright，night eighties：

更改 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：

高亮主题设置示例

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

侧边栏社交链接

侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在主题配置文件

中。

1、 链接放置在 social字段下，一行一个链接。其键值格式是 显示文本: 链接地址。

# 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
  # 等等

2、 设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键:Font Awesome图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是Font Awesome图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

开启打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要主题配置文件

中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

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

友情链接

编辑主题配置文件

添加：

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

站点建立时间

这个时间将在站点的底部显示，例如© 2018。编辑主题配置文件

，新增字段 since。

since: 2018

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

然后编辑主题配置文件

，如下：

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

设置「动画效果」

NexT默认开启动画效果，效果使用JavaScript编写，因此需要等待 JavaScript脚本完全加载完毕后才会显示内容。 如果您比较在乎速度，可以将设置此字段的值为 false来关闭动画。

编辑 主题配置文件

， 搜索 use_motion，根据您的需求设置值为 true或者 false即可：

use_motion: true  # 开启动画效果
use_motion: false # 关闭动画效果