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

Commit b249e86

Browse files
authored
feat: carding internal implementation (#8)
Breaking Changes: Rename 'pagination.perPagePosts' to 'pagination.lengthPerPage'
1 parent 7a28abf commit b249e86

18 files changed

+673
-324
lines changed

Diff for: docs/.vuepress/config.js

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ module.exports = {
33
description: 'Offical blog plugin for VuePress',
44
themeConfig: {
55
repo: 'ulivz/vuepress-plugin-blog',
6+
nav: [
7+
{ text: 'Config', link: '/config/' }
8+
]
69
}
710
}
811

Diff for: docs/README.md

+71-80
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ sidebar: auto
44

55
# @vuepress/plugin-blog
66

7-
> Official blog plugin for VuePress.
7+
> Official blog plugin for VuePress.
88
99
Note that this plugin has been deeply integrated into [@vuepress/theme-blog](https://github.com/ulivz/vuepress-theme-blog).
1010

@@ -19,7 +19,12 @@ yarn add -D @vuepress/plugin-blog
1919

2020
```javascript
2121
module.exports = {
22-
plugins: ['@vuepress/blog', { /* options */ }]
22+
plugins: [
23+
'@vuepress/blog',
24+
{
25+
/* options */
26+
},
27+
],
2328
// Please keep looking down to see the available options.
2429
}
2530
```
@@ -31,25 +36,22 @@ module.exports = {
3136
`Document classifier` is a set of functions that can classify pages with the same characteristics. For a blog developer, the same characteristics may exist between different pages as follows:
3237

3338
- Pages put in a directory (e.g. `_post`)
34-
- Pages containing the same specific frontmatter key value (e.g. `tag: js`).
39+
- Pages containing the same specific frontmatter key value (e.g. `tag: js`).
3540

36-
Of course, both of them may be related to another common
41+
Of course, both of them may be related to another common
3742
requirement, `pagination`.
3843

3944
So, how to combine them skillfully? Next, let's take a look at how this plugin solve these problems.
4045

41-
4246
### Directory Classifier
4347

4448
Directory Classifier, that classifies the source pages placed in a same directory.
4549

4650
Suppose you have the following files structure:
4751

48-
``` vue
49-
.
50-
└── _posts
51-
   ├── 2018-4-4-intro-to-vuepress.md
52-
   └── 2019-6-8-intro-to-vuepress-next.md
52+
```vue
53+
. └── _posts    ├── 2018-4-4-intro-to-vuepress.md    └──
54+
2019-6-8-intro-to-vuepress-next.md
5355
```
5456

5557
In the traditional VuePress site, the converted page URLs will be:
@@ -63,33 +65,36 @@ It doesn't seem blogging, so it's time to use this plugin:
6365
// .vuepress/config.js
6466
module.exports = {
6567
plugins: [
66-
['@vuepress/blog', {
67-
directories: [
68-
{
69-
// Unique ID of current classification
70-
id: 'post',
71-
// Target directory
72-
dirname: '_posts',
73-
// Path of the `entry page` (or `list page`)
74-
path: '/',
75-
},
76-
],
77-
}]
78-
]
68+
[
69+
'@vuepress/blog',
70+
{
71+
directories: [
72+
{
73+
// Unique ID of current classification
74+
id: 'post',
75+
// Target directory
76+
dirname: '_posts',
77+
// Path of the `entry page` (or `list page`)
78+
path: '/',
79+
},
80+
],
81+
},
82+
],
83+
],
7984
}
8085
```
8186

82-
Then the plugin will help you to generate following pages, and automatically leverage corresponding
87+
Then the plugin will help you to generate following pages, and automatically leverage corresponding
8388
layout:
8489

85-
| url | layout |
86-
|---|---|
87-
| `/` | `IndexPost` / `Layout` |
88-
| `/2018/04/04/intro-to-vuepress/` | `Post` |
89-
| `/2019/06/08/intro-to-vuepress-next/` | `Post` |
90+
| url | layout |
91+
| ------------------------------------- | ---------------------- |
92+
| `/` | `IndexPost` / `Layout` |
93+
| `/2018/04/04/intro-to-vuepress/` | `Post` |
94+
| `/2019/06/08/intro-to-vuepress-next/` | `Post` |
9095

9196
This means that you need to create two layout components(`IndexPost` and `Post`) to handle the layout of index and post
92-
pages.
97+
pages.
9398

9499
You can also custom the layout component name:
95100

@@ -134,7 +139,7 @@ module.exports = {
134139
```
135140

136141
::: warning
137-
It is noteworthy that the `path` and `itemPermalink` must be uniformly modified, and `itemPermalink` must be prefixed with
142+
It is noteworthy that the `path` and `itemPermalink` must be uniformly modified, and `itemPermalink` must be prefixed with
138143
`path`.
139144

140145
The default value of `itemPermalink` is `'/:year/:month/:day/:slug'`.
@@ -143,8 +148,8 @@ The default value of `itemPermalink` is `'/:year/:month/:day/:slug'`.
143148
### Pagination
144149

145150
As your blog articles grew more and more, you began to have the need for paging. By default, this plugin integrates a
146-
very powerful pagination system that allows you to access paging functions with simple configuration.
147-
151+
very powerful pagination system that allows you to access paging functions with simple configuration.
152+
148153
By default, the plugin assumes that the max number of pages per page is `10`. you can also modify it like this:
149154

150155
```diff
@@ -175,23 +180,23 @@ Suppose you have 3 pages at `_posts` direcotry:
175180

176181
When the `perPagePosts` is set to `2`, this plugin will help you generate the following pages:
177182

178-
| url | layout |
179-
|---|---|
180-
| `/` | `IndexPost` / `Layout` |
183+
| url | layout |
184+
| ---------------- | -------------------------------- |
185+
| `/` | `IndexPost` / `Layout` |
181186
| `/page/2/` (New) | `DirectoryPagination` / `Layout` |
182-
| `/2019/06/08/a/` | `Post` |
183-
| `/2019/06/08/b/` | `Post` |
184-
| `/2018/06/08/c/` | `Post` |
187+
| `/2019/06/08/a/` | `Post` |
188+
| `/2019/06/08/b/` | `Post` |
189+
| `/2018/06/08/c/` | `Post` |
185190

186-
::: tip
191+
::: tip
187192
`DirectoryPagination / Layout` means that the layout component will be downgraded to `Layout` when `DirectoryPagination` layout doesn't exist.
188-
:::
193+
:::
189194

190195
So how to get the matched pages in the layout component? In fact, it will be much simpler than you think.
191196

192197
If you visit `/`, current page leverages layout `IndexPost`. In this layout component, you just need to use
193198
`this.$pagination.pages` to get the matched pages. In the above example, the actual value of `this.$pagination.pages` will
194-
be:
199+
be:
195200

196201
```json
197202
[
@@ -211,13 +216,11 @@ If you visit `/`, current page leverages layout `DirectoryPagination`, you can a
211216

212217
Isn't this very natural experience? You just need to care about the style of your layout component, not the complicated and boring logic behind it.
213218

214-
215219
::: tip
216220
To save the length of docs, we omitted the data structure of the `$page` object. You can get more information about
217221
the data structure of `$page` at the [official documentation](https://v1.vuepress.vuejs.org/guide/global-computed.html#page).
218222
:::
219223

220-
221224
### Frontmatter Classifier
222225

223226
Frontmatter Classifier, which classifies pages that have the same frontmatter key values.
@@ -253,32 +256,35 @@ If you want to easily classify them, you can config like this:
253256
```js
254257
module.exports = {
255258
plugins: [
256-
['@vuepress/blog', {
257-
frontmatters: [
258-
{
259-
// Unique ID of current classification
260-
id: "tag",
261-
// Decide that the frontmatter keys will be grouped under this classification
262-
keys: ['tag'],
263-
// Path of the `entry page` (or `list page`)
264-
path: '/tag/',
265-
// Layout of the `entry page`
266-
layout: 'Tag',
267-
},
268-
]
269-
}]
270-
]
259+
[
260+
'@vuepress/blog',
261+
{
262+
frontmatters: [
263+
{
264+
// Unique ID of current classification
265+
id: 'tag',
266+
// Decide that the frontmatter keys will be grouped under this classification
267+
keys: ['tag'],
268+
// Path of the `entry page` (or `list page`)
269+
path: '/tag/',
270+
// Layout of the `entry page`
271+
layout: 'Tag',
272+
},
273+
],
274+
},
275+
],
276+
],
271277
}
272278
```
273279

274280
Then the plugin will help you to generate the following extra pages, and automatically leverage
275281
the corresponding layout:
276282

277-
| url | layout |
278-
|---|---|
279-
| `/tag/` | `Tag` |
283+
| url | layout |
284+
| ----------- | ---------------------------------- |
285+
| `/tag/` | `Tag` |
280286
| `/tag/vue/` | `FrontmatterPagination` / `Layout` |
281-
| `/tag/js/` | `FrontmatterPagination` / `Layout` |
287+
| `/tag/js/` | `FrontmatterPagination` / `Layout` |
282288

283289
In the `Tags` component, you can use `this.$tag.list` to get the tag list. The value would be like:
284290

@@ -302,9 +308,9 @@ In the `Tags` component, you can use `this.$tag.list` to get the tag list. The v
302308
]
303309
```
304310

305-
In the `FrontmatterPagination` component, you can use `this.$pagination.pages` to get the matched pages in current tag
311+
In the `FrontmatterPagination` component, you can use `this.$pagination.pages` to get the matched pages in current tag
306312
classification:
307-
313+
308314
- If you visit `/tag/vue/`, the `this.$pagination.pages` will be:
309315

310316
```json
@@ -322,7 +328,6 @@ classification:
322328
]
323329
```
324330

325-
326331
## Examples
327332

328333
Actually, there are only 2 necessary layout components to create a blog theme:
@@ -332,17 +337,3 @@ Actually, there are only 2 necessary layout components to create a blog theme:
332337
- Tag (Only required when you set up a `tag` frontmatter classification.)
333338

334339
Here is [live example](https://github.com/ulivz/70-lines-of-vuepress-blog-theme) that implements a functionally qualified VuePress theme in around 70 lines.
335-
336-
## Options
337-
338-
### directories
339-
340-
> TODO, contribution welcome.
341-
342-
### frontmatters
343-
344-
> TODO, contribution welcome.
345-
346-
347-
348-

Diff for: docs/config/README.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
sidebar: auto
3+
---
4+
5+
# Config
6+
7+
## directories
8+
9+
- Type: `DirectoryClassifier[]`
10+
- Default: `[]`
11+
12+
Create one or more [directory classifiers](../README.md#directory-classifier), all available options in
13+
`DirectoryClassifier` are as
14+
follows.
15+
16+
### id
17+
18+
- Type: `string`
19+
- Default: `undefined`
20+
- Required: `true`
21+
22+
Unique id for current classifier, e.g. `post`.
23+
24+
### dirname
25+
26+
- Type: `string`
27+
- Default: `undefined`
28+
- Required: `true`
29+
30+
Matched directory name, e.g. `_post`.
31+
32+
### path
33+
34+
- Type: `string`
35+
- Default: `/${id}/`
36+
- Required: `false`
37+
38+
Entry page for current classifier, e.g. `/` or `/post/`.
39+
40+
If you set `DirectoryClassifier.path` to `/`, it means that you want to access the matched pages list at `/`. set
41+
to `/post/` is the same.
42+
43+
### layout
44+
45+
- Type: `string`
46+
- Default: `'IndexPost' || 'Layout'`
47+
- Required: `false`
48+
49+
Layout component name for entry page.
50+
51+
### frontmatter
52+
53+
- Type: `Record<string, any>`
54+
- Default: `{}`
55+
- Required: `false`
56+
57+
[Frontmatter](https://v1.vuepress.vuejs.org/guide/frontmatter.html) for entry page.
58+
59+
### itemLayout
60+
61+
- Type: `string`
62+
- Default: `'Post'`
63+
- Required: `false`
64+
65+
Layout for matched pages.
66+
67+
### itemPermalink
68+
69+
- Type: `string`
70+
- Default: `'/:year/:month/:day/:slug'`
71+
- Required: `false`
72+
73+
Permalink for matched pages.
74+
75+
For example, if you set up a directory classifier with dirname equals to `_post`, and have following pages:
76+
77+
```
78+
.
79+
└── _posts
80+
├── 2018-4-4-intro-to-vuepress.md
81+
└── 2019-6-8-intro-to-vuepress-next.md
82+
```
83+
84+
With the default `itemPermalink`, you'll get following output paths:
85+
86+
```
87+
/2018/04/04/intro-to-vuepress/
88+
/2019/06/08/intro-to-vuepress-next/
89+
```
90+
91+
For more details about permalinks, please head to [Permalinks](https://v1.vuepress.vuejs.org/guide/permalinks.html) section at VuePress's documentation.
92+
93+
### pagination
94+
95+
- Type: `Pagination`
96+
- Default: `{ perPagePosts: 10 }`
97+
- Required: `false`
98+
99+
All available options of pagination are as follows:
100+
101+
- pagination.perPagePosts: Maximum number of posts per page.
102+
- pagination.pagesSorter: Maximum number of posts per page.
103+
104+
## frontmatters
105+
106+
> TODO, contribution welcome.

0 commit comments

Comments
 (0)