From c6f48c69d026835b19fdbf85a5263863a1d946c1 Mon Sep 17 00:00:00 2001 From: Brian Retterer Date: Wed, 14 Nov 2018 13:56:22 -0500 Subject: [PATCH 1/2] Adds option for specifying the top offset --- .../plugin-active-header-links/index.js | 3 ++- .../plugin-active-header-links/mixin.js | 6 +++--- .../official/plugin-active-header-links.md | 18 ++++++++++++++++-- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/@vuepress/plugin-active-header-links/index.js b/packages/@vuepress/plugin-active-header-links/index.js index 3958c243ee..151b74b7c0 100644 --- a/packages/@vuepress/plugin-active-header-links/index.js +++ b/packages/@vuepress/plugin-active-header-links/index.js @@ -4,6 +4,7 @@ module.exports = (options) => ({ clientRootMixin: path.resolve(__dirname, 'mixin.js'), define: { AHL_SIDEBAR_LINK_SELECTOR: options.sidebarLinkSelector || '.sidebar-link', - AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor' + AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor', + AHL_TOP_OFFSET: options.headerTopOffset || 90 } }) diff --git a/packages/@vuepress/plugin-active-header-links/mixin.js b/packages/@vuepress/plugin-active-header-links/mixin.js index 553b635c04..b7b129fa27 100644 --- a/packages/@vuepress/plugin-active-header-links/mixin.js +++ b/packages/@vuepress/plugin-active-header-links/mixin.js @@ -1,4 +1,4 @@ -/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR */ +/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR, AHL_TOP_OFFSET */ import throttle from 'lodash.throttle' @@ -35,8 +35,8 @@ function getAnchors () { return { el, hash: decodeURIComponent(el.hash), - top: el.getBoundingClientRect().top - 90 - /* 90 is to Subtract height of navbar & anchor's padding top */ + top: el.getBoundingClientRect().top - AHL_TOP_OFFSET + /* AHL_TOP_OFFSET is to Subtract height of navbar & anchor's padding top */ } }) } diff --git a/packages/docs/docs/plugin/official/plugin-active-header-links.md b/packages/docs/docs/plugin/official/plugin-active-header-links.md index 98028bcc09..b5d1542448 100644 --- a/packages/docs/docs/plugin/official/plugin-active-header-links.md +++ b/packages/docs/docs/plugin/official/plugin-active-header-links.md @@ -18,11 +18,20 @@ yarn add -D @vuepress/plugin-active-header-links ```javascript module.exports = { - plugins: ['@vuepress/active-header-links'] + plugins: ['@vuepress/active-header-links'] } ``` ## Options +```javascript +module.exports = { + plugins: ['@vuepress/active-header-links', { + sidebarLinkSelector: '.sidebar-link', + headerAnchorSelector: '.header-anchor', + headerTopOffset: 120 + }] +} +``` ### sidebarLinkSelector @@ -32,5 +41,10 @@ module.exports = { ### headerAnchorSelector - Type: `string` -- Default: `.header-anchor'` +- Default: `.header-anchor` + +### headerTopOffset + +- Type: `integer` +- Default: `90` From 83c389954e3a37f4af03ceacf8844071fd5cc3f3 Mon Sep 17 00:00:00 2001 From: Brian Retterer Date: Thu, 15 Nov 2018 09:41:39 -0500 Subject: [PATCH 2/2] Updates for PR review --- .../docs/docs/plugin/official/plugin-active-header-links.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docs/docs/plugin/official/plugin-active-header-links.md b/packages/docs/docs/plugin/official/plugin-active-header-links.md index b5d1542448..98cc0043c1 100644 --- a/packages/docs/docs/plugin/official/plugin-active-header-links.md +++ b/packages/docs/docs/plugin/official/plugin-active-header-links.md @@ -22,7 +22,7 @@ module.exports = { } ``` -## Options +### Passing Options ```javascript module.exports = { plugins: ['@vuepress/active-header-links', { @@ -33,6 +33,8 @@ module.exports = { } ``` +## Options + ### sidebarLinkSelector - Type: `string` @@ -44,6 +46,7 @@ module.exports = { - Default: `.header-anchor` ### headerTopOffset +The number of pixels that you want the header to be from the top of the page before updating the url hash switch to that header. - Type: `integer` - Default: `90`