vuepress插件_vuepress的阅读进度条插件

vuepress插件

Vuepress插件阅读进度 (vuepress-plugin-reading-progress)

a reading progress bar plugin for vuepress.

vuepress的阅读进度条插件。

This plugin is for Vuepress 1.x which is currently in alpha

该插件用于Vuepress 1.x，目前处于Alpha状态

add reading progress bar for vuepress.

添加vuepress的阅读进度条。

安装 (Installation)

yarn add vuepress-plugin-reading-progress
// or
npm i vuepress-plugin-reading-progress

用法 (Usage)

module.exports = {
  plugins: [
    'reading-progress'
  ]
}

Vuepress documentation

Vuepress文档

选件 (Options)

阅读目录 (readingDir)

• Type: null, string, array, Object

  类型： null ， string ， array ， Object

• Default: null

  默认值： null

Specify folders that display reading progress bar

指定显示阅读进度条的文件夹

example

例

{
  readingDir: 'posts'
  // or
  readingDir: ['posts1', 'posts2', 'posts3']
  // or { dir: fixed }
  readingDir: {
    posts1: 'top',
    posts2: 'bottom',
    posts3: 'left'
  }
}

固定 (fixed)

• Type: string

  类型： string

• Default: top

  默认值： top

support top, bottom, left, right

支持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

通过使用readingShow更改当前页面的阅读进度条显示

---
readingShow: false
---
// or
---
readingShow: true
---

样式 (Style)

If you wish to apply simple color overrides to the styling

如果您希望对样式应用简单的颜色替代

+- .vuepress
  +- styles
    +- palette.styl

$readingBgColor = transparent
$readingZIndex = 1000
$readingSize = 3px
$readingProgressColor = $accentColor
$readingProgressImage = none

例 (example)

$readingProgressImage = linear-gradient(-150deg, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%)

翻译自: https://vuejsexamples.com/a-reading-progress-bar-plugin-for-vuepress/

vuepress插件