vuepress-theme-modern-blog


A modern blog theme for VuePress.

  • Vuepress
  • JavaScript
  • Vue

vuepress-theme-modern-blog

NPM version NPM downloads

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

Sites

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

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

posts

posts.prepend

  • Type: String
  • Default: undefined

Prepend a chunk of text or HTML to the body of each post.

posts.append

  • Type: String
  • Default: undefined

Append a chunk of text or HTML to the body of each post.

module.exports = {
  themeConfig: {
    posts: {
      prepend: "Hi, I hope you'll <i>enjoy</i> this post!",
      append: "Hi, I hope you've <b>enjoyed</b> this post!",
    },
  },
}
  • 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
  • phone

::: 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. 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: {
          lengthPerPage: 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: {
        lengthPerPage: 5,
      },
    },
    {
      id: 'archive',
      dirname: '_archive',
      path: '/archive/',
      layout: 'IndexArchive',
      itemLayout: 'Post',
      itemPermalink: '/archive/:year/:month/:day/:slug',
      pagination: {
        lengthPerPage: 5,
      },
    },
  ],
  frontmatters: [
    {
      id: "tag",
      keys: ['tag', 'tags'],
      path: '/tag/',
      layout: 'Tags',
      frontmatter: { title: 'Tags' },
      itemlayout: 'Tag',
      pagination: {
        lengthPerPage: 5
      }
    },
  ]
}

Also see:

summary

  • Type: boolean or object
  • Default: true

Whether to extract summary from source markdowns. If this value is set to true, the summaryLenth will be used to slice the text. If, on the other hand, this value is set to an object, you'll be able to specify a more complex pattern for the extraction of the summary. Available options:

{
  /*
  Get as many paragraphs as the value of this property is set to. A paragraph
  is considered to be a chunk of text followed by a "\n\n", but you can use
  "paragraphsSeparator" in order to specify your own separator.

  Once the chunks of text are splitted (with "paragraphsSeparator"), the first N
  (as specified by the "paragraphs" property) chunks are obtained and joined
  using the "paragrahpsJoiner" text, which is "<br><br>" by default.
  */
  paragraphs: 0,
  paragraphsSeparator: "\n\n",
  paragrahpsJoiner: "<br><br>",

  /*
  If you want the summary to extend until a given text pattern is found, use
  this option. If the "stopSymbol" symbol is not found, the "summaryLength" will
  be used as a safe fallback.
  */
  stopSymbol: '',

  /*
  Use these two options to append and/or prepend any text you want to the
  summary.
  */
  prepend: ''
  append: '',
}

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.

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 and the preview image in the list of posts.

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

postcard_image

preview image for the post item in the list of posts. This property will override the "image" property.

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