NexT 使用文档:http://theme-next.iissnan.com
本人的Next主题配置文件
我的做法是,加上中文注释,方便以后修改
前言
主题配置文件路径:D:\CODE\blog\themes\next\_config.yml
站点配置文件路径:D:\CODE\blog\_config.yml
- hexo配置:https://hexo.io/zh-cn/docs/configuration
- Next主题主题设定:http://theme-next.iissnan.com/getting-started.html#theme-settings
- Next主题主题配置:http://theme-next.iissnan.com/theme-settings.html
- Next主题第三方服务集成:http://theme-next.iissnan.com/third-party-services.html#comment-system
- Next主题常见问题:http://theme-next.iissnan.com/faqs.html
1.主题设定
选择「Scheme」
Next主题还有4种风格供我们选择,预览
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
- Gemini -
Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。
设置「语言」
编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:
language: zh-CN
比如,我的语言包路径是:D:\CODE\blog\themes\next\languages
设置「菜单」
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。
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-CN.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
设置「侧栏」
默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar
字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
(1)设置侧栏的位置,修改 sidebar.position
的值,支持的选项有:
#left - 靠左放置
#right - 靠右放置
sidebar:
position: left
目前仅 Pisces Scheme
支持 position
配置
(2)设置侧栏显示的时机,修改 sidebar.display 的值,支持的选项有:
#post - 默认行为,在文章页面(拥有目录列表)时显示
#always - 在所有页面中都显示
#hide - 在所有页面中都隐藏(可以手动展开)
#remove - 完全移除
sidebar:
display: post
设置「头像」
编辑 主题配置文件, 修改字段 avatar
, 值设置成头像的链接地址。其中,头像的链接地址可以是:
地址 | 值 |
完整的互联网 URI | |
站点内的地址 | 将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在) 配置为:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目录下 配置为:avatar: /images/avatar.png |
头像设置示例
avatar: http://example.com/avatar.png
设置「作者昵称」
编辑 站点配置文件, 设置 author
为你的昵称。
站点描述
编辑 站点配置文件, 设置 description
字段为你的站点描述。站点描述可以是你喜欢的一句签名:)
2.主题配置
设置 RSS
NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 主题配置文件,设定 rss 字段的值:
- false:禁用 RSS,不在页面上显示 RSS 连接。
- 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
- 具体的链接地址:适用于已经烧制过 Feed 的情形。
添加「标签」页面
新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。 底下代码是一篇包含标签的文章的例子:
title: 标签测试文章
tags:
- Testing
- Another Tag
---
打开命令行,进入博客所在文件夹。执行命令
hexo new page tags
# 成功后会提示:
#INFO Created: ~/Documents/blog/source/tags/index.md
根据上面的路径,找到index.md
这个文件,打开后默认内容是这样的:
---
title: tags
date: 2019-01-18 16:33:05
---
修改名字,增加type: tags
:
title: 标签
date: 2019-01-18 16:33:05
type: tags
添加「分类」页面
新建「分类」页面,并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。 底下代码是一篇包含分类的文章的例子:
title: 分类测试文章
categories: Testing
---
创建“分类”选项
hexo new page categories
# 成功后会提示:
# INFO Created: ~/blog/source/categories/index.md
根据上面的路径,找到index.md
这个文件,打开后默认内容是这样的:
---
title: categories
date: 2019-01-18 16:33:57
---
title
的值改成文章分类
,添加type: categories
到内容中:
---
title: 文章分类
date: 2019-01-18 16:33:57
type: categories
---
设置字体
为了解决 Google Fonts API 不稳定的问题,NexT 在 5.0.1 中引入此特性。 通过此特性,你可以指定所使用的字体库外链地址;与此同时,NexT 开放了 5 个特定范围的字体设定,他们是:
- 全局字体:定义的字体将在全站范围使用
- 标题字体:文章内标题的字体(h1, h2, h3, h4, h5, h6)
- 文章字体:文章所使用的字体
- Logo字体:Logo 所使用的字体
- 代码字体: 代码块所使用的字体
设置代码高亮主题
NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal
主题,可选的值有 normal
,night
, night blue
, night bright
, night eighties
:
高亮主题设置示例
# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
侧边栏社交链接
侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。
链接放置在 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
# 等等
设定链接的图标,对应的字段是 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/
站点建立时间
这个时间将在站点的底部显示,例如 © 2013 - 2015
。 编辑 主题配置文件
配置示例
since: 2013
订阅微信公众号
在每篇文章的末尾显示微信公众号二维码,扫一扫,轻松订阅博客。
在微信公众号平台下载您的二维码,并将它存放于博客source/uploads/
目录下。
设置「动画效果」
NexT 默认开启动画效果,效果使用 JavaScript 编写,因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度,可以将设置此字段的值为 false
来关闭动画。
编辑 主题配置文件, 搜索 use_motion
,根据您的需求设置值为 true 或者 false 即可:
use_motion: true # 开启动画效果
use_motion: false # 关闭动画效果
设置「背景动画」
NexT 自带两种背景动画效果
编辑 主题配置文件, 搜索 canvas_nest
或 three_waves
,根据您的需求设置值为 true
或者 false
即可:
canvas_nest 配置示例
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画
three_waves 配置示例
# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画
3.配置记录
头像
搜索:avatar
比如我的头像是放在D:\CODE\blog\themes\next\source\images\
文件夹下的Elena.jpg
# Sidebar Avatar
avatar:
url: /images/Elena.jpg #/images/avatar.gif