时间戳

首页 > 解决方案 > Setting meta description on blog post with nuxt and NetlifyCMS

javascript - Setting meta description on blog post with nuxt and NetlifyCMS

问题描述

I am using the net Nuxt boilterplate for NetlifyCMS and it all works good, but I have a hard time figuring out how to set meta description on a blog post.

My _blog.vue template has this

<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>

I can't figure out how to set the

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 }
      ]
    }
  }

It obviously doesn't work as blogPost is undefined inside the head function. But I'm unsure where to place it, so it blogPost.metadescription has a value.

标签： javascriptvue.jsnuxt.jsnetlifynetlify-cms

解决方案

这在 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
      }
    ]
  }
}

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

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

推荐阅读