Hexo博客NexT主题开启文章目录和调整样式

发表于 更新于

一、前言

Hexo博客NexT主题中是有目录的，只是在默认情况下没有开启，需要我们来手动开启。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  #是否启动侧边栏
  enable: true
  # Automatically add list number to toc.
  #自动将列表编号添加到toc
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  #true时是当标题宽度很长时，自动换到下一行
  wrap: true
  # 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

二、修改样式文件

首先启用相应的styl

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #ariable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

然后打开source/_data/styles.styl添加下列代码：

1.文章目录默认展开

1
2
//文章目录默认展开
.post-toc .nav .nav-child { display: block; }

2.文章目录字体大小调整

1
2
3
.post-toc ol {  
  font-size : 13px;     
}

四、结果图展示

文章目录.png