Tiêu đề & Meta

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

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/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/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 => `${title} - My App`,
    // ...
})

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

<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 nó trong các trang.

import AppHead from './AppHead'

<AppHead title="About" />

import AppHead from './AppHead'

<AppHead title="About">

// Not supported

Thuộc tính Inertia trên element

Trong lịch sử, Inertia dùng thuộc tính inertia để theo dõi và quản lý các element trong <head> của document. Tuy nhiên, hiện bạn có thể chọn dùng thuộc tính data-inertia tuân thủ tiêu chuẩn tốt hơn. Theo đặc tả HTML, custom attribute nên có tiền tố data- để tránh xung đột với các tiêu chuẩn HTML trong tương lai. Để bật, cấu hình tùy chọn future.useDataInertiaHeadAttribute trong giá trị mặc định của ứng dụng.

createInertiaApp({
    // resolve, setup, etc.
    defaults: {
        future: {
            useDataInertiaHeadAttribute: true,
        },
    },
})

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

Dữ liệu & Props

Bảo mật

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

Thuộc tính Inertia trên element

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

​Thuộc tính Inertia trên element

​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

Thuộc tính Inertia trên element

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