Example Modern Vuepress Blog Theme

vuepress-theme-modern-blog

Modern blog theme for VuePress.

Features

• builtin comments support
• Sitemap generator support
• Comments support
• Auto meta tags
• Better SEO experience
• Social Sharing
• Google Analytics
• Smooth Scrolling
• Reading Time
• Reading Progress
• PWA Support

Install

yarn add vuepress-theme-modern-blog -D
# OR npm install vuepress-theme-modern-blog -D

Usage

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

Options

nav

• 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/',
      },
    ],
  },
}

footer

footer.contact

• 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:

• github
• facebook
• twitter
• instagram
• linkedin

::: tip Welcome contribution of adding more built-in contact type. :::

footer.copyright

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. It’s common to use it to add apply custom document classifiers. e.g.

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

Here is the default blog plugin options:

{
  directories: [
    {
      id: 'post',
      dirname: '_posts',
      path: '/',
      layout: 'IndexPost',
      itemLayout: 'Post',
      itemPermalink: '/:year/:month/:day/:slug',
      pagination: {
        perPagePosts: 5,
      },
    },
    {
      id: 'archive',
      dirname: '_archive',
      path: '/archive/',
      layout: 'IndexArchive',
      itemLayout: 'Post',
      itemPermalink: '/archive/:year/:month/:day/:slug',
      pagination: {
        perPagePosts: 5,
      },
    },
  ],
  frontmatters: [
    {
      id: "tag",
      keys: ['tag', 'tags'],
      path: '/tag/',
      layout: 'Tags',
      frontmatter: { title: 'Tags' },
      itemlayout: 'Tag',
      pagination: {
        perPagePosts: 5
      }
    },
  ]
}

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
}

about

to make this works you need to create a new page and add the proper config to themeConfig.nav then set the layout to AboutLayout in page frontmatter.

• Type: { fullName: string, bio: string, image: string }
• Default: undefined

heroImage

• Type: string
• Default: "https://source.unsplash.com/random"

disqus

• Type: string
• Default: undefined

Disqus website short name check official website

sitemap

• Type: boolean
• Default: false

to enable this plugin you need to define:

...
  sitemap: true,
  hostname: "https://ahmadmostafa.com/" // your own hostname
...

socialShare

• Type: boolean
• Default: false

to enable this plugin you need also to define:

socialShareNetworks

• Type: Array< string >
• Default: undefined

refer to docs

e.g

  socialShare: true,
  socialShareNetworks: ["twitter", "facebook"],

googleAnalytics

Google analytics tracking ID

• Type: string
• Default: undefined

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 published

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

author

Author name

---
author: Ahmad Mostafa
---

location

---
location: Jordan
---

description

Post summary

---
description: some description
---

title

title will be shown in the posts list

---
title: Front Matter in VuePress
---

image

header image for the post item

---
image: https://source.unsplash.com/random
---

Demo

Download

#vuepress #vue #blog #theme #vue-theme