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 {
    // ...
};

此组件将使用管理员布局，标题为 "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 个字符以避免在搜索结果中被截断
  • 包含关键词 - 帮助搜索引擎理解你的页面内容
  • 唯一 - 每个页面应该有一个独特的标题

仅适用于全页组件 ​

仅全页组件

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

了解更多 ​

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

参考 ​

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