# @vuepress/theme-blog

Default blog theme for VuePress

# Install

yarn add @vuepress/theme-blog -D
# OR npm install @vuepress/theme-blog -D

# Usage

// .vuepress/config.js
module.exports = {
  theme: '@vuepress/blog',
  themeConfig: {
    // Please keep looking down to see the available options.
  }
}

# Options

  • Type: Array<{ text: string, link: string }>
  • Default: undefined

e.g.

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Home',
        link: '/',
      },
      {
        text: 'Archive',
        link: '/archive/',
      },
      {
        text: 'Tags',
        link: '/tag/',
      },
    ],
  },
}
  • Type: Array<{ type: ContactType, link: string }>
  • Default: undefined

Contact information, displayed on the left side of footer.

module.exports = {
  themeConfig: {
    footer: {
      contact: [
        {
          type: 'github',
          link: 'https://github.com/vuejs/vuepress',
        },
        {
          type: 'twitter',
          link: 'https://github.com/vuejs/vuepress',
        },
      ],
    },
  },
}

For now ContactType supports following enums:

  • facebook
  • github
  • gitlab
  • instagram
  • linkedin
  • mail
  • messenger
  • phone
  • twitter
  • web

TIP

Welcome contribution of adding more built-in contact type.

Copyright information, displayed on the right side of footer.

module.exports = {
  themeConfig: {
    footer: {
      copyright: [
        {
          text: 'Privacy Policy',
          link: 'https://policies.google.com/privacy?hl=en-US',
        },
        {
          text: 'MIT Licensed | Copyright © 2018-present Vue.js',
          link: '',
        },
      ],
    },
  },
}

# modifyBlogPluginOptions

A function used to modify the default blog plugin options of @vuepress/plugin-blog.

Here is the default blog plugin options:

{
  directories: [
    {
      id: 'post',
      dirname: '_posts',
      path: '/',
      // layout: 'IndexPost', defaults to `Layout.vue`
      itemLayout: 'Post',
      itemPermalink: '/:year/:month/:day/:slug',
      pagination: {
        lengthPerPage: 5,
      },
    },
  ],
  frontmatters: [
    {
      id: "tag",
      keys: ['tag', 'tags'],
      path: '/tag/',
      // layout: 'Tag',  defaults to `FrontmatterKey.vue`
      frontmatter: { title: 'Tag' },
      pagination: {
        lengthPerPage: 5
      }
    },
  ]
}

Adding apply custom document classifiers:

module.exports = {
  themeConfig: {
    modifyBlogPluginOptions(blogPluginOptions) {
      const writingDirectoryClassifier = {
        id: 'writing',
        dirname: '_writings',
        path: '/writings/',
        layout: 'IndexWriting',
        itemLayout: 'Writing',
        itemPermalink: '/writings/:year/:month/:day/:slug',
        pagination: {
          perPagePosts: 5,
        },
      }
      
      blogPluginOptions.directories.push(writingDirectoryClassifier)
      return blogPluginOptions
    },
  },
}

Enabling commenting and sitemap:

module.exports = {
  themeConfig: {
    modifyBlogPluginOptions(blogPluginOptions) {
      const sitemap = {
        hostname: 'https://yourdomain'
      }

      const comment = {
        service: 'disqus',
        shortname: 'disqus-shortname',
        // service: 'vssue',
        // owner: 'You',
        // repo: 'Your repo',
        // clientId: 'Your clientId',
        // clientSecret: 'Your clientSecret',
      }

      return { ...blogPluginOptions, sitemap, comment }
    },
  },
}

Since many features are powered by the plugin, we suggest you to read the documentation.

# summary

  • Type: boolean
  • Default: true

Whether to extract summary from source markdowns.

# summaryLength

  • Type: number
  • Default: 200

Set the length of summary.

# pwa

  • Type: boolean
  • Default: false

Whether to enable PWA support. this option is powered by the official PWA plugin.

if you enable this option, the default options of the internal PWA plugin is as follows:

{
  serviceWorker: true,
  updatePopup: true
}

# paginationComponent

  • Type: string
  • Default: Pagination

Custom the pagination component.

The default is the pagination component powerful by @vuepress/plugin-blog:

You can set this option to SimplePagination to enable another out-of-box simple pagination component:

You can also wirte a custom pagination component and register it as a global component. then pass its name to this option.

# Front Matter

# tag/tags

  • Type: string|string[]
  • Default: 200

e.g.

---
tags: 
  - JavaScript
  - DOM
---

# date

---
date: 2016-10-20 20:44:40
---

# author

---
author: ULIVZ
---

# location

---
location: Hangzhou
---

# summary

---
summary: Here's a quick post on what I found.
---