From 515e94dd5a2a77dce9076f42d70fa292edba2348 Mon Sep 17 00:00:00 2001 From: maliming Date: Tue, 12 Aug 2025 10:36:42 +0800 Subject: [PATCH 1/2] Update Blazor layout hooks documentation Resolve #23505 --- docs/en/framework/ui/blazor/layout-hooks.md | 30 ++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/docs/en/framework/ui/blazor/layout-hooks.md b/docs/en/framework/ui/blazor/layout-hooks.md index 9e29ff69cd..ec78966d8b 100644 --- a/docs/en/framework/ui/blazor/layout-hooks.md +++ b/docs/en/framework/ui/blazor/layout-hooks.md @@ -2,7 +2,7 @@ ABP theming system places the page layout into the [theme](theming.md) NuGet packages. That means the final application doesn't include a layout, so you can't directly change the layout code to customize it. -> If you create a Blazor WASM project, the `index.html` file will be included within the template. You can also customize it to your needs. +> There will be a `App.razor` file in your project. You can customize it to your needs. You can copy the theme code into your solution. In this case, you are completely free to customize it. However, then you won't be able to get automatic updates of the theme (by upgrading the theme NuGet package). @@ -101,11 +101,39 @@ See the *Layouts* section below to learn more about the layout system. There are some pre-defined layout hook points. The standard hook points are: +* `LayoutHooks.Head.First`: Used to add a component as the first item in the HTML head tag. +* `LayoutHooks.Head.Last`: Used to add a component as the last item in the HTML head tag. * `LayoutHooks.Body.First`: Used to add a component as the first item in the HTML body tag. * `LayoutHooks.Body.Last`: Used to add a component as the last item in the HTML body tag. > You (or the modules you are using) can add **multiple items to the same hook point**. All of them will be added to the layout in the order they were added. +### Render LayoutHooks.Head in App.razor + +Your Blazor project will have a `App.razor` file, It is the root component of your application. Because of this, you need to add the `LayoutHook` component to this file manually to render the `LayoutHooks.Head` hook components. + +```csharp +@using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks; +@using Volo.Abp.Ui.LayoutHooks; +@using Volo.Abp.AspNetCore.Components.Web.Theming.Layout; + + + + + + + // Your head content + // ... + + + + + // Your body content + // ... + + +``` + ## Layouts The layout system allows themes to define the standard named layouts and allows any page to select a proper layout for its purpose. There is one pre-defined layout: From abc73e808ae7c83fa7117aa9a22c8f1083b49615 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Tue, 12 Aug 2025 06:34:42 +0000 Subject: [PATCH 2/2] Update layout-hooks.md --- docs/en/framework/ui/blazor/layout-hooks.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/en/framework/ui/blazor/layout-hooks.md b/docs/en/framework/ui/blazor/layout-hooks.md index ec78966d8b..d54b225c6d 100644 --- a/docs/en/framework/ui/blazor/layout-hooks.md +++ b/docs/en/framework/ui/blazor/layout-hooks.md @@ -2,7 +2,7 @@ ABP theming system places the page layout into the [theme](theming.md) NuGet packages. That means the final application doesn't include a layout, so you can't directly change the layout code to customize it. -> There will be a `App.razor` file in your project. You can customize it to your needs. +> If you created your Blazor application with ABP templates, then you'll have an `App.razor` file in your project. You can customize it to your needs and even extend it with layout hooks. You can copy the theme code into your solution. In this case, you are completely free to customize it. However, then you won't be able to get automatic updates of the theme (by upgrading the theme NuGet package). @@ -110,7 +110,7 @@ There are some pre-defined layout hook points. The standard hook points are: ### Render LayoutHooks.Head in App.razor -Your Blazor project will have a `App.razor` file, It is the root component of your application. Because of this, you need to add the `LayoutHook` component to this file manually to render the `LayoutHooks.Head` hook components. +In your Blazor application, there is an `App.razor` file, which acts as the entry point of your application. If you need to render layout hooks between the **head** tags, then you should manually register the layout hooks as below: ```csharp @using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks; @@ -134,6 +134,8 @@ Your Blazor project will have a `App.razor` file, It is the root component of yo ``` +After registering the related layout hooks, you can define components to render in the specific place accordingly as mentioned above. + ## Layouts The layout system allows themes to define the standard named layouts and allows any page to select a proper layout for its purpose. There is one pre-defined layout: