渲染钩子

概述

Filament 允许你在框架视图的多个节点渲染 Blade 模板内容。这使得插件可以注入 HTML 到框架中。同时，由于 Filament 不推荐发布视图因其可能会增加破坏性变更的风险，这也对用户很有用。

注册渲染钩子

要注册渲染钩子，你可以在服务提供者或者中间件中调用 FilamentView::registerRenderHook()。第一个参数是钩子名称，第二个参数返回要渲染的内容的回调函数：

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);

你也可以在文件中渲染视图内容：

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Contracts\View\View;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): View => view('impersonation-banner'),
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Contracts\View\View;

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): View => view('impersonation-banner'),
);

可用渲染钩子

面板渲染钩子

    use Filament\View\PanelsRenderHook;
    use Filament\View\PanelsRenderHook;

PanelsRenderHook::AUTH_LOGIN_FORM_AFTER - 登录表单之后
PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE - 登录表单之前
PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_AFTER - 密码重置请求表单之后
PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_BEFORE - 密码重置请求表单之前
PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_AFTER - 密码重置表单之后
PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_BEFORE - 密码重置表单之前
PanelsRenderHook::AUTH_REGISTER_FORM_AFTER - 注册表单之后
PanelsRenderHook::AUTH_REGISTER_FORM_BEFORE - 注册表单之前
PanelsRenderHook::BODY_END - <body> 之后
PanelsRenderHook::BODY_START - </body> 之前
PanelsRenderHook::CONTENT_END -页面内容之后，在 <main> 里面
PanelsRenderHook::CONTENT_START - 页面内容之前，在 <main> 里
PanelsRenderHook::FOOTER - 页面 footer
PanelsRenderHook::GLOBAL_SEARCH_AFTER - 全局搜索容器之后，在顶部栏内
PanelsRenderHook::GLOBAL_SEARCH_BEFORE - 全局搜索容器之前，在顶部栏内
PanelsRenderHook::GLOBAL_SEARCH_END - 全局搜索容器尾部
PanelsRenderHook::GLOBAL_SEARCH_START - 全局搜索容器开始处
PanelsRenderHook::HEAD_END - </head> 之前
PanelsRenderHook::HEAD_START - <head> 之后
PanelsRenderHook::PAGE_END - 页面内容容器结尾，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_FOOTER_WIDGETS_AFTER - 在页面 Footer Widget 之后，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_FOOTER_WIDGETS_BEFORE - 在页面 Footer Widget 之前，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER - 在页面头部 Action 之后，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE - 在页面头部 Action 之前，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_HEADER_WIDGETS_AFTER - 在页面头部 Widget 之后，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_HEADER_WIDGETS_BEFORE - 在页面头部 Widget 之前，也可将范围锁定到页面或资源类
PanelsRenderHook::PAGE_START - 页面内容容器开始处，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER - 在资源表格之后，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE - 在资源表格之前，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_END - 过滤器选项卡尾部(最后一个选项卡之后)，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_START - 过滤器选项卡开始处(第一个选项卡之前)，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_AFTER - 在关联管理器表格之后，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_BEFORE - 在关联管理器表格之前，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_RELATION_MANAGER_AFTER - 在关联管理器表格之后，也可将范围锁定到页面类或关联管理器类
PanelsRenderHook::RESOURCE_RELATION_MANAGER_BEFORE - 在关联管理器表格之前，也可将范围锁定到页面类或关联管理器类
PanelsRenderHook::RESOURCE_TABS_END - 资源选项卡的末尾(最后一个选项卡之后)，也可将范围锁定到页面类或资源类
PanelsRenderHook::RESOURCE_TABS_START - 资源选项卡的起始处(第一个选项卡之前)，也可将范围锁定到页面或资源类
PanelsRenderHook::SCRIPTS_AFTER - Scripts 脚本定义之后
PanelsRenderHook::SCRIPTS_BEFORE - Scripts 脚本定义之前
PanelsRenderHook::SIDEBAR_NAV_END - 在侧边栏中，</nav> 之前
PanelsRenderHook::SIDEBAR_NAV_START - 在侧边栏中，</nav> 之后
PanelsRenderHook::SIDEBAR_FOOTER - 固定在侧边栏的底部，在内容下方
PanelsRenderHook::STYLES_AFTER - 样式定义之后
PanelsRenderHook::STYLES_BEFORE - 样式定义之前
PanelsRenderHook::TENANT_MENU_AFTER - 租户菜单之后
PanelsRenderHook::TENANT_MENU_BEFORE - 租户菜单之前
PanelsRenderHook::TOPBAR_AFTER - Topbar 容器之下
PanelsRenderHook::TOPBAR_BEFORE - Topbar 容器之上
PanelsRenderHook::TOPBAR_END - Topbar 容器末尾
PanelsRenderHook::TOPBAR_START - Topbar 容器起始处
PanelsRenderHook::USER_MENU_AFTER - 用户菜单之后
PanelsRenderHook::USER_MENU_BEFORE - 用户菜单之前
PanelsRenderHook::USER_MENU_PROFILE_AFTER - 用户菜单的 Profile 项之后
PanelsRenderHook::USER_MENU_PROFILE_BEFORE - 用户菜单的 Profile 项之前

表格构造器渲染钩子

所有这些渲染钩子可以将范围锁定到任何的表格 Livewire 组件类中。使用面板构造器使，这些列可以是资源的列表或管理页面，或关联管理器。表格 Widget 也是 Livewire 组件类。

    use Filament\Tables\View\TablesRenderHook;
    use Filament\Tables\View\TablesRenderHook;

TablesRenderHook::SELECTION_INDICATOR_ACTIONS_AFTER - 选择指示栏中的“全选”和“取消全选”操作按钮之后
TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE - 选择指示栏中的“全选”和“取消全选”操作按钮之后
TablesRenderHook::TOOLBAR_END - 工具栏的末尾
TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_AFTER - 在分组选择器之后
TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_BEFORE - 再分组选择器之前
TablesRenderHook::TOOLBAR_REORDER_TRIGGER_AFTER - 在 reorder 触发器之后
TablesRenderHook::TOOLBAR_REORDER_TRIGGER_BEFORE - 在 reorder 触发器之前
TablesRenderHook::TOOLBAR_SEARCH_AFTER - 搜索容器之后
TablesRenderHook::TOOLBAR_SEARCH_BEFORE - 搜索容器之前
TablesRenderHook::TOOLBAR_START - 工具栏开始处
TablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_AFTER - After the toggle columns trigger
TablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE - Before the toggle columns trigger

Widgets 渲染钩子

    use Filament\Widgets\View\WidgetsRenderHook;
    use Filament\Widgets\View\WidgetsRenderHook;

WidgetsRenderHook::TABLE_WIDGET_END - 表格 widget的末尾，在表格之后，也可将范围锁定到表格 Widget 类之后
WidgetsRenderHook::TABLE_WIDGET_START - 表格 widget的起始处，在表格之前，也可将范围锁定到表格 Widget 类之后

渲染钩子作用域

有些渲染钩子可以限定作用范围，它让你可以只在某个特定页面或 Livewire 组件中渲染。比如，你可能只想在一个页面中注册钩子。为此，你可以将页面类或组件作为第二个参数传入到 registerRenderHook()：

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\UserResource\Pages\EditUser::class,
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\UserResource\Pages\EditUser::class,
);

你也可以传入 scopes 数组:

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: [
        \App\Filament\Resources\UserResource\Pages\CreateUser::class,
        \App\Filament\Resources\UserResource\Pages\EditUser::class,
    ],
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: [
        \App\Filament\Resources\UserResource\Pages\CreateUser::class,
        \App\Filament\Resources\UserResource\Pages\EditUser::class,
    ],
);

有些面板构造器的渲染钩子允许你将钩子作用到资源的所有页面：

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\UserResource::class,
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\UserResource::class,
);

在渲染钩子中检索当前启用的作用域（scopes）

$scopes 变量被传入到渲染钩子函数中，你可以用它来确定在哪个页面或组件中对钩子进行渲染：

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
 
FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (array $scopes): View => view('warning-banner', ['scopes' => $scopes]),
    scopes: \App\Filament\Resources\UserResource::class,
);
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (array $scopes): View => view('warning-banner', ['scopes' => $scopes]),
    scopes: \App\Filament\Resources\UserResource::class,
);

对插件开发者而言，将渲染钩子暴露给插件用户或许有用。你无需在任何地方注册这些钩子，只需在 Blade 中像这样输出：

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START) }}
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START) }}

要限定你的渲染钩子的作用域，你可以将其作为第二个参数传给 renderHook()。比如，如果钩子在 Livewire 组件内部，你可以使用 static::class 传递该组件类：

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: $this->getRenderHookScopes()) }}
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: $this->getRenderHookScopes()) }}

你也可以传递多个 scopes 作为数组，所有匹配该 scopes 的渲染钩子都会被渲染：

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: [static::class, \App\Filament\Resources\UserResource::class]) }}
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: [static::class, \App\Filament\Resources\UserResource::class]) }}

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

#概述

#注册渲染钩子

#可用渲染钩子

#面板渲染钩子

#表格构造器渲染钩子

#Widgets 渲染钩子

#渲染钩子作用域

#在渲染钩子中检索当前启用的作用域（scopes）

#渲染钩子

概述