Skip to content
🤩Modern blog theme for VuePress.
Vue CSS JavaScript
Branch: master
Clone or download
Latest commit 24c8a8d Jan 5, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Update main.yml Nov 2, 2019
assets add missing readme assets Dec 26, 2019
components small UI fixes Jan 5, 2020
example update projects method Jan 5, 2020
global-components update theme Dec 8, 2019
layouts small UI fixes Jan 5, 2020
styles update projects method Jan 5, 2020
.editorconfig feat: init Jun 3, 2019
.gitattributes feat: init Jun 3, 2019
.gitignore chore: remove dist files Jun 5, 2019
CHANGELOG.md small UI fixes Jan 5, 2020
LICENSE Update LICENSE Dec 19, 2019
README.md
enhanceApp.js design refactor Oct 25, 2019
index.js
package.json v2.4.0 Jan 5, 2020
yarn.lock remove docs&update readme Dec 26, 2019

README.md

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

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
      }
    },
  ]
}

Also see:

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
---
You can’t perform that action at this time.