Поприветствуйте компонент Inertia Head / forpes.ru

Главная
Поприветствуйте компонент Inertia Head

Поприветствуйте компонент Inertia Head +3

14.07.2021 18:22

MaxRokatansky 2 854 Источник

В последнем релизе Inertia.js появился новый компонент именуемый «Inertia head». Этот компонент позволяет обновлять теги <title> и <meta> внутри тега <head> в вашем HTML. До появления этого компонента попытка изменить <title> вашей страницы, хотя и не была невозможной, но уж точно не представляла из себя простую задачу. Теперь же вы можете не только с легкостью сделать это внутри компонента страницы, но и также можете эффективно использовать любые свойства, передаваемые на вашу страницу.

Представьте себе возможность динамически устанавливать теги Open Graph или обновлять заголовок страницы, когда пользователь читает статью, или даже изменять фавикон; это все возможно.

Для того чтобы продемонстрировать эту новую фичу, я воспользуюсь своим любимым стартовым набором (starter kit) Laravel Breeze.

Начните с создания нового приложения Laravel.

laravel new inertia-head-demo

Как только оно будет запущено, сделайте cd в свой новый проект и запустите

composer require laravel/breeze --dev

после чего сделайте

PHP artisan breeze:install vue

После запуска вы должны увидеть, что devDependencies вашего package.json были обновлены и выглядят следующим образом.

"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 используется всеми auth-вью, а Authenticated.vue используется, когда пользователь аутентифицирован и просматривает свой дашборд. В этом примере мы сосредоточимся auth-экранах и лейауте Guest.vue.

Добавьте следующее в Guest.vue в любом месте тегов <template>.

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

Я использую Laravel Valet локально, поэтому, если я перейду по адресу http://inertia-head-demo.test/login, я ожидаю увидеть, что заголовок этой страницы будет "Inertia Head Demo", но при посещении /login для проверки я увижу, что в заголовке будет отображаться "Laravel" или что-то, что установленно для APP_NAME в вашем .env файле. Причина в том, что на странице всегда должен быть только один тег <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. Вы можете узнать больше о OG (Open Graph) тегах Facebook здесь и о карточках (Cards) Twitter здесь.

Начнем с обновления дефолтного компонента <inertia-head>, который мы добавили в Guest.vue, добавив следующее.

<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>

Вы можете увидеть OG мета-теги, за которыми следует заголовок. Здесь используются значения по умолчанию, и поскольку мы устанавливаем заголовок в <inertia-head> на нашей Login.vue странице, мы видим, что Inertia удаляет заголовок по умолчанию и использует заголовок из нашего компонента страницы.

Теперь попробуем установить OG теги в нашем Login.vue компоненте. Я собираюсь добавить следующее:

<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> просто берет значения по умолчанию и <meta> теги из компонента Login.vue и стакает их, поэтому вы и видите их дублирование. К счастью, исправить это довольно просто. Мы можем указать <inertia-head>, как обрабатывать дубликаты, добавив свойство head-key, гарантирующее, что тег будет отображаться один раз.

Измените Inertia head Guest.vue следующим образом:

<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. SSR для Inertia готов к использованию и в настоящее время поддерживает сайт Inertia.js, но документация о том, как заставить это работать в Laravel Forge и Heroku , в настоящее время доступна только спонсорам Inertia.

Спасибо за ваше внимание! Не стесняйтесь писать мне в Twitter, если у вас есть какие-либо вопросы.

Материал подготовлен в рамках курса "Framework Laravel".

Комментарии (2)

mSnus
14.07.2021 22:17
#23261546
Я , конечно, очень люблю Laravel, я от него в восторге (местами). Но, простите, цеплять компонент, перекомпилировать ресурсы, чтобы... Менять title? Это сложная задача?

laatoo
15.07.2021 06:59
#23262126
+1
До появления этого компонента попытка изменить <title> вашей страницы, хотя и не была невозможной, но уж точно не представляла из себя простую задачу

Если у вас передача переменной вьюхе стала сложной задачей — проблема только в том, что вы до этого довели

Поприветствуйте компонент Inertia Head +3

Метатеги Open Graph

Комментарии (2)

mSnus

laatoo