javascript - 如何自定义nuxt默认的html模板

Question

我尝试从 Nuxt 应用程序自定义默认页面，但文档很差:

https://nuxtjs.org/guide/views#document

例如，如果我只想获得标题怎么办？或者只有头部的链接？

{{ HEAD.links }}

还是只有元数据？

{{ HEAD.meta }}

我不知道语法，这是 Handlebars 还是类似的东西？

谢谢!

Answer 1

如果查看源代码，您只能找到 4 个自定义元:

• HTML_ATTRS
• BODY_ATTRS
• 负责人
• BODY_SCRIPTS

参见 https://github.com/nuxt/nuxt.js/blob/ef7a42649dcee7e65886b2db1a329deecd93aff2/lib/core/meta.js#L40-L45

---

HEAD 元数据不是对象，而是字符串连接:

// Get vue-meta context
const m = await this.getMeta(url)

...

// HEAD tags
meta.HEAD =
  m.meta.text() +
  m.title.text() +
  m.link.text() +
  m.style.text() +
  m.script.text() +
  m.noscript.text()

所以你不能得到{{ HEAD.links }}

---

但是，从您的 nuxt.config.js 文件中，您可以覆盖所有 HEAD 数据。

例如。如果您只想保留 title:

替换:

head: {
  title: 'starter',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: 'Nuxt.js project' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
}

通过:

head: {
  title: 'starter'
},