Skip to content

xiaoluoboding/vuepress-plugin-geopattern

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VuePress Plugin GeoPattern

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.

Props Description Type Default
seed Will be used as the seed for generation String vuepress-plugin-geopattern
colorHexs Given array elements is hexadecimal color value [0-F] Array ['3', '9', 'C' ]
baseColor Controls the relative background color of the generated image. String 933c3c

Slot

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

Related VuePress Plugin

License

MIT @ xiaoluoboding