В последнем релизе 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».
ссылка на оригинал статьи https://habr.com/ru/company/otus/blog/567718/
Добавить комментарий