feat($plugin-nprogress): allow nprogress use different color and add docs

packages/@vuepress/plugin-nprogress/nprogress.styl

@@ -1,7 +1,9 @@
+$nprogressColor ?= $accentColor
+
 #nprogress
   pointer-events none
   .bar
-    background $accentColor
+    background $nprogressColor
     position fixed
     z-index 1031
     top 0
@@ -14,7 +16,7 @@
     right 0px
     width 100px
     height 100%
-    box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor
+    box-shadow 0 0 10px $nprogressColor, 0 0 5px $nprogressColor
     opacity 1.0
     transform rotate(3deg) translate(0px, -4px)
   .spinner
@@ -28,8 +30,8 @@
     height 18px
     box-sizing border-box
     border solid 2px transparent
-    border-top-color $accentColor
-    border-left-color $accentColor
+    border-top-color $nprogressColor
+    border-left-color $nprogressColor
     border-radius 50%
     animation nprogress-spinner 400ms linear infinite
 

packages/docs/docs/.vuepress/config.js

@@ -132,18 +132,19 @@ function getPluginSidebar (pluginTitle, pluginIntro, officialPluginTitle) {
       title: officialPluginTitle,
       collapsable: false,
       children: [
-        'official/plugin-search',
         'official/plugin-active-header-links',
-        'official/plugin-pwa',
+        'official/plugin-back-to-top',
         'official/plugin-blog',
-        'official/plugin-pagination',
+        'official/plugin-clean-urls',
         'official/plugin-google-analytics',
         'official/plugin-i18n-ui',
         'official/plugin-last-updated',
         'official/plugin-medium-zoom',
-        'official/plugin-back-to-top',
+        'official/plugin-nprogress',
+        'official/plugin-pagination',
+        'official/plugin-pwa',
         'official/plugin-register-components',
-        'official/plugin-clean-urls'
+        'official/plugin-search'
       ]
     }
   ]

packages/docs/docs/plugin/official/plugin-nprogress.md

@@ -0,0 +1,39 @@
+---
+title: nprogress
+metaTitle: Nprogress Plugin | VuePress
+---
+
+# [@vuepress/plugin-nprogress](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-nprogress)
+
+> Nprogress plugin
+
+## Install
+
+```bash
+yarn add -D @vuepress/plugin-nprogress
+# OR npm install -D @vuepress/plugin-nprogress
+```
+
+## Usage
+
+```javascript
+module.exports = {
+  plugins: ['@vuepress/nprogress']
+}
+```
+
+## Custom color
+
+Set `$nprogressColor` in your __site__ or __theme__ `palette.styl` file to change the color of the progress bar (default is `$accentColor`).
+
+```stylus
+// .vuepress/styles/palette.styl
+// or
+// .vuepress/theme/styles/palette.styl
+
+$nprogressColor = red
+```
+
+**Also see:**
+
+- [Config Reference > Styling](../../config/#styling)

packages/docs/docs/zh/plugin/official/plugin-nprogress.md

@@ -0,0 +1,39 @@
+---
+title: nprogress
+metaTitle: Nprogress 插件 | VuePress
+---
+
+# [@vuepress/plugin-nprogress](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-nprogress)
+
+> Nprogress plugin
+
+## 安装
+
+```bash
+yarn add -D @vuepress/plugin-nprogress
+# 或者 npm install -D @vuepress/plugin-nprogress
+```
+
+## 使用
+
+```javascript
+module.exports = {
+  plugins: ['@vuepress/nprogress']
+}
+```
+
+## 自定义颜色
+
+在你的 __site__ 或 __theme__ 的 `palette.styl` 文件中设置 `$nprogressColor` 来改变进度条的颜色（默认使用 `$accentColor`）。
+
+```stylus
+// .vuepress/styles/palette.styl
+// 或者
+// .vuepress/theme/styles/palette.styl
+
+$nprogressColor = red
+```
+
+**参考：**
+
+- [配置 > Styling](../../config/#styling)