L3F.WIN

Github及Hexo的使用

0%

VuePress开发经验总结

VuePress开发经验总结

this.$site 和 this.$page网站和页面的元数据

Layout 组件将会对每一个文档目录下的 .md 执行一次,同时,整个网站以及特定页面的元数据将分别暴露为 this.$site 和 this.$page 属性,它们将会被注入到每一个当前应用的组件中。

这是你现在看到的这个网站的 $site 的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"title": "VuePress",
"description": "Vue 驱动的静态网站生成器",
"base": "/",
"pages": [
{
"lastUpdated": 1524027677000,
"path": "/",
"title": "VuePress",
"frontmatter": {}
},
...
]
}

网站和页面的元数据
Layout 组件将会对每一个文档目录下的 .md 执行一次,同时,整个网站以及特定页面的元数据将分别暴露为 this.$site 和 this.$page 属性,它们将会被注入到每一个当前应用的组件中。
下面的这个对象是你正在看的这个页面的 $page 的值:

1
2
3
4
5
6
7
{
"lastUpdated": 1524847549000,
"path": "/custom-themes.html",
"title": "自定义主题",
"headers": [/* ... */],
"frontmatter": {}
}

——- 以上内容为从官网直接复制过来的内容 ——-

估计谁看了,都是一头雾水,说的是什么?怎么应用。下面才是我这篇帖子的真正内容
想要如何应用需要看懂下面的代码

环境
\components\PostList.vue
\xxx.md
xxx.md文件中引用此处的PostList.vue
实现分类页的效果。

1
2
3
4
5
6
7
#xxx.md
---
title: 旅游
pageClass: travel
categories: top
---
<PostList />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#PostList.vue
<h2 class="size40 strong mb20"><p>{{title}}</p></h2> <-- 下面的title()对应的是这个地方 -->
<div v-for="post in posts" class="content-box"> <-- 下面的posts()对应的是这个地方 -->
<div class="box-img">
<a v-bind:href="post.path"><img v-bind:src="'/images/' + post.frontmatter.topimg" /></a>
</div>
<div class="box-txt">
<div class="box-caption">
<h2 class="color-blue">{{post.title}}</h2>
<p>{{post.frontmatter.description}}</p>
</div>
</div>
</div>

*******

export default {
computed: {
posts() { //此处的posts对应的是上面的 posts
return this.$site.pages /
//表示travel目录下的所有post
//.filter(post => post.path.startsWith('/'))
.filter(post => post.frontmatter['categories'].startsWith('travel'))
//日期按照降序排列
.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
},

title(){ //此处的title对应的是上面的 title
var title = this.$page.title;
return title;
}
}
}

这样我们在页面上能显示出什么呢?
VuePress开发经验总结处显示的是 旅游
v-for="post in posts" 处对所有指定条件的文章进行显示

赶快试一试吧。