타이틀 & 메타
Inertia로 구동되는 JavaScript 애플리케이션은 문서의 <body> 내에서 렌더링되므로, 문서의 <head>에 마크업을 렌더링하는 것은 그 범위를 벗어납니다. 이를 돕기 위해, Inertia는 페이지의 <title>, <meta> 태그 및 기타 <head> 요소를 설정하는 데 사용할 수 있는 <Head> 컴포넌트를 제공합니다.
<Head> 컴포넌트는 서버 측 루트 템플릿에 없는 <head> 요소만 대체합니다.
<Head> 컴포넌트는 Svelte 어댑터에서 사용할 수 없습니다. Svelte에는 이미 자체 <svelte:head> 컴포넌트가 있기 때문입니다.
Head 컴포넌트
페이지에 <head> 요소를 추가하려면 <Head> 컴포넌트를 사용하세요. 이 컴포넌트 내에서 문서의 <head>에 추가하고 싶은 요소를 포함시킬 수 있습니다.
import { Head } from '@inertiajs/vue3'
<Head>
<title>페이지 타이틀</title>
<meta name="description" content="페이지 설명">
</Head>타이틀 축약형
문서의 <head>에 <title>만 추가해야 하는 경우, <title>을 <Head> 컴포넌트에 prop으로 간단히 전달할 수 있습니다.
import { Head } from '@inertiajs/vue3'
<Head title="페이지 타이틀" />타이틀 콜백
createInertiaApp 설정 메소드에서 title 콜백을 사용하여 페이지 <title>을 전역적으로 수정할 수 있습니다. 일반적으로 이 메소드는 애플리케이션의 메인 JavaScript 파일에서 호출됩니다. 타이틀 콜백의 일반적인 사용 사례는 각 페이지 타이틀 앞이나 뒤에 앱 이름을 자동으로 추가하는 것입니다.
createInertiaApp({
title: title => `${title} - My App`,
// ...
})타이틀 콜백을 정의한 후, <Head> 컴포넌트를 사용하여 타이틀을 설정할 때마다 자동으로 이 콜백이 호출됩니다.
import { Head } from '@inertiajs/vue3'
<Head title="Home">이 예제에서는 다음과 같은 <title> 태그가 결과로 나타납니다.
<title>Home - My App</title>title 콜백은 <Head> 컴포넌트 내의 <title> 태그를 사용하여 타이틀을 설정할 때도 호출됩니다.
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="기본 설명" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
// About.vue
import { Head } from '@inertiajs/vue3'
<Head>
<title>소개 - My App</title>
<meta head-key="description" name="description" content="페이지 특정 설명" />
</Head>Inertia는 한 번에 하나의 <title> 태그만 렌더링하지만, 다른 태그는 여러 인스턴스가 있을 수 있기 때문에 쌓입니다. 중복 태그를 피하기 위해 head-key 속성을 사용할 수 있으며, 이는 태그가 한 번만 렌더링되도록 보장합니다. 위 예제에서 <meta name="description"> 태그에 대해 이를 설명합니다.
위 코드 예제는 다음 HTML을 렌더링합니다.
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>소개 - My App</title>
<meta name="description" content="페이지 특정 설명" />
</head>Head 확장
실제 애플리케이션을 구축할 때, Inertia의 <Head> 컴포넌트를 확장하는 사용자 정의 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="소개" />'프로그래밍 > Web' 카테고리의 다른 글
| Laravel Inertia - Manual visits (0) | 2024.01.18 |
|---|---|
| Laravel Inertia - Links (0) | 2024.01.18 |
| Laravel Inertia - Routing (0) | 2024.01.18 |
| Laravel Inertia - Redirects (0) | 2024.01.18 |
| Laravel Inertia - Responses (0) | 2024.01.18 |
댓글