Livewire 中文文档

主题

Title ​

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

基本用法 ​

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

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

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

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

    public function save()
    {
        // 保存帖子...
    }
};
?>

<div>
    <h1>创建新帖子</h1>

    <input type="text" wire:model="title" placeholder="帖子标题">
    <textarea wire:model="content" placeholder="帖子内容"></textarea>

    <button wire:click="save">保存帖子</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>

?? '我的应用' 在未指定标题时提供后备标题。

动态标题 ​

对于使用组件属性的动态标题，请在 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("编辑：{$this->post->title}"); // [tl! highlight]
    }
};
?>

<div>
    <h1>编辑帖子</h1>
    <!-- ... -->
</div>

标题将动态包含帖子的标题。

与布局结合 ​

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

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

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

#[Layout('layouts.admin')]
#[Title('创建帖子')]
new class extends Component
{
    // ...
};

此组件将使用管理员布局，标题为“创建帖子”。

何时使用 ​

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

  • 构建全页面组件
  • 您想要简洁、声明式的标题定义
  • 标题是静态的或很少更改
  • 您遵循 SEO 最佳实践

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

  • 标题依赖于组件属性
  • 您需要动态计算标题
  • 标题根据组件状态更改

示例：CRUD 页面 ​

以下是显示 CRUD 操作标题的完整示例：

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

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

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

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

#[Title('创建帖子')]
new 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("编辑：{$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 至关重要：

  • 具有描述性 - “编辑帖子：Laravel 入门指南”比“编辑”更好
  • 保持简洁 - 目标为 50-60 个字符，以避免在搜索结果中被截断
  • 包含关键词 - 帮助搜索引擎理解您的页面内容
  • 保持唯一性 - 每个页面都应有一个独特的标题

仅适用于全页面组件 ​

仅适用于全页面组件

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

了解更多 ​

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