From 6cb235b4ac39aa78c50558c777dd0ee577cee77b Mon Sep 17 00:00:00 2001 From: zhukaihao Date: Fri, 15 Jun 2018 17:11:08 +0800 Subject: [PATCH 1/3] feat: display header links of all pages --- docs/default-theme-config/README.md | 12 ++++++++++++ docs/zh/default-theme-config/README.md | 14 +++++++++++++- lib/default-theme/SidebarLink.vue | 5 +++-- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md index 83c0715628..b696fb99f2 100644 --- a/docs/default-theme-config/README.md +++ b/docs/default-theme-config/README.md @@ -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: diff --git a/docs/zh/default-theme-config/README.md b/docs/zh/default-theme-config/README.md index c28b4dc60a..82e46d8d53 100644 --- a/docs/zh/default-theme-config/README.md +++ b/docs/zh/default-theme-config/README.md @@ -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` 来为某个页面重写此值： @@ -140,6 +140,18 @@ sidebarDepth: 2 --- ``` +### 显示所有页面的标题链接 + +默认情况下，侧边栏只会显示由当前页面的标题（headers）组成的链接，你可以设置 `themeConfig.displayAllHeaders` 来显示所有页面的标题链接： + +``` js +module.exports = { + themeConfig: { + displayAllHeaders: true, // 默认值：false + } +} +``` + ### 活动的标题链接 默认情况下，当用户通过滚动查看页面的不同部分时，嵌套的标题链接和 URL 中的 Hash 值会实时更新，这个行为可以通过以下的配置来禁用： diff --git a/lib/default-theme/SidebarLink.vue b/lib/default-theme/SidebarLink.vue index 894aeaff41..b5ee8ec158 100644 --- a/lib/default-theme/SidebarLink.vue +++ b/lib/default-theme/SidebarLink.vue @@ -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 { @@ -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) ]) })) From 84ca7169365f347d94175f35a0deda0869bc5043 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Tue, 26 Jun 2018 22:17:57 +0800 Subject: [PATCH 2/3] chore: tweaks --- docs/zh/default-theme-config/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/zh/default-theme-config/README.md b/docs/zh/default-theme-config/README.md index 82e46d8d53..f05c346b32 100644 --- a/docs/zh/default-theme-config/README.md +++ b/docs/zh/default-theme-config/README.md @@ -142,12 +142,12 @@ sidebarDepth: 2 ### 显示所有页面的标题链接 -默认情况下，侧边栏只会显示由当前页面的标题（headers）组成的链接，你可以设置 `themeConfig.displayAllHeaders` 来显示所有页面的标题链接： +默认情况下，侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以设置 `themeConfig.displayAllHeaders` 来显示所有页面的标题链接： ``` js module.exports = { themeConfig: { - displayAllHeaders: true, // 默认值：false + displayAllHeaders: true // 默认值：false } } ``` From 2c654535c09a1d4c5ca51914814e709388e73450 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Tue, 26 Jun 2018 22:18:29 +0800 Subject: [PATCH 3/3] Update README.md --- docs/default-theme-config/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md index b696fb99f2..101e06b324 100644 --- a/docs/default-theme-config/README.md +++ b/docs/default-theme-config/README.md @@ -149,7 +149,7 @@ The sidebar only displays links for headers in the current active page. You can ``` js module.exports = { themeConfig: { - displayAllHeaders: true, // Default: false + displayAllHeaders: true // Default: false } } ```