【问题标题】:How to set lang attribute on html element with Nuxt?如何使用 Nuxt 在 html 元素上设置 lang 属性?
【发布时间】:2018-06-22 15:16:55
【问题描述】:

使用文件nuxt.config.js文件,head内容可以自定义添加一些元,或其他东西:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'awesome title',
    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' }
    ]
  },
  ...
}

但我在文档中找不到任何内容来设置html 元素的属性——我想设置lang 属性。有没有办法做到这一点?

【问题讨论】:

标签: javascript html vue.js nuxt.js vue-meta


【解决方案1】:

来源:Declaring language in HTML tag · Issue #388 · nuxt/nuxt.js

head 支持 htmlAttrs 属性。它将对象的每个 key:value 映射为 attribute:value

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en'
    },
    title: 'awesome title',
    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' }
    ]
  },
  ...
}

【讨论】:

  • 如果您使用不同的语言(区域设置)怎么办?
  • 这也适用于身体 bodyAttrs 和 Head headAttrs
猜你喜欢
  • 2021-06-27
  • 2020-08-02
  • 2016-05-13
  • 2016-03-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-02-04
相关资源
最近更新 更多