Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: display header links of all pages (fix #534) #595

Merged
merged 3 commits into from
Jun 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions docs/default-theme-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,18 @@ sidebarDepth: 2
---
```

### Displaying Header Links of All Pages

The sidebar only displays links for headers in the current active page. You can display all header links for every page with `themeConfig.displayAllHeaders: false`:

``` js
module.exports = {
themeConfig: {
displayAllHeaders: true // Default: false
}
}
```

### Active Header Links

By default, the nested header links and the hash in the URL are updated as the user scrolls to view the different sections of the page. This behavior can be disabled with the following theme config:
Expand Down
14 changes: 13 additions & 1 deletion docs/zh/default-theme-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ module.exports = {

### 嵌套的标题链接

默认情况下,侧边栏会自动地显示由当前页面标的题(headers)组成的的链接,并按照页面本身的结构进行嵌套,你可以通过 `themeConfig.sidebarDepth` 来修改它的行为。默认的深度是 `1`,它将提取到 `h2` 的标题,设置成 `0` 将会禁用标题(headers)链接,同时,最大的深度为 `2`,它将同时提取 `h2` 和 `h3` 标题。
默认情况下,侧边栏会自动地显示由当前页面的标题(headers)组成的链接,并按照页面本身的结构进行嵌套,你可以通过 `themeConfig.sidebarDepth` 来修改它的行为。默认的深度是 `1`,它将提取到 `h2` 的标题,设置成 `0` 将会禁用标题(headers)链接,同时,最大的深度为 `2`,它将同时提取 `h2` 和 `h3` 标题。

也可以使用 `YAML front matter` 来为某个页面重写此值:

Expand All @@ -140,6 +140,18 @@ sidebarDepth: 2
---
```

### 显示所有页面的标题链接

默认情况下,侧边栏只会显示由当前活动页面的标题(headers)组成的链接,你可以设置 `themeConfig.displayAllHeaders` 来显示所有页面的标题链接:

``` js
module.exports = {
themeConfig: {
displayAllHeaders: true // 默认值:false
}
}
```

### 活动的标题链接

默认情况下,当用户通过滚动查看页面的不同部分时,嵌套的标题链接和 URL 中的 Hash 值会实时更新,这个行为可以通过以下的配置来禁用:
Expand Down
5 changes: 3 additions & 2 deletions lib/default-theme/SidebarLink.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ export default {
? $page.frontmatter.sidebarDepth
: $site.themeConfig.sidebarDepth
const maxDepth = configDepth == null ? 1 : configDepth
const displayAllHeaders = !!$site.themeConfig.displayAllHeaders
if (item.type === 'auto') {
return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
} else if (active && item.headers && !hashRE.test(item.path)) {
} else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
const children = groupHeaders(item.headers)
return [link, renderChildren(h, children, item.path, $route, maxDepth)]
} else {
Expand Down Expand Up @@ -48,7 +49,7 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
const active = isActive(route, path + '#' + c.slug)
return h('li', { class: 'sidebar-sub-header' }, [
renderLink(h, '#' + c.slug, c.title, active),
renderLink(h, path + '#' + c.slug, c.title, active),
renderChildren(h, c.children, path, route, maxDepth, depth + 1)
])
}))
Expand Down