next主题侧边栏设置

发表于

默认情况下，侧边栏仅在有目录的帖子中显示，并且位于左侧。您可以通过编辑 NexT 配置文件中的 sidebar
 设置来更改它。

侧边栏有几种选项，包括 position
（位置）、width_expanded
（展开宽度）、width_dual_column
（双栏宽度）、display
（显示）、padding
（内边距）和 offset
（偏移）。

配置头像

默认情况下，NexT 不会在侧边栏中显示头像。您可以通过编辑 NexT 配置文件中的 avatar
 设置来配置它。

  • url
    ：头像的链接地址。

  • rounded
    ：是否将头像设置为圆形。

  • rotated
    ：鼠标悬停时头像是否旋转。

在首次测试时，您可以取消注释 NexT 配置文件中 avatar.url
 附近的 /images/avatar.gif
 值，以查看默认头像：

1
2
3
4
5
6
7
8
9
10
11
12
avatar:  url: /images/avatar.gif
```  
  
然后，您需要指定自己的头像。可以通过以下方式之一实现：  
- 使用 Hexo 目录  
  
- 使用 NexT 目录  
  
- 使用互联网上的绝对 URL  
  
将您的头像放在站点目录 source/uploads/  
 下（如果该目录不存在，请创建它），然后将选项更改为：

url: /uploads/avatar.png

1
2
3
  
将您的头像放在主题目录 source/images/  
 下，然后将选项更改为：

url: /images/avatar.png

1
2
3
  
当前站点使用的是位于主题目录下的文件 next/source/images/apple-touch-icon-next.png  
，配置如下：

avatar:  url: /images/apple-touch-icon-next.png

1
2
3
4
5
6
7
8
9
10
11
12
  
您也可以指定任何具有绝对路径的外部 URL，例如：http(s)://example.com/avatar.png  
。  
  
通过更改 avatar.rounded  
 的值来设置头像的圆角：  
- true  
：头像将显示为圆形。  
  
- **false**  
：头像将显示为方形。

avatar:  rounded: true

1
2
3
4
5
6
7
8
9
  
通过更改 avatar.rotated  
 的值来设置头像的旋转：  
- true  
：鼠标悬停时，头像会旋转。  
  
- **false**  
：鼠标悬停时，头像不会旋转。

avatar:  rotated: true

1
2
3
4
## 站点状态  
  
默认情况下，NexT 会在侧边栏中显示帖子、分类和标签的分类及数量。您可以通过编辑 NexT 配置文件中的 site_state  
 值来配置它。

site_state: true

1
2
3
4
5
6
## 社交链接  
  
社交链接的结构与菜单项类似，唯一的区别在于目标链接必须是完整的 URL 路径（永久链接）。  
  
编辑 NexT 配置文件中的 social  
 部分，如下所示：

social:GitHub: https://github.com/yourname || fab fa-githubE-Mail: mailto:yourname@gmail.com || fa fa-envelopeWeibo: https://weibo.com/yourname || fab fa-weiboTwitter: https://twitter.com/yourname || fab fa-twitterFB Page: https://www.facebook.com/yourname || fab fa-facebookStackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflowYouTube: https://youtube.com/yourname || fab fa-youtubeInstagram: https://instagram.com/yourname || fab fa-instagramSkype: skype:yourname?call|chat || fab fa-skype

1
2
3
4
5
6
7
8
9
10
11
  
默认情况下，NexT 会在侧边栏中显示社交链接的图标。  
## 博客链接  
  
您可以在 NexT 的侧边栏中添加博客链接。  
- links_settings  
- links  
默认情况下，NexT 会在标题前显示一个 globe  
 图标。您可以在 Font Awesome 网站上找到图标的名称，并通过编辑 NexT 配置文件中 links_settings  
 部分的 icon  
 值来配置它。

links_settings:  icon: fa fa-globe

1
2
3
4
5
  
默认情况下，所有博客链接都以块级形式显示。您可以通过编辑 NexT 配置文件中 links_settings  
 部分的 layout  
 值，将其配置为 inline  
。

links_settings:  layout: block

1
2
3
  
编辑 NexT 配置文件中的 links  
 部分，并添加您喜欢的链接：

links:  Title1: https://example1.com/  Title2: https://example2.com/

1
2
3
4
5
## 目录（TOC）  
  
默认情况下，NexT 会在侧边栏中显示目录（TOC）。您可以通过将 NexT 配置文件中的 toc.enable  
 设置为 false  
 来禁用它。

toc:  enable: true

1
2
3
4
  
默认情况下，NexT 会自动为 TOC 添加列表编号。您可以通过将 NexT 配置文件中的 toc.number  
 设置为 false  
 来禁用它。

toc:  number: true

1
2
3
4
  
如果帖子标题的宽度超过了侧边栏的宽度，您可以通过将 NexT 配置文件中的 toc.wrap  
 设置为 true  
，将标题文字换行显示。

toc:  wrap: true

1
2
3
4
  
如果您希望在帖子中显示所有层级的 TOC，而不是仅显示激活部分，您可以通过将 NexT 配置文件中的 toc.expand_all  
 设置为 true  
 来实现。

toc:  expand_all: true

1
2
3
  
默认情况下，生成的 TOC 的最大标题深度为 6。您可以通过将 NexT 配置文件中的 toc.max_depth  
 设置为其他数字来更改它。

toc:  max_depth: 3

  
  

![江达小记](/images/wechatmpscan.png)