Livewire 中文文档

主题

全部文档

Title ​

#[Title] 属性为全页面 Livewire 组件设置页面标题。

基本用法 ​

将 #[Title] 属性应用到全页面组件以设置其标题：

php
<?php // resources/views/pages/posts/⚡create.blade.php

use Livewire\Attributes\Title;
use Livewire\Component;

new #[Title('Create Post')] class extends Component { // [tl! highlight]
    public $title = '';
    public $content = '';

    public function save()
    {
        // Save post...
    }
};
?>

<div>
    <h1>Create a New Post</h1>

    <input type="text" wire:model="title" placeholder="Post title">
    <textarea wire:model="content" placeholder="Post content"></textarea>

    <button wire:click="save">Save Post</button>
</div>

浏览器标签页将显示「Create Post」作为页面标题。

布局配置 ​

要使 #[Title] 属性生效，布局文件必须包含 $title 变量：

blade
<!-- resources/views/components/layouts/app.blade.php -->

<!DOCTYPE html>
<html>
<head>
    <title>{{ $title ?? 'My App' }}</title> <!-- [tl! highlight] -->
</head>
<body>
    {{ $slot }}
</body>
</html>

?? 'My App' 在未指定标题时提供回退标题。

动态标题 ​

若要使用组件属性的动态标题，请在 render() 方法中使用 title() 方法：

php
<?php // resources/views/pages/posts/⚡edit.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public function mount($id)
    {
        $this->post = Post::findOrFail($id);
    }

    public function render()
    {
        return $this->view()
            ->title("Edit: {$this->post->title}"); // [tl! highlight]
    }
};
?>

<div>
    <h1>Edit Post</h1>
    <!-- ... -->
</div>

标题会动态包含文章的标题。

与布局结合 ​

你可以同时使用 #[Title] 和 #[Layout]：

php
<?php // resources/views/pages/posts/⚡create.blade.php

use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;

new
#[Layout('layouts.admin')]
#[Title('Create Post')]
class extends Component {
    // ...
};

该组件将使用 admin 布局，并以「Create Post」作为标题。

何时使用 ​

在以下情况使用 #[Title]：

  • 构建全页面组件
  • 希望有简洁、声明式的标题定义
  • 标题是静态的或很少变化
  • 遵循 SEO 最佳实践

在以下情况使用 title() 方法：

  • 标题依赖于组件属性
  • 需要动态计算标题
  • 标题根据组件状态变化

示例：CRUD 页面 ​

下面是一个展示 CRUD 操作中标题的完整示例：

php
<?php // resources/views/pages/posts/⚡index.blade.php

use Livewire\Attributes\Title;
use Livewire\Component;

new #[Title('All Posts')] class extends Component { };
php
<?php // resources/views/pages/posts/⚡create.blade.php

use Livewire\Attributes\Title;
use Livewire\Component;

new #[Title('Create Post')] class extends Component { };
php
<?php // resources/views/pages/posts/⚡edit.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public function render()
    {
        return $this->view()->title("Edit: {$this->post->title}");
    }
};
php
<?php // resources/views/pages/posts/⚡show.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public function render()
    {
        return $this->view()->title($this->post->title);
    }
};

每个页面都有符合上下文的标题，以改善用户体验和 SEO。

SEO 考量 ​

好的页面标题对 SEO 至关重要：

  • 要有描述性 - 「Edit Post: Getting Started with Laravel」比「Edit」更好
  • 保持简洁 - 目标 50–60 个字符，以避免在搜索结果中被截断
  • 包含关键词 - 帮助搜索引擎理解你的页面内容
  • 保持唯一 - 每个页面应有不同的标题

仅适用于全页面组件 ​

INFO

仅限全页面组件

#[Title] 属性仅适用于通过路由访问的全页面组件。在其他视图中渲染的普通组件不使用标题——它们继承父页面的标题。

了解更多 ​

有关全页面组件、布局和路由的更多信息，请参阅 页面文档。

参考 ​

php
#[Title(
    string $content,
)]
参数类型默认值说明
$contentstring必填显示在浏览器标题栏中的文本