@alterjs/saber-plugin-query-posts
v0.12.2
Published
Query posts plugin for Saber app
Downloads
10
Readme
@alterjs/saber-plugin-query-posts
Query posts and inject them to specific pages. Useful when you're writing a blog.
Install
yarn add @alterjs/saber-plugin-query-posts
Usage
In your saber-config.yml
:
plugins:
- resolve: '@alterjs/saber-plugin-query-posts'
Then this plugin will inject all posts to pages whose attribute injectAllPosts
is set to true
, for instance you can create a pages/index.md
:
---
layout: index
injectAllPosts: true
---
Welcome to my homepage.
Then in the layout component layouts/index.vue
, page.posts
and page.pagination
will be available:
<template>
<div>
<slot name="default" />
<ul>
<li v-for="post in page.posts" :key="post.permalink">
<a :href="post.permalink">
{{ post.title }}
</a>
</li>
</ul>
<a :href="page.pagination.prevLink" v-if="page.pagination.hasPrev">
← Prev Page
</a>
<a :href="page.pagination.nextLink" v-if="page.pagination.hasNext">
Next Page →
</a>
</div>
</template>
<script>
export default {
props: ['page'],
}
</script>
Draft Posts
Posts with front matter draft: true
will be excluded in page.posts
, but they will still be built and accessible via permalink.
Tags
This plugin will automatically generate tag pages at /tags/:tag
when you're using tags
in page data, e.g. in a Markdown post:
---
title: hello
date: 2019-01-01
tags:
- life
- random
---
hello
Data Injected in Post Pages
You can access the detailed info of the tags of a post page via this.page.tagsInfo
, for instance:
tags:
- life
- random
gives you:
;[
{
name: 'life',
permalink: '/tags/life',
},
{
name: 'random',
permalink: '/tags/random',
},
]
Tag Layout
Tag pages will use the tag
layout or fallback to default
layout.
You can access the tag name in the layout component via this.page.tag
.
Categories
This plugin will automatically generate category pages at /categories/:tag
when you're using categories
in page data, e.g. in a Markdown post:
---
title: hello
date: 2019-01-01
categories:
- sports
---
hello
Then there will be a /categories/sports
page,categories
is an array, so you can assign the post to multiple categories.
Data Injected in Post Pages
You can access the detailed info of the categories of a post page via this.page.categoriesInfo
, for instance:
categories:
- sports/football
- hobby
gives you:
;[
{
name: 'sports',
permalink: '/categories/sports',
},
{
name: 'football',
permalink: '/categories/sports/football',
},
{
name: 'hobby',
permalink: '/categories/hobby',
},
]
Nesting Category
It also support nesting categories:
categories:
- sports/football
In this way, it will generate two pages: /categories/sports
and /categories/sports/football
and both of them will include this post.
Category Layout
Category pages will use the category
layout or fallback to default
layout.
You can access the category name in the layout component via this.page.category
.
Pagination
By default we show at most 30 posts per page, but you can configure this globally using perPage
option in saber-config.yml
:
plugins:
- resolve: saber-plugin-query-posts
options:
perPage: 6
It's also possible to configure this behavior for each page separately, in a page like pages/index.md
:
---
injectAllPosts:
perPage: 20
---
Options
perPage
- Type:
number
- Default:
30
The limit of posts to show per page.
firstPageOnly
- Type:
boolean
- Default:
false
Only generate the first page of posts.
tagsMap
- Type:
{ [name: string]: string }
Map tag name to permalink's :tag
part, by default :tag
will be the tag name.
For example:
{
tagsMap: {
'c++': 'cpp'
}
}
categoriesMap
Same as tagsMap
but for categories.
permalinks
- Type:
{ category?: string, tag?: string }
- Default:
{ category: '/categories/:slug', tag: '/tags/:slug' }
The permalink templates for category and tag pages, available placeholders:
| placeholder | description | | ----------- | ------------------------------ | | slug | Slugified tag / category name. |
License
MIT.