返回介绍

useHead

发布于 2024-04-18 00:42:19 字数 2707 浏览 0 评论 0 收藏 0

useHead 自定义 Nuxt 应用程序各个页面的头部属性。

useHead

useHead 可组合函数允许您以编程和反应的方式管理您的头部标签,由 Unhead 提供支持。 如果数据来自用户或其他不受信任的来源,我们建议您查看 useHeadSafe

相关阅读:getting-started > seo-meta

Type

ts
useHead(meta: MaybeComputedRef<MetaObject>): void

以下是 useHead 的非响应式类型。

ts
interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[]
  htmlAttrs?: HtmlAttributes
  bodyAttrs?: BodyAttributes
}

有关更详细的类型,请参阅 @unhead/schema

useHead 的属性可以是动态的,接受 refcomputedreactive 属性。 meta 参数还可以接受返回对象的函数,以使整个对象具有反应性。

参数

meta

Type: MetaObject

接受以下头部元数据的对象:

  • meta
    Type: Array<Record<string, any>>
    数组中的每个元素都映射到新创建的 <meta> 标签,其中对象属性映射到相应的属性。
  • link
    Type: Array<Record<string, any>>
    数组中的每个元素都映射到新创建的 <link> 标签,其中对象属性映射到相应的属性。
  • style
    Type: Array<Record<string, any>>
    数组中的每个元素都映射到新创建的 <style> 标签,其中对象属性映射到相应的属性。
  • script
    Type: Array<Record<string, any>>
    数组中的每个元素都映射到新创建的 <script> 标签,其中对象属性映射到相应的属性。
  • noscript
    Type: Array<Record<string, any>>
    数组中的每个元素都映射到新创建的 <noscript> 标签,其中对象属性映射到相应的属性。
  • titleTemplate
    Type: string | ((title: string) => string)
    配置动态模板以自定义单个页面上的页面标题。
  • title
    Type: string
    在单个页面上设置静态页面标题。
  • bodyAttrs
    Type: Record<string, any>
    设置 <body> 标签的属性。 每个对象属性都映射到相应的属性。
  • htmlAttrs
    Type: Record<string, any>
    设置 <html> 标签的属性。 每个对象属性都映射到相应的属性。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文