标题和元数据 Title & meta

未匹配的标注

由于在文档 <body> 中呈现的是 JavaScript 应用程序,因此它们无法将标记呈现给文档 <head>,因为它超出了它们的范围。为了帮助实现这一点,Inertia 附带了一个 <Head> 组件,该组件可以用于设置页面中的<title><meta>标签和其它元素。

注意,Svelte 适配器中不提供 <Head> 组件,因为 Svelte 已经附带了一个 <svelte:head> 组件。

注意,<Head> 组件将只替换不在您服务器根模板中的 <head> 元素。

Head 组件

添加 <head> 元素到您的页面,使用<Head> 组件:

Vue3

import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

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

Title 简写

您还可以将页面标题作为一个 prop 传递给 <Head> 组件:

Vue3

import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

<Head title="Your page title" />

Title 回调

createInertiaApp 设置方法中使用 title 回调,您可以全局地修改页面 <title>。这方面有一个通用的案例是在每个页面标题之前或之后自动添加应用程序名称。

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

现在,当您使用 <Head> 组件设置标题时,这个函数将自动的被调用。

Vue3

import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

<Head title="Home">

在本例中,将产生以下 <title> 标签:

<title>Home - My App</title>

如果您在 <Head> 组件中使用 <title> 标签设置标题,这也有效:

Vue3

import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

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

多个实例

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

Vue3

// Layout.vue

import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

<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/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

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

Inertia 只会渲染一个 <title> 标签,但是所有其他的标签都将被堆叠,因为它们可能有多个实例。为避免 <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 my about page description" />
</head>

扩展

在实际应用中,创建一个使用 <Head> 组件的自定义头部组件会很有帮助。这为您提供了设置应用范围默认值的位置,例如将应用名称附加到页面标题。这是一个简单的示例,来说明这可能是什么样子。

Vue3

<!-- AppHead.vue -->

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

<script>
import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'

export default {
  components: {
    Head,
  },
  props: {
    title: String,
  },
}
</script>

然后在您的页面中使用此自定义组件:

Vue 2 / Vue 3

import AppHead from './AppHead'

<AppHead title="About" />

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/ti...

译文地址:https://learnku.com/docs/inertia/0.11/ti...

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~