vuepress-theme-modern-blog
A modern blog theme for VuePress.
- Vuepress
- JavaScript
- Vue
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/',
},
],
},
}
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!",
},
},
}
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
- phone
::: 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: {
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
orobject
- 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
---