Home

Awesome

VuePress Plugin GeoPattern

<p align="left"> <a href="https://www.npmjs.com/package/vuepress-plugin-geopattern"><img src="https://img.shields.io/npm/v/vuepress-plugin-geopattern.svg?maxAge=2592000"></a> <a href="https://www.npmjs.com/package/vuepress-plugin-geopattern"><img src="https://img.shields.io/npm/dt/vuepress-plugin-geopattern.svg"></a> <a href="https://raw.githubusercontent.com/vueblocks/vuepress-plugin-geopattern/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a> </p>

Register a global <GeoPattern /> component for VuePress.

This component generate a beautiful random geometric pattern & random color background images from a string you given.

This plugin is a adapter of geopattern for VuePress

See Demo on CodeSandbox

Edit vuepress-plugin-geopattern

Installation

yarn add vuepress-plugin-geopattern -S
or
npm i vuepress-plugin-geopattern -S

Register the plugin

...
module.exports = {
  ...,
  plugins: {
    ['geopattern']
  },
  ...
}
...

Usage

Default

Only background image, you must give the height of the element

<GeoPattern style="height: 160px;" />

Custom pattern

If you don't provide a seed, the pattern's seed is random.

In VuePress you can use global computed properties such as use this.$page.title as a seed, generate a geopattern by the page title.

Each page title is different, so you got difference geopattern.

<GeoPattern
  style="height: 160px;"
  seed="$page.title"
  :colorHexs="['F', '4', 'A']"
/>

With the custom slot

In the case, you can let the slot element control the pattern's height

<geo-pattern>
  <div style="padding: 64px; font-size: 2rem; color: white;">
    All Posts
  </div>
</geo-pattern>

API

colorHexs is a new props for this component, I believe that three hexadecimal color value[0-F] can generate beautiful colors in random way.

PropsDescriptionTypeDefault
seedWill be used as the seed for generationStringvuepress-plugin-geopattern
colorHexsGiven array elements is hexadecimal color value [0-F]Array['3', '9', 'C' ]
baseColorControls the relative background color of the generated image.String933c3c

Slot

<GeoPattern /> component provide a custom slot, you can write some element on the generated pattern.

Related VuePress Plugin

License

MIT @ xiaoluoboding