vuepress小课堂002

railsbug

于 2020-03-10 15:15:33 发布

阅读量232

点赞数

分类专栏： vuepress 文章标签： vuepress vue

本文链接：https://blog.youkuaiyun.com/railsbug/article/details/104774666

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的问题是：这个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 {
        l

最低0.47元/天解锁文章