Laravel 新闻：欢迎使用 Inertia 头部组件

随着最新的 Inertia.js 版本发布，一个名为“Inertia head”的新组件出现了。这个新组件允许你在 HTML 的 <head> 标签中更新 <title> 和 <meta> 标签。在该组件出现之前，尝试更改页面的 <title> 虽然并非不可能，但并不容易。不仅可以在页面组件中轻松完成此操作，还可以利用传递给页面的任何 props。

想象一下能够动态设置你的 Open Graph 标签，或者在用户阅读文章时更新页面的标题，甚至更改网站图标；所有这一切都是可能的。

为了演示这个新功能，让我们开始使用我最喜欢的 Laravel 启动套件 Laravel Breeze.

首先创建一个新的 Laravel 应用程序。

laravel new inertia-head-demo

运行完成后，进入你的新项目并运行

composer require laravel/breeze --dev

接着运行

PHP artisan breeze:install vue

运行完成后，你应该看到 package.json 的 devDependencies 已经更新，看起来像这样。

"devDependencies": {
       "@inertiajs/inertia": "^0.8.4",
       "@inertiajs/inertia-vue3": "^0.3.5",
       "@inertiajs/progress": "^0.2.4",
       "@tailwindcss/forms": "^0.2.1",
       "@vue/compiler-sfc": "^3.0.5",
       "autoprefixer": "^10.2.4",
       "axios": "^0.21",
       "laravel-mix": "^6.0.6",
       "lodash": "^4.17.19",
       "postcss": "^8.2.13",
       "postcss-import": "^14.0.1",
       "tailwindcss": "^2.1.2",
       "vue": "^3.0.5",
       "vue-loader": "^16.1.2"
   }

为了利用这个 <inertia-head>，我们需要将 @inertiajs/inertia、@inertiajs/inertia-vue3 的版本提升。同时，我们也可以将 @inertiajs/progress 更新到最新版本，但这不是必需的。

"devDependencies": {
   "@inertiajs/inertia": "^0.9.1",
   "@inertiajs/inertia-vue3": "^0.4.2",
   "@inertiajs/progress": "^0.2.5", // optional
   ...
 }

接下来，让我们安装 JavaScript 依赖项，并构建我们的资源并监视更改。

npm install && npm run watch

接下来，我们想要编辑我们的应用程序布局，并添加 <inertia-head> 标签。我们在此处设置的内容将是可以在页面级别覆盖的“默认值”。

在 Breeze 中，有两个布局组件，Guest.vue 位于 resources/js/Layouts/Guest.vue，Authenticated.vue 位于 resources/js/Layouts/Authenticated.vue。Guest.vue 布局被所有身份验证视图使用，Authenticated.vue 在用户经过身份验证后查看其仪表盘时使用。在本例中，我们将重点关注身份验证屏幕和 Guest.vue 布局；在 Guest.vue 布局的 <template> 标签内的任何位置添加以下内容。

<inertia-head title="Inertia Head Demo" />

我本地使用的是 Laravel Valet，所以如果我去访问 http://inertia-head-demo.test/login，我应该期望看到该页面的标题为“Inertia Head Demo”，但访问 /login 检查时，标题将显示“Laravel”或你 .env 设置中 APP_NAME 的值。这样做的原因是页面上应该只有一个 <title> 标签，如果有多个，则页面上出现的第一个标签将具有优先权。如果你检查 app.blade.php 文件，你会在第 8 行看到以下内容

<title>{{ config('app.name', 'Laravel') }}</title>

如果你删除上述代码并刷新页面，我们应该会看到在布局中设置的标题。

不错吧？好，让我们继续下一步。打开 Login.vue，添加 <inertia-head> 标签来覆盖我们在 Guest.vue 中设置的默认值。

<inertia-head title="Inertia Head Demo - Login" />

现在，当你访问 /login 时，你会在浏览器标签中看到 Inertia Head Demo - Login 作为标题。

Open Graph 元标签

Facebook 和 Twitter 都允许你自定义 URL 预览的外观。你可以阅读有关 Facebook 的 OG 标签的更多信息这里和 Twitter 卡这里.

让我们首先更新添加到 Guest.vue 的默认 <inertia-head> 组件，添加以下内容。

<inertia-head>
    <title>Inertia Head Demo</title>
    <meta type="description" content="Inertia Head Demo." />
    <meta name="twitter:title" content="Inertia Head Demo" />
    <meta name="twitter:site" content="@ninjaparade" />
    <meta name="twitter:creator" content="@ninjaparade" />
    <meta name="twitter:description" content="Inertia Head Demo." />
    <meta name="twitter:card" content="summary_large_image" />
 
    <meta property="og:url" content="http://inertia-head-demo.test" />
    <meta property="og:title" content="Inertia Head Demo" />
    <meta property="og:description" content="Inertia Head Demo" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" />
</inertia-head>

现在访问 /login，你应该会看到这样。

<head>
  <title inertia="">Inertia Head Demo </title>
  <meta type="description" content="Inertia Head Demo." inertia="" />
  <meta property="og:url" content="http://inertia-head-demo.test" inertia="" />
  <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" inertia="" />
  <meta name="twitter:title" content="Inertia Head Demo." inertia="" />
  <meta name="twitter:site" content="@ninjaparade" inertia="" />
  <meta name="twitter:creator" content="@ninjaparade" inertia="" />
  <meta name="twitter:description" content="Inertia Head Demo." inertia="" />
  <meta name="twitter:card" content="summary_large_image" inertia="" />
  <meta property="og:title" content="Inertia Head Demo." inertia="" />
  <meta property="og:description" content="Inertia Head Demo." inertia="" />
  <meta property="og:type" content="website" inertia="" />
</head>

你可以看到 OG 元标签，后面跟着标题。这里使用默认值，因为我们在 Login.vue 页面上的 <inertia-head> 中设置了标题，所以我们看到 Inertia 删除了默认标题，并使用了我们页面组件中的标题。

现在让我们尝试在 Login.vue 组件中设置 OG 标签。我将添加以下内容。

<inertia-head>
    <title>Inertia Head Demo - Login</title>
    <meta type="description" content="Inertia Head Demo - Login page." />
    <meta name="twitter:title" content="Inertia Head Demo - Login page." />
    <meta name="twitter:site" content="@ninjaparade" />
    <meta name="twitter:creator" content="@ninjaparade" />
    <meta name="twitter:description" content="Inertia Head Demo - Login page." />
    <meta name="twitter:card" content="summary_large_image" />
 
    <meta property="og:url" content="http://inertia-head-demo.test/login" />
    <meta property="og:title" content="Inertia Head Demo - Login page." />
    <meta property="og:description" content="Inertia Head Demo - Login page." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" />
</inertia-head>

现在刷新并访问 /login... 发生了什么？！

<head>
  ...
  <meta type="description" content="Inertia Head Demo." inertia="" />
  <meta property="og:url" content="http://inertia-head-demo.test" inertia="" />
  <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" inertia="" />
  <meta name="twitter:title" content="Inertia Head Demo." inertia="" />
  <meta name="twitter:site" content="@ninjaparade" inertia="" />
  <meta name="twitter:creator" content="@ninjaparade" inertia="" />
  <meta name="twitter:description" content="Inertia Head Demo." inertia="" />
  <meta name="twitter:card" content="summary_large_image" inertia="" />
  <meta type="description" content="Inertia Head Demo - Login page." inertia="" />
  <meta name="twitter:title" content="Inertia Head Demo - Login page." inertia="" />
  <meta name="twitter:site" content="@ninjaparade" inertia="" />
  <meta name="twitter:creator" content="@ninjaparade" inertia="" />
  <meta name="twitter:description" content="Inertia Head Demo - Login page." inertia="" />
  <meta name="twitter:card" content="summary_large_image" inertia="" />
  <meta property="og:url" content="http://inertia-head-demo.test" inertia="" />
  <meta property="og:title" content="Inertia Head Demo - Login page." inertia="" />
  <meta property="og:description" content="Inertia Head Demo - Login page." inertia="" />
  <meta property="og:type" content="website" inertia="" />
  <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" inertia="" />
  <title inertia="">Inertia Head Demo - Login</title>
</head>

我们的 <head> 标签现在包含了我们的元标签的副本；这是为什么？<inertia-head> 组件将始终确保只有一个 <title> 标签。当涉及到 <meta> 标签时，<inertia-head> 只是将默认值和 Login.vue 组件中的 <meta> 标签叠加起来，这就是你看到它们重复的原因。幸运的是，解决这个问题非常简单。我们可以告诉 <inertia-head> 如何处理重复项，方法是添加 head-key 属性，确保标签只渲染一次。

因此，将 Guest.vue 中的 Inertia 头部更改为以下内容。

<inertia-head>
    <title>Inertia Head Demo</title>
    <meta head-key="description" type="description" content="Inertia Head Demo." />
    <meta head-key="twitter:title" name="twitter:title" content="Inertia Head Demo." />
    <meta head-key="twitter:site" name="twitter:site" content="@ninjaparade" />
    <meta head-key="twitter:creator" name="twitter:creator" content="@ninjaparade" />
    <meta head-key="twitter:description" name="twitter:description" content="Inertia Head Demo." />
    <meta head-key="twitter:card" name="twitter:card" content="summary_large_image" />
 
    <meta head-key="og:url" property="og:url" content="http://inertia-head-demo.test" />
    <meta head-key="og:title" property="og:title" content="Inertia Head Demo." />
    <meta head-key="og:description" property="og:description" content="Inertia Head Demo." />
    <meta head-key="og:type" property="og:type" content="website" />
    <meta head-key="og:image" property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" />
</inertia-head>

并将 Login.vue 中的 <inertia-head> 组件更改为以下内容

<inertia-head>
    <title>Inertia Head Demo - Login</title>
    <meta head-key="description" type="description" content="Inertia Head Demo - Login page." />
    <meta head-key="twitter:title" name="twitter:title" content="Inertia Head Demo - Login page." />
    <meta head-key="twitter:site" name="twitter:site" content="@ninjaparade" />
    <meta head-key="twitter:creator" name="twitter:creator" content="@ninjaparade" />
    <meta head-key="twitter:description" name="twitter:description" content="Inertia Head Demo - Login page." />
    <meta head-key="twitter:card" name="twitter:card" content="summary_large_image" />
 
    <meta head-key="og:url" property="og:url" content="http://inertia-head-demo.test/login" />
    <meta head-key="og:title" property="og:title" content="Inertia Head Demo - Login page." />
    <meta head-key="og:description" property="og:description" content="Inertia Head Demo - Login page." />
    <meta head-key="og:type" property="og:type" content="website" />
    <meta head-key="og:image" property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" />
</inertia-head>

更新后，重新编译你的资源，刷新，你应该会看到这样

<head>
  ...
  <title inertia="">Inertia Head Demo - Login</title>
  <meta type="description" content="Inertia Head Demo - Login page." inertia="description" />
  <meta property="og:url" content="http://inertia-head-demo.test" inertia="og:url" />
  <meta property="og:image" content="https://www.biography.com/.image/t_share/MTQ3NTI2OTA4NzY5MjE2MTI4/drake_photo_by_prince_williams_wireimage_getty_479503454.jpg" inertia="og:image" />
  <meta name="twitter:title" content="Inertia Head Demo - Login page." inertia="twitter:title" />
  <meta name="twitter:site" content="@ninjaparade" inertia="twitter:site" />
  <meta name="twitter:creator" content="@ninjaparade" inertia="twitter:creator" />
  <meta name="twitter:description" content="Inertia Head Demo - Login page." inertia="twitter:description" />
  <meta name="twitter:card" content="summary_large_image" inertia="twitter:card" />
  <meta property="og:title" content="Inertia Head Demo - Login page." inertia="og:title" />
  <meta property="og:description" content="Inertia Head Demo - Login page." inertia="og:description" />
  <meta property="og:type" content="website" inertia="og:type" />
</head>

就是这样！关于 <inertia-head> 还有更多需要讨论的地方，以及它与即将推出的为 Inertia 提供服务器端渲染功能的结合点。Inertia 的 SSR 已准备就绪，目前为 Inertia.js 网站提供支持，但有关如何在 Laravel Forge 和 Heroku 上实现此功能的文档目前仅对 Inertia 赞助商可用。

感谢阅读，如果你有任何问题，请随时在 Twitter 上联系我。