Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Commit

Permalink
feat: spread out blog plugin options to theme options (close #34) (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
@billyyyyy3320
billyyyyy3320 committed Jan 13, 2020
1 parent dd6bb0d commit d6bfae3
Show file tree
Hide file tree
Showing 8 changed files with 1,721 additions and 71 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ module.exports = {
root: true,

env: {
"node": true
"node": true,
"jest": true
},

extends: [
Expand Down
179 changes: 161 additions & 18 deletions docs/config/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ prev: /
## dateFormat

- Type: `string`
- Default: 'ddd MMM DD YYYY'
- Default: `'ddd MMM DD YYYY'`

The [date](./front-matter.md#date) will be displayed in the layout with this format.
You can find all available formats [here](https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#displaying)
Expand Down Expand Up @@ -119,9 +119,160 @@ module.exports = {
}
```

## modifyBlogPluginOptions
## directories

A function used to modify the default blog plugin options of [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com/).
- Type: `DirectoryClassifier[]`
- Default: `See below`

```JavaScript
[
{
id: 'post',
dirname: '_posts',
path: '/',
},
]
```

By default, pages are placed in `_post`, and the path for post list is `/`. Here's an example if you wish to customize it:

```JavaScript
[
{
id: 'writing', // Unique id for current classifier
dirname: '_writings', // Matched directory name
path: '/writings/', // Entry page for current classifier
title: '隨筆' // Entry and pagination page titles for current classifier.
layout: 'IndexWriting', // Layout component name for entry page.
frontmatter:{ //Front matter for entry page.
tag: 'vuepress'
}
itemLayout: 'Writing', // Layout for matched pages.
itemPermalink: '/writings/:year/:month/:day/:slug', // Permalink for matched pages.
pagination: { // Pagination behavior
lengthPerPage: 2,
},
}
]
```

Reference:
- [document classifiers](https://vuepress-plugin-blog.ulivz.com/guide/getting-started.html#document-classifier)

## frontmatters

- Type: `FrontmatterClassifier[]`
- Default: `See below`

```JavaScript
[
{
id: 'tag',
keys: ['tag', 'tags'],
path: '/tag/',
},
]
```

Only `tag` and `tags` in front matter will be classified, and the path for it is `'/tag/'` by default. Let's see how to customize it:

```JavaScript
[
{
id: 'location', // Unique id for current classifier
keys: ['location'], // Frontmatter keys used to classify pages
path: '/location/', // Entry page for current classifier
title: '地點', // Entry, scope and pagination page titles for current classifier.
layout: 'IndexLocation', // Layout component name for entry page.
scopeLayout: 'ScopeLocation', // Layout component name for scope page.
frontmatter: { //Front matter for entry page.
description: 'Hello'
},
pagination: { // Pagination behavior
lengthPerPage: 2,
},
},
]
```
Reference:
- [Frontmatter Classifier](https://vuepress-plugin-blog.ulivz.com/guide/getting-started.html#frontmatter-classifier)
## globalPagination

- Type: `object`
- Default: `{ lengthPerPage: 5 }`

Pagination config for all directories and frontmatters. For example:

```JavaScript
{
prevText:'下一頁', // Text for previous links.
nextText:'上一頁', // Text for next links.
lengthPerPage:'2', // Maximum number of posts per page.
layout:'Pagination', // Layout for pagination page
}
```

For more information, please visit [Pagination Config](https://vuepress-plugin-blog.ulivz.com/pagination/#sorter).
## sitemap

- Type: `object`
- Default: `undefined`

You can simply enable it by filling out `hostname` property with your host name:

```JavaScript
{
hostname: 'https://yourdomain'
}
```

Please head [vuepress-plugin-sitemap](https://github.com/ekoeryanto/vuepress-plugin-sitemap#options) for more details.

## comment

- Type: `object`
- Default: `undefined`

Vssue and Disqus are our built-in comment services. Here's the required properties to enable:

```JavaScript
// Disqus
{
service: "disqus",
shortname: "Your blog's shortname",
}

// Vssue
{
service: 'vssue',
owner: 'You',
repo: 'Your repo',
clientId: 'Your clientId',
clientSecret: 'Your clientSecret',
}
```
Further configuration, please visit:
- [vuepress-plugin-disqus-comment](https://vuepress-plugin-disqus.netlify.com/#usage)
- [vuepress-plugin-vssue](https://vssue.js.org/guide/vuepress.html#usage)

## newsletter

- Type: `object`
- Default: `undefined`

Mailchimp is our default newsletter service. The only required property to enable newsletter is `endpoint`:

```JavaScript
{
endpoint: 'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138'
}
```

Please head [vuepress-plugin-mailchimp](https://vuepress-plugin-mailchimp.billyyyyy3320.com/#config) to see how to get your `endpoint`.

## modifyBlogPluginOptions <Badge text="Not recommended" type="warning"/>

A function used to modify the blog plugin options of [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com/). It'll override not only default options but also the six options above (`directories`, `frontmatters`, `globalPagination`, `sitemap`, `comment`, `newsletter`).

Here's the default blog plugin options:

Expand All @@ -132,26 +283,18 @@ Here's the default blog plugin options:
id: 'post',
dirname: '_posts',
path: '/',
// layout: 'IndexPost', defaults to `Layout.vue`
itemLayout: 'Post',
itemPermalink: '/:year/:month/:day/:slug',
pagination: {
lengthPerPage: 5,
},
},
],
frontmatters: [
{
id: "tag",
id: 'tag',
keys: ['tag', 'tags'],
path: '/tag/',
// layout: 'Tag', defaults to `FrontmatterKey.vue`
frontmatter: { title: 'Tag' },
pagination: {
lengthPerPage: 5
}
},
]
],
globalPagination: {
lengthPerPage: 5,
},
}
```

Expand All @@ -170,7 +313,7 @@ module.exports = {
itemLayout: 'Writing',
itemPermalink: '/writings/:year/:month/:day/:slug',
pagination: {
perPagePosts: 5,
lengthPerPage: 5,
},
}

Expand Down Expand Up @@ -250,7 +393,7 @@ plugin is as follows:
## paginationComponent

- Type: `string`
- Default: `Pagination`
- Default: `'Pagination'`

Custom the pagination component.

Expand Down
110 changes: 86 additions & 24 deletions example/.vuepress/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ module.exports = {
/**
* Ref: https://vuepress-theme-blog.ulivz.com/#dateFormat
*/
dateFormat: 'YYYY-MM-DD',

// dateFormat: 'YYYY-MM-DD',

/**
* Ref: https://vuepress-theme-blog.ulivz.com/#nav
*/
Expand All @@ -21,8 +23,8 @@ module.exports = {
// link: '/tag/',
// },
// {
// text: 'About',
// link: '/about/',
// text: 'Location',
// link: '/location/',
// },
// ],

Expand Down Expand Up @@ -88,29 +90,89 @@ module.exports = {
],
},
/**
* Ref: https://vuepress-theme-blog.ulivz.com/#modifyblogpluginoptions
* Ref: https://vuepress-theme-blog.ulivz.com/#directories
*/

// directories:[
// {
// id: 'post',
// dirname: '_posts',
// path: '/',
// itemPermalink: '/:year/:month/:day/:slug',
// },
// {
// id: 'writing',
// dirname: '_writings',
// path: '/',
// itemPermalink: '/:year/:month/:day/:slug',
// },
// ],

/**
* Ref: https://vuepress-theme-blog.ulivz.com/#frontmatters
*/

// frontmatters: [
// {
// id: "tag",
// keys: ['tag', 'tags'],
// path: '/tag/',
// },
// {
// id: "location",
// keys: ['location'],
// path: '/location/',
// },
// ],

/**
* Ref: https://vuepress-theme-blog.ulivz.com/#globalPagination
*/

// globalPagination: {
// lengthPerPage: 10,
// },

/**
* Ref: https://vuepress-theme-blog.ulivz.com/#sitemap
*/
modifyBlogPluginOptions (blogPluginOptions) {
const sitemap = {
hostname: 'https://yourdomain'
}

const comment = {
service: 'disqus',
shortname: 'vuepress-plugin-blog',
// service: 'vssue',
// owner: 'You',
// repo: 'Your repo',
// clientId: 'Your clientId',
// clientSecret: 'Your clientSecret',
}

const newsletter = {
endpoint:'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&amp;id=bd18d40138'
}

return { ...blogPluginOptions, sitemap, comment, newsletter }
sitemap: {
hostname: 'https://yourdomain'
},
/**
* Ref: https://vuepress-theme-blog.ulivz.com/#comment
*/
comment: {
service: 'disqus',
shortname: 'vuepress-plugin-blog',
},
/**
* Ref: https://vuepress-theme-blog.ulivz.com/#newsletter
*/
newsletter: {
endpoint: 'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&amp;id=bd18d40138'
}
/**
* Ref: https://vuepress-theme-blog.ulivz.com/#modifyblogpluginoptions
*/

// modifyBlogPluginOptions (blogPluginOptions) {
// const sitemap = {
// hostname: 'https://yourdomain'
// }

// const comment = {
// service: 'disqus',
// shortname: 'vuepress-plugin-blog',
// }

// const newsletter = {
// endpoint:'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&amp;id=bd18d40138'
// }

// return { ...blogPluginOptions, sitemap, comment, newsletter }
// },

/**
* Ref: https://vuepress-theme-blog.ulivz.com/#summary
*/
Expand Down
Loading

0 comments on commit d6bfae3

Please sign in to comment.