Skip to content

Commit

Permalink
feat($theme-default): smooth scroll (close #567) (#1881)
Browse files Browse the repository at this point in the history
* feat($plugin-active-header-links): replace throttle by debounce

* feat($theme-default): use plugin-smooth-scroll (close #567)

* feat($theme-default): smooth-scroll option

* docs: smooth-scroll option of default theme

* docs: enable smooth-scroll
  • Loading branch information
meteorlxy authored and ulivz committed Sep 23, 2019
1 parent b44bab3 commit 2e3efb4
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 48 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/* global AHL_SIDEBAR_LINK_SELECTOR, AHL_HEADER_ANCHOR_SELECTOR */

import throttle from 'lodash.throttle'
import debounce from 'lodash.debounce'

export default {
mounted () {
window.addEventListener('scroll', this.onScroll)
},

methods: {
onScroll: throttle(function () {
onScroll: debounce(function () {
this.setActiveHash()
}, 300),

Expand Down
2 changes: 1 addition & 1 deletion packages/@vuepress/plugin-active-header-links/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"generator"
],
"dependencies": {
"lodash.throttle": "^4.1.1"
"lodash.debounce": "^4.0.8"
},
"author": "ULIVZ <chl814@foxmail.com>",
"license": "MIT",
Expand Down
88 changes: 48 additions & 40 deletions packages/@vuepress/theme-default/index.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,54 @@
const path = require('path')

// Theme API.
module.exports = (options, ctx) => ({
alias () {
const { themeConfig, siteConfig } = ctx
// resolve algolia
const isAlgoliaSearch = (
themeConfig.algolia
|| Object.keys(siteConfig.locales && themeConfig.locales || {})
module.exports = (options, ctx) => {
const { themeConfig, siteConfig } = ctx

// resolve algolia
const isAlgoliaSearch = (
themeConfig.algolia
|| Object
.keys(siteConfig.locales && themeConfig.locales || {})
.some(base => themeConfig.locales[base].algolia)
)
return {
'@AlgoliaSearchBox': isAlgoliaSearch
? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
: path.resolve(__dirname, 'noopModule.js')
}
},
)

plugins: [
['@vuepress/active-header-links', options.activeHeaderLinks],
'@vuepress/search',
'@vuepress/plugin-nprogress',
['container', {
type: 'tip',
defaultTitle: {
'/': 'TIP',
'/zh/': '提示'
}
}],
['container', {
type: 'warning',
defaultTitle: {
'/': 'WARNING',
'/zh/': '注意'
}
}],
['container', {
type: 'danger',
defaultTitle: {
'/': 'WARNING',
'/zh/': '警告'
const enableSmoothScroll = themeConfig.smoothScroll === true

return {
alias () {
return {
'@AlgoliaSearchBox': isAlgoliaSearch
? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
: path.resolve(__dirname, 'noopModule.js')
}
}]
]
})
},

plugins: [
['@vuepress/active-header-links', options.activeHeaderLinks],
'@vuepress/search',
'@vuepress/plugin-nprogress',
['container', {
type: 'tip',
defaultTitle: {
'/': 'TIP',
'/zh/': '提示'
}
}],
['container', {
type: 'warning',
defaultTitle: {
'/': 'WARNING',
'/zh/': '注意'
}
}],
['container', {
type: 'danger',
defaultTitle: {
'/': 'WARNING',
'/zh/': '警告'
}
}],
['smooth-scroll', enableSmoothScroll]
]
}
}
3 changes: 2 additions & 1 deletion packages/@vuepress/theme-default/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"lodash": "^4.17.15",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vuepress-plugin-container": "^2.0.0"
"vuepress-plugin-container": "^2.0.0",
"vuepress-plugin-smooth-scroll": "^0.0.3"
}
}
1 change: 1 addition & 0 deletions packages/docs/docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ module.exports = ctx => ({
apiKey: '3a539aab83105f01761a137c61004d85',
indexName: 'vuepress'
}) : null,
smoothScroll: true,
locales: {
'/': {
label: 'English',
Expand Down
13 changes: 13 additions & 0 deletions packages/docs/docs/theme/default-theme-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,19 @@ next: ./my-next-page # Will overwrite 'nextLinks' property from themeConfig
---
```

## Smooth Scrolling

The `themeConfig.smoothScroll` option allows you to enable smooth scrolling.

``` js
// .vuepress/config.js
module.exports = {
themeConfig: {
smoothScroll: true
}
}
```

## Custom Page Class

Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`:
Expand Down
13 changes: 13 additions & 0 deletions packages/docs/docs/zh/theme/default-theme-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,19 @@ editLink: false
---
```

## 页面滚动

你可以通过 `themeConfig.smoothScroll` 选项来启用页面滚动效果。

``` js
// .vuepress/config.js
module.exports = {
themeConfig: {
smoothScroll: true
}
}
```

## 自定义页面类

有时候你可能需要为特定页面添加一个 CSS 类名,以方便针对该页面添加一些专门的 CSS。这种情况下你可以在该页面的 YAML front matter 中声明一个 `pageClass`
Expand Down
16 changes: 12 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7304,10 +7304,6 @@ lodash.templatesettings@^4.0.0:
dependencies:
lodash._reinterpolate "~3.0.0"

lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"

lodash.unescape@4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
Expand Down Expand Up @@ -10465,6 +10461,11 @@ smart-buffer@4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"

smoothscroll-polyfill@^0.4.3:
version "0.4.4"
resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8"
integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==

snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
Expand Down Expand Up @@ -11994,6 +11995,13 @@ vuepress-plugin-flowchart@^1.4.2:
dependencies:
flowchart.js "^1.11.3"

vuepress-plugin-smooth-scroll@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/vuepress-plugin-smooth-scroll/-/vuepress-plugin-smooth-scroll-0.0.3.tgz#6eff2d4c186cca917cc9f7df2b0af7de7c8c6438"
integrity sha512-qsQkDftLVFLe8BiviIHaLV0Ea38YLZKKonDGsNQy1IE0wllFpFIEldWD8frWZtDFdx6b/O3KDMgVQ0qp5NjJCg==
dependencies:
smoothscroll-polyfill "^0.4.3"

w3c-hr-time@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
Expand Down

0 comments on commit 2e3efb4

Please sign in to comment.