vuepress小课堂002

最新推荐文章于 2022-09-23 16:03:40 发布

原创

最新推荐文章于 2022-09-23 16:03:40 发布 · 251 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vuepress #vue

本文通过分析 VuePress 的源码，探讨了 `feature` 属性的来源，并展示了如何使用 `front matter` 中的自定义字段。在 `Layout.vue` 文件中发现 `Home` 组件的引用，从中了解到 `front matter` 的默认属性可以通过 `this.$page.frontmatter` 访问。`$page` 是一个全局计算属性，提供按页面获取信息的能力。官方文档提供了全局计算属性的详细列表，激发了对 VuePress 默认主题模板更深入研究的兴趣。

我们的问题是：这个feature是怎么出来的？
带着疑问咱们开始看源码

.
├── @vuepress
│   ├── theme-default
│   │   ├── components
│  │    │   ├── Home.vue
│   │   ├── layouts
│   │    │   ├── Layout.vue

咱们从Layout.vue文件就可以知道这里面引用了component为Home的组件

查看Home组件

<div
      v-if="data.features && data.features.length"
      class="features"
    >
      <div
        v-for="(feature, index) in data.features"
        :key="index"
        class="feature"
      >
        <h2>{
  
  { feature.title }}</h2>
        <p>{
  
  { feature.details }}</p>
      </div>
    </div>

.......

import NavLink from '@theme/components/NavLink.vue'

export default {
  name: 'Home',

  components: { NavLink },

  computed: {
    data () {
      return this.$page.frontmatter
    },

    actionLink () {
      return {
        link: this.data.actionLink,
        text: this.data.actionText
      }
    }
  }
}