标题和元数据

由于 Inertia 驱动的 JavaScript 应用程序是在文档 <body> 内渲染的，因此它们无法将标记渲染到文档 <head>，因为它超出了它们的范围。为了解决这个问题，Inertia 附带了一个 <Head> 组件，可用于设置页面 <title>、<meta> 标签和其他 <head> 元素。

<Head> 组件只会替换不在服务器端根模板中的 <head> 元素。
<Head> 组件在 Svelte 适配器中不可用，因为 Svelte 已经附带了自己的 <svelte:head> 组件。

Head 组件

要将 <head> 元素添加到页面，请使用 <Head> 组件。在此组件中，您可以包含要添加到文档 <head> 的元素。

import { Head } from '@inertiajs/vue3'

<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</Head>

标题简写

如果您只需要将 <title> 添加到文档 <head>，您只需将标题作为道具传递给 <Head> 组件。

import { Head } from '@inertiajs/vue3'

<Head title="Your page title" />

标题回调

您可以使用 createInertiaApp 设置方法中的 title 回调全局修改页面 <title>。通常，此方法是在应用程序的主 JavaScript 文件中调用的。title 回调的一个常见用例是在每个页面标题之前或之后自动添加应用程序名称。

createInertiaApp({
  title: title => `${title} - My App`,
  // ...
})

定义 title 回调后，当您使用 <Head> 组件设置标题时，回调将自动被调用。

import { Head } from '@inertiajs/vue3'

<Head title="Home">

在本例中，将生成以下 <title> 标签。

<title>Home - My App</title>

title 回调还将在您使用 <title> 标签在 <Head> 组件中设置标题时被调用。

import { Head } from '@inertiajs/vue3'

<Head>
  <title>Home</title>
</Head>

多个 Head 实例

可以在整个应用程序中拥有多个 <Head> 组件实例。例如，您的布局可以设置一些默认的 <Head> 元素，然后您的各个页面可以覆盖这些默认值。

// Layout.vue

import { Head } from '@inertiajs/vue3'

<Head>
  <title>My app</title>
  <meta head-key="description" name="description" content="This is the default description" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>

// About.vue

import { Head } from '@inertiajs/vue3'

<Head>
  <title>About - My app</title>
  <meta head-key="description" name="description" content="This is a page specific description" />
</Head>

Inertia 永远只会渲染一个 <title> 标签；但是，所有其他标签都将被堆叠，因为在 <head> 中拥有多个实例是有效的。为了避免在 <head> 中出现重复的标签，您可以使用 head-key 属性，它将确保标签只被渲染一次。这在上面的示例中针对 <meta name="description"> 标签进行了说明。

上面的代码示例将渲染以下 HTML。

<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <title>About - My app</title>
  <meta name="description" content="This is a page specific description" />
</head>

Head 扩展

在构建真实应用程序时，有时创建扩展 Inertia 的 <Head> 组件的自定义头部组件会很有帮助。这为您提供了一个设置应用程序范围默认值的地方，例如将应用程序名称追加到页面标题。

<!-- AppHead.vue -->

<script setup>
import { Head } from '@inertiajs/vue3'

defineProps({ title: String })
</script>

<template>
  <Head :title="title ? `${title} - My App` : 'My App'">
    <slot />
  </Head>
</template>

创建自定义组件后，您只需在页面中开始使用自定义组件即可。

import AppHead from './AppHead'

<AppHead title="About" />