https://github.com/tolking/vuepress-plugin-reading-progress
a reading progress bar plugin for vuepress
https://github.com/tolking/vuepress-plugin-reading-progress
progress reading reading-progress vuepress vuepress-plugin
Last synced: 2 months ago
JSON representation
a reading progress bar plugin for vuepress
- Host: GitHub
- URL: https://github.com/tolking/vuepress-plugin-reading-progress
- Owner: tolking
- License: mit
- Created: 2019-04-14T08:53:58.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-05T04:52:24.000Z (almost 5 years ago)
- Last Synced: 2025-03-09T17:15:30.909Z (3 months ago)
- Topics: progress, reading, reading-progress, vuepress, vuepress-plugin
- Language: Vue
- Homepage:
- Size: 12.7 KB
- Stars: 27
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-reading-progress
> a reading progress bar plugin for vuepress
[README](README.md) | [CHANGELOG](CHANGELOG.md)
add reading progress bar for vuepress
---
## Installation
``` sh
yarn add vuepress-plugin-reading-progress
# or
npm i vuepress-plugin-reading-progress
```
## Usage
``` js
module.exports = {
plugins: [
'reading-progress'
]
}
```
[ Vuepress documentation](https://vuepress.vuejs.org/plugin/using-a-plugin.html)
## Options
### readingDir
- Type: `null`, `string`, `array`, `object`, `RegExp`
- Required: `false`
Specify regularPath that display reading progress bar
example
``` js
{
readingDir: 'posts'
// or
readingDir: ['posts1', 'posts2', 'posts3']
// or { dir: fixed }
readingDir: {
posts1: 'top',
posts2: 'bottom',
posts3: 'left'
}
// or RegExp
readingDir: /[^/]+$/ // exclude regularPath end with `/`
// or
readingDir: new RegExp('[^/]+$')
}
```
### fixed
- Type: `string`
- Default: `top`
- Required: `false`
support `top`, `bottom`, `left`, `right`
set position for reading progress bar
## Front matter
Change the reading progress bar display of the current page by use `readingShow`
- Type: `string`, `boolean`
- Required: `false`
- one of `top`, `bottom`, `left`, `right`, `true`, `false`
``` md
---
readingShow: false
---
```
## Style
If you wish to apply simple color overrides to the styling
```
+- .vuepress
+- styles
+- palette.styl
```
``` styl
$readingBgColor = transparent
$readingZIndex = 1000
$readingSize = 3px
$readingProgressColor = $accentColor
$readingProgressImage = none
```
#### example
``` styl
$readingProgressImage = linear-gradient(-120deg, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%)
```
## License
[MIT](http://opensource.org/licenses/MIT)