如何从 Nuxt 3 脚本访问 Markdown Front Matter 属性

Question

比方说，我构建了一个文档驱动的 Nuxt Content 项目。有一个 Markdown 内容文件

/content/about.md

，其中包含以下内容：

---
title: About Me
status: complete
layout: page
---
## This is a heading

在

/layouts/page.vue

文件中，我有以下代码来呈现内容：

<template>
 <div>
  <h1>{{ page.status }}</h1> <!-- it works -->
  <slot />
 </div>
</template>

<script setup>
const { page } = useContent();

console.log(page.status); // but this doesn't work, shows 'page' as "undefined"
</script>

如代码中所述，我无法从

status

部分访问 frontmatter 属性

script setup

，但可以在模板内部访问

<h1>{{ page.status }}</h1>

。

我怎样才能访问这个？我究竟做错了什么？谢谢。

Answer 1

我认为你应该在

.value

上添加

page

。

<script setup lang="ts">
const { page } = useContent()
console.log(page.value.status)
</script>