https://github.com/moefyit/vuepress-plugin-ribbon
:reminder_ribbon: Add a beautiful ribbon to your vuepress!
https://github.com/moefyit/vuepress-plugin-ribbon
plugin ribbon vuepress
Last synced: about 2 months ago
JSON representation
:reminder_ribbon: Add a beautiful ribbon to your vuepress!
- Host: GitHub
- URL: https://github.com/moefyit/vuepress-plugin-ribbon
- Owner: moefyit
- License: mit
- Created: 2019-10-11T12:06:41.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-06-16T02:40:04.000Z (4 months ago)
- Last Synced: 2025-08-09T18:50:09.328Z (about 2 months ago)
- Topics: plugin, ribbon, vuepress
- Language: Vue
- Homepage: https://moefyit.github.io/moefy-vuepress/
- Size: 309 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-ribbon
:reminder_ribbon: Add a beautiful ribbon to your vuepress!
- Document: [moefy-vuepress](https://moefyit.github.io/moefy-vuepress/)
- Live demo: [notev](https://nyakku.moe/)
> Want to use it outside of VuePress1.x? Try [moefy-canvas](https://github.com/moefyit/moefy-canvas)!
## Install
```bash
yarn add vuepress-plugin-ribbon -D
# or use npm
npm i vuepress-plugin-ribbon -D
```
## Usage
```javascript
module.exports = {
plugins: ['ribbon'],
}
```
## Options
```js
module.exports = {
plugins: [
[
'ribbon',
{
size: 90, // width of the ribbon, default: 90
opacity: 0.8, // opacity of the ribbon, default: 0.3
zIndex: -1, // z-index property of the background, default: -1
},
],
],
}
```
## Thanks
- [vuepress-plugin-nest](https://github.com/vxhly/vuepress-plugin-nest)
- [canvas-nest.js](https://github.com/hustcc/canvas-nest.js)
- [ribbon.js](https://github.com/hustcc/ribbon.js)