Tiêu đề & Meta

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Vì ứng dụng JavaScript sử dụng Inertia được render bên trong <body> của tài liệu nên chúng không thể render markup vào <head> của tài liệu, do phần này nằm ngoài phạm vi của ứng dụng. Để hỗ trợ việc này, Inertia cung cấp component <Head> dùng để thiết lập <title>, các thẻ <meta> và những phần tử <head> khác của trang. Component <Head> chỉ thay thế các phần tử <head> không có trong root template phía máy chủ. Component <Head> không có trong adapter Svelte vì Svelte đã cung cấp component <svelte:head> riêng.

Component Head

Để thêm các phần tử <head> vào trang, hãy dùng component <Head>. Bên trong component này, bạn có thể đặt các phần tử muốn thêm vào <head> của tài liệu.

import { Head } from '@inertiajs/vue2'

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

import { Head } from '@inertiajs/vue3'

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

import { Head } from '@inertiajs/react'

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

<svelte:head>
    <title>Your page title</title>
    <meta name="description" content="Your page description" />
</svelte:head>

Cú pháp rút gọn cho tiêu đề

Nếu chỉ cần thêm <title> vào <head> của tài liệu, bạn có thể truyền trực tiếp tiêu đề dưới dạng prop cho component <Head>.

import { Head } from '@inertiajs/vue2'

<Head title="Your page title" />

import { Head } from '@inertiajs/vue3'

<Head title="Your page title" />

import { Head } from '@inertiajs/react'

<Head title="Your page title" />

// Not supported

Callback tiêu đề

Bạn có thể thay đổi <title> của trang trên toàn ứng dụng bằng callback title trong phương thức thiết lập createInertiaApp. Thông thường phương thức này được gọi trong file JavaScript chính của ứng dụng. Một trường hợp sử dụng phổ biến của callback tiêu đề là tự động thêm tên ứng dụng trước hoặc sau tiêu đề của từng trang.

createInertiaApp({
title: title => \

Sau khi định nghĩa callback title, callback sẽ tự động được gọi mỗi khi bạn thiết lập tiêu đề bằng component <Head>.

import { Head } from '@inertiajs/vue2'

<Head title="Home">

import { Head } from '@inertiajs/vue3'

<Head title="Home">

import { Head } from '@inertiajs/react'

<Head title="Home">

// Not supported

Trong ví dụ này, kết quả sẽ tạo ra thẻ <title> sau.

<title>Home - My App</title>

Callback title cũng sẽ được gọi khi bạn thiết lập tiêu đề bằng thẻ <title> bên trong component <Head>.

import { Head } from '@inertiajs/vue2'

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

import { Head } from '@inertiajs/vue3'

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

import { Head } from '@inertiajs/react'

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

// Not supported

Nhiều instance Head

Bạn có thể có nhiều instance của component <Head> trong ứng dụng. Ví dụ, layout có thể thiết lập một số phần tử <Head> mặc định, sau đó từng trang riêng lẻ có thể ghi đè các giá trị mặc định đó.

// Layout.vue

import { Head } from '@inertiajs/vue2'

<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/vue2'

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

// Layout.vue

import { Head } from '@inertiajs/vue3'

<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/vue3'

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

// Layout.js

import { Head } from '@inertiajs/react'

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

import { Head } from '@inertiajs/react'

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

// Not supported

Inertia chỉ render duy nhất một thẻ <title>; tuy nhiên, tất cả các thẻ khác sẽ được xếp chồng vì việc có nhiều instance của chúng là hợp lệ. Để tránh các thẻ trùng lặp trong <head>, bạn có thể dùng thuộc tính head-key, giúp đảm bảo mỗi thẻ chỉ được render một lần. Điều này được minh họa trong ví dụ trên với thẻ <meta name="description">. Ví dụ code ở trên sẽ render HTML sau.

<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>About - My app</title>
<meta name="description" content="This is a page specific description" />
</head>

Mở rộng Head

Khi xây dựng ứng dụng thực tế, đôi khi việc tạo một head component tùy chỉnh mở rộng component <Head> của Inertia sẽ hữu ích. Đây là nơi bạn có thể thiết lập các giá trị mặc định dùng toàn ứng dụng, chẳng hạn tự động nối tên ứng dụng vào tiêu đề trang.

<!-- AppHead.vue -->

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

<script>
import { Head } from '@inertiajs/vue2'

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

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

// AppHead.js

import { Head } from '@inertiajs/react'

const Site = ({ title, children }) => {
    return (
        <Head>
            <title>{title ? `${title} - My App` : 'My App'}</title>
            {children}
        </Head>
    )
}

export default Site

// Not supported

Sau khi tạo component tùy chỉnh, bạn chỉ cần bắt đầu sử dụng component đó trong các trang của mình.

import AppHead from './AppHead'

<AppHead title="About" />

import AppHead from './AppHead'

<AppHead title="About" />

import AppHead from './AppHead'

<AppHead title="About">

// Not supported

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v1 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Nâng cao

Component Head

Cú pháp rút gọn cho tiêu đề

Callback tiêu đề

Nhiều instance Head

Mở rộng Head

Tài liệu chính thức

​Component Head

​Cú pháp rút gọn cho tiêu đề

​Callback tiêu đề

​Nhiều instance Head

​Mở rộng Head

​Tài liệu chính thức

Component Head

Cú pháp rút gọn cho tiêu đề

Callback tiêu đề

Nhiều instance Head

Mở rộng Head

Tài liệu chính thức