Skip to content

侧边栏

配置文件

侧边栏中包含多种配置,可通过修改主题_config.yml实现

# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300
...
...

位置

默认侧边栏放置在左侧,可修改sidebar -> position属性

sidebar:
  # Sidebar Position.
  position: left
  #position: right
...

头像

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false
  • url:图像地址。默认为NexT包下/source/images/avatar.gif,也可放置在站点路径/source/uploads文件夹内
  • rounded:是否显示为圆形图标
  • rotated:光标移动到图标是否旋转

自定义图标:

  1. myOctocat
  2. zlogo

社交链接

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

NexT内置了多个网站的链接,取消想要添加的链接注释

  • key值是显示的选项名
  • ||前面表示链接的地址
  • ||后面表示图标,可通过Font Awesome库自定义

比如我的自定义

social:
  Github: https://github.com/zjykzj || fab fa-github
  163: mailto:wy163zhuj@163.com || fas fa-envelope

友情链接

links:
  #Title: https://example.com

修改Title和链接地址

内容列表

NexT根据Markdown文件的标题设置,会在侧边栏显示相应的目录

# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true                                  # 是否开启目录
  # Automatically add list number to toc.
  number: true                                  # 自动增加列表数,比如`1.1 1.2 1.3`
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false                                   # 标题内容大于侧边栏宽,是否再下一行显示
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false                             # 是否自动扩展所有列表,而不是仅扩展当前二级标题下的列表
  # Maximum heading depth of generated toc.
  max_depth: 6

返回顶部

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
  • enable:默认为true。在右下角显示返回顶部图标
  • sidebar:默认为false。在侧边栏显示
  • scrollpercent:默认为false。是否显示进度

相关阅读