vuepress-theme-ououe

documentation
/
vue vuepress

A blog theme for VuePress

This plugin is for Vuepress 1.0

Live Demo: My Blog (opens new window)

Uses vuepress-theme-ououe-template (opens new window) to starter

Take TryGhost/Casper (opens new window) as a reference

Source code (opens new window)

# Installation

yarn add vuepress-theme-ououe
# or
npm i vuepress-theme-ououe

# Usage



 





// .vuepress -> config.js
module.exports = {
  theme: 'ououe',
  themeConfig: {
    // ...
  }
}

# Options

# defaultTheme

  • Type: string, object
  • Default: undefined

::: tip By default, light or dark themes are displayed by prefers-color-scheme (opens new window), You can change it by defaultTheme :::

support light, dark or { theme: [begin hours, end hours] }




 

 

 










module.exports = {
  theme: 'ououe',
  themeConfig: {
    defaultTheme: 'dark',
    // or
    defaultTheme: { dark: [18, 6] },
    // or
    defaultTheme: { light: [6, 18], dark: [18, 6] }
  },
  // When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js
  postcss: {
    plugins: [
      require('css-prefers-color-scheme/postcss'),
      require('autoprefixer')
    ]
  }
}

# showThemeButton

  • Type: boolean
  • Default: true

showThemeButton to control the chose theme button display

::: tip The display of the theme is determined by botton chose theme -> defaultTheme -> prefers-color-scheme :::

# cover

  • Type: string, object
  • Default: ''
cover: '/cover.jpg'
// or { base: img, path: img }
cover: {
  base: '/cover.jpg',
  '/posts/': '/posts.jpg'
  // ...
}

Show in the header of the index page

  • Type: string
  • Default: ''
  • Type: boolean
  • Default: true

# pageGroup

  • Type: number

  • Default: 5

    Number of pages Pagination

# postTime

  • Type: object
  • Default:
{
  createTime: 'Create Time',
  lastUpdated: 'Last Updated'
}
  • Type: array
  • Default: []
{
  text: 'Home',
  link: '/'
},
{
  text: 'Posts',
  link: '/posts/'
},
{
  text: 'About',
  link: '/about/'
}
// ...
  • Type: array
  • Default: []
{
  text: 'link',
  link: '/'
}
// ...

# useVssue

# Structure directores

+- blog
  +- .vuepress
    +- config.js
  +- posts
    +- test.md
    ...
  +- about
    +- index.md
  ...

::: tip TIP You don't need to create a index.md(or README.md) file in a folder that needs Pagination :::

or set layout

// about -> index.md

---

## layout: Page

# frontmatter

// posts -> test.md

---

title: How to use
display: home
image: ...
date: 2019-02-22
tags:

- vuepress
- vuepress-themt-ououe
  categories:
- blog

---

You need to use display to control where the current article is displayed

// posts -> test.md

---

## display: home

A list of home pages will displayed.

// posts -> test.md

---

## display: none

It will not be displayed.

However, you can still access it through the right path.

# Other

# Partitioning some function into vuepress-plugin-blog-multidir (opens new window)

You can change the default options.

// .vuepress -> config.js
module.exports = {
  theme: 'ououe',
  themeConfig: {
    // ...
  },
  plugins: {
    'blog-multidir': {
      //...
    }
  }
}

default options (opens new window)

# Change theme

+- blog
  +- .vuepress
    +- styles
      +- palette.styl
      +- index.styl

# palette.styl

If you wish to apply simple color overrides to the styling of the default preset (opens new window) or define some color variables for using later.

# index.styl

add styles

Theme Inheritance (opens new window)

# License

MIT (opens new window)

# Keywords

vue vuepress blog blog-theme vuepress-theme light-theme dark-theme