NexT侧边栏配置

本文将介绍一些关于 NexT 侧边栏的配置。

环境及版本声明

本文基于以下环境及版本:

1
2
3
4
hexo: 3.8.0
hexo-cli: 1.1.0
NexT: 7.1.0
OS: Ubuntu 18.04 LTS x86_64

设置侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sidebar:
# 侧边栏位置, 可选值: left | right (仅适用于 Pisces | Gemini).
position: left

# 手动定义侧边栏宽度. 如果注释,将默认为:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# 侧边栏显示, 可选值 (仅适用于 Muse | Mist):
# - post 默认行为,在文章页面(拥有目录列表)时显示
# - always 在所有页面中都显示
# - hide 在所有页面中都隐藏(可以手动展开)
# - remove 完全移除
display: post

# 侧边栏相对于顶部菜单栏的偏移量(以像素为单位) (仅适用于 Pisces | Gemini).
offset: 12
# 在窄视图上启用侧边栏 (仅适用于 Muse | Mist).
onmobile: false
# 点击页面的任何空白部分关闭侧边栏 (仅适用于 Muse | Mist).
dimmer: false

设置返回顶部

1
2
3
4
5
6
7
back2top:
# 是否启用点击返回顶部按钮
enable: true
# 是否在侧边栏显示点击返回顶部按钮
sidebar: false
# 是否在返回顶部按钮显示已滚动百分比
scrollpercent: false

设置头像

NexT 默认不会在侧边栏展示头像,你可以在 主题配置文件 中修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Sidebar Avatar
avatar:
# 头像资源路径,可以在主题目录下,也可以在站点目录,还可以是网络链接
# 将头像放至主题目录下 (source/images): /images/avatar.gif
# 将头像放至站点目录下 (source/uploads): /uploads/avatar.gif
# 或者任何头像URL: http(s)://example.com/avatar.png
url: #/images/avatar.gif
# 如果为 true, 头像将会显示为圆形.
rounded: false
# 头像透明度,取值从0到1,1表示完全不透明.
opacity: 1
# 如果为 true, 当光标移动至头像时,头像会旋转.
rotated: false

设置作者昵称

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

设置站点描述

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

设置社交链接

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Social Links
# Usage: `Key: permalink || icon`
# Key 是向最终用户显示的链接标签.
# `||` 分隔符之前的值是目标的永久链接.
# `||` 分隔符后面的值是FontAwesome图标的名称。如果未指定图标(带或不带分隔符),则将加载globe图标.
social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#Weibo: https://weibo.com/yourname || weibo
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
# 是否启用社交链接图标
enable: true
# 是否只显示社交链接图标
icons_only: false
# 是否显示具有转换效果的社交链接图标
transition: false

NexT 内置了多个网站的链接,可以取消想要添加链接的注释,也可以自定义,例如:

1
2
3
social:
Github: https://github.com/wylu || github
CSDN: https://blog.csdn.net/qq_32767041 || book

设置友情链接

1
2
3
4
5
6
7
8
9
10
11
# Blog rolls
# NexT默认会在links_title之前显示链接图标,你可以使用FontAwesome的其它图标
links_icon: link
# NexT默认使用Links作为blogroll的名称,你可以自行修改
links_title: Links
# NexT默认所有blogrolls都以块显示,你可以改为内联
links_layout: block
#links_layout: inline
links:
# 此处添加你的友情链接
#Title: http://example.com

例如:

1
2
3
4
5
6
links_icon: link
links_title: 福利链接
links_layout: inline
links:
Title1: http://example.com
Title2: http://example.com

links

设置文章目录

1
2
3
4
5
6
7
8
9
10
11
12
# Table Of Contents in the Sidebar
toc:
# 是否启用侧边栏文章目录.
enable: true
# 是否自动将列表编号添加到TOC.
number: true
# 如果为true,如果标题宽度大于侧边栏宽度,则所有单词将放在下一行.
wrap: false
# 如果为true,将显示帖子中的所有TOC级别,而不是其中的激活部分.
expand_all: false
# 生成的TOC的最大深度. 你可以在一个帖子中通过Front Matter中的`toc_max_depth`设置它.
max_depth: 6