SABER--09 Manipulating ＜head＞

最新推荐文章于 2024-07-08 10:04:44 发布

悬臂梁断了

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量40

点赞数

文章标签： vue.js javascript 前端

原文链接：https://saber.egoist.dev/docs/manipulating-head.html

版权

我们使用vue-meta为 <html> ，<head> 和 <body> 操作 <head> 元素和属性。
给每个组件自定义 <head>
在你的组件中使用 head选项：

export default {
  head: {
    title: 'Document title',
    meta: [
      {
        name: 'description',
        content: 'Page description'
      }
    ]
  }
}

head选项也可是一个函数，例如，在布局组件中：

export default {
  props: ['page'],

  head() {
    return {
      title: `${this.page.title} - ${this.$siteConfig.title}`
    }
  }
}

你可以使用 this 接入组件实例。

Set default values

在 saber-browser.js，你可以使用setHead 来设置 head 选项给root的Vue实例。例如，你可以使用它加载你想应用在每个页面的 Google 字体。

export default ({ setHead }) => {
  setHead({
    link: [
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap'
      }
    ]
  })
}

Troubleshooting

Duplicated tags

通过默认的Saber设置一些 head 标签如果确定配置都在配置文件中，例如，当 siteConfig.description 已被设置在你的配置文件中时，我们设置 <meta name=“description” content=“…”> 。
使用hid选项来覆写默认标签：

export default {
  head: {
    meta: [
      {
        name: 'description',
        content: '...my description'.
        // ⬇️ Here 
        hid: 'description'
      }
    ]
  }
}