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

…docs (#1366)
vuejs · Mar 2, 2019 · 1a928c7 · 1a928c7
1 parent 5a111a2
commit 1a928c7
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 4 deletions.
diff --git a/packages/@vuepress/plugin-nprogress/nprogress.styl b/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
 

diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js
@@ -120,6 +120,7 @@ function getGuideSidebar (groupA, groupB) {
 const officalPlugins = fs
   .readdirSync(path.resolve(__dirname, '../plugin/official'))
   .map(filename => 'official/' + filename.slice(0, -3))
+  .sort()
 
 function getPluginSidebar (pluginTitle, pluginIntro, officialPluginTitle) {
   return [

diff --git a/packages/docs/docs/plugin/official/plugin-nprogress.md b/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)
diff --git a/packages/docs/docs/zh/plugin/official/plugin-nprogress.md b/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)