vuepress-theme-modern-blog
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
::: 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
---