Hexo-theme-next: Want to display all level of TOC in a post, rather than part of it only when activated.

[pengzhenghao]

I agree and want to create new issue

• [ ] Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• [ ] Yes, I was on NexT Documentation Site.
• [ ] And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

I want to display all level of TOC, rather than only the first level of TOC initially and display sub-level of TOC only when I clicked a title in TOC.

Actual behavior

I am sorry I can't find a place to modify it, due to my poor knowledge of frontend.

Related issues: #531, #710

Steps to reproduce the behavior

1. You know what I mean, right?
2. Link to demo site with this issue: N/A
3. Link(s) to source code or any usefull link(s): N/A

Node.js and NPM Information

Package dependencies Information

Hexo Information

Hexo version

INPUT: hexo version
OUTPUT:
hexo-cli: 1.1.0
os: Darwin 16.6.0 darwin x64
http_parser: 2.7.0
node: 8.10.0
v8: 6.2.414.50
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.25.0
openssl: 1.0.2n
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 彭正皓的博客
subtitle: PENG Zhenghao's blog
description: 
author: 彭正皓
email: [email protected]
language: zh-CN
timezone: Asia/Shanghai

# URL
url: http://PengZhenghao.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: /Users/pengzhenghao/Documents/hexo
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/PengZhenghao/PengZhenghao.github.io
  branch: master

NexT Information

NexT Version:

NexT.Pisces v5.1.4

NexT Scheme:
NexT.Pisces v5.1.4

NexT Configuration:

# Relative part
# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: false

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

[lei2rock]

I give a method in my blog. For more detail, see this post. Just add line 140 - 142 into your custom css style file /themes/next/source/css/_custom/custom.styl to enable it.

[pengzhenghao]

@dldylan Thanks a lot! It works! BTW your blog is excellent.

[xiaohaoliang]

this post is missing ... @dongleizhang

[lei2rock]

this post is missing ... @dongleizhang

Sorry for replying late. You can visit my GitHub repo to find it. @xiaohaoliang

[xiaohaoliang]

this post is missing ... @dongleizhang

Sorry for replying late. You can visit my GitHub repo to find it. @xiaohaoliang

tks~ @dongleizhang

[Coodool]

If you want to expand all level of your TOC, add the following CSS style to themes/next/source/css/_custom/custom.styl will works:

.post-toc .nav .nav-child { 
    display: block; 
}

But we usually used more than third level of heading in the post, and all the headings expanded in the TOC make it chaotic. So I suppose that just extand all the first level nav item with the following CSS style would be the best practice.

.post-toc .nav .nav-level-1>.nav-child { 
   display: block; 
}

My Hexo blog will be avaliable recently at Yearito's Blog. Wish you can find more useful information there.

[stevenjoezhang]

Added in https://github.com/theme-next/hexo-theme-next/pull/679

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. It is possible issue was solved or at least outdated. Feel free to open new for related bugs.