使用 nuxt 和 NetlifyCMS 在博客文章中设置元描述答案

【问题标题】：Setting meta description on blog post with nuxt and NetlifyCMS使用 nuxt 和 NetlifyCMS 在博客文章中设置元描述
【发布时间】：2020-02-01 06:20:07
【问题描述】：

我正在为 NetlifyCMS 使用 net Nuxt 样板，一切都很好，但我很难弄清楚如何在博客文章中设置元描述。

我的 _blog.vue 模板有这个

<template>
  <article>
    <h1>{{ blogPost.title }}</h1>
    <div v-html="$md.render(blogPost.body)" />
  </article>
</template>
<script>
export default {
  async asyncData({ params, payload }) {
    if (payload) {
      this.blogPost = payload
      return {
        blogPost: payload
      }
    } else {
      return {
        blogPost: await require(`~/assets/content/blog/${params.blog}.json`)
      }
    }
  }
}
</script>

不知道怎么设置

head () {
    return {
      title: blogPost.metatitle,
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        { hid: 'description', name: 'description', content: blogPost.metadescription }
      ]
    }
  }

显然它不起作用，因为在 head 函数中未定义 blogPost。但我不确定该放在哪里，所以 blogPost.metadescription 有一个值。

【问题讨论】：

标签： javascript vue.js nuxt.js netlify netlify-cms

【解决方案1】：

这在 Nuxt/Netlify CMS 项目中对我有用 - 请注意，我将 Nuxt 与 nuxt/content 结合使用

async asyncData({ $content, params, error }) {
  const project = await $content('projects', params.slug).fetch()
  return {
    project
  }
},
head() {
  return {
    title: this.project.title,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: this.project.description
      }
    ]
  }
}

我正在从标准目录中的 markdown 文件中提取所有页面内容结构：content/projects

起初，我遵循与您所做的类似的结构 - 我将 this 添加到路径中，它就位，从那里我可以使用任何相关的属性。

【讨论】：