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
| --- 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
| <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"
处对所有指定条件的文章进行显示
赶快试一试吧。