Hexo 搭建个人博客（八）NexT 侧边栏配置

目标

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

本文相关 推荐阅读：

• Hexo 搭建个人博客（七）Hexo 配置 NexT 主题
• Hexo 搭建个人博客（九）NexT 主题进阶配置

环境及版本声明

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

hexo: 3.8.0
hexo-cli: 1.1.0
NexT: 7.1.0
OS: Ubuntu 18.04 LTS x86_64

设置侧边栏

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

设置返回顶部

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

设置头像

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

# 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 字段为你的站点描述，站点描述也可以是你喜欢的一句签名

设置社交链接

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

# 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 内置了多个网站的链接，可以取消想要添加链接的注释，也可以自定义，例如：

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

设置友情链接

# 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

例如：

links_icon: link
links_title: 福利链接
links_layout: inline
links:
  Title1: http://example.com
  Title2: http://example.com

设置文章目录

# 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