Merge branch 'rel-9.2' of https://github.com/abpframework/abp into rel-9.2

voloagent · voloagent · commit 75ab0397dce0 · 2025-08-12T11:42:01.000+03:00
diff --git 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.
+> 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).
 
@@ -101,11 +101,41 @@ 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
+
+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;
+@using Volo.Abp.Ui.LayoutHooks;
+@using Volo.Abp.AspNetCore.Components.Web.Theming.Layout;
+
+<!DOCTYPE html>
+<html>
+<head>
+    <LayoutHook Name="@LayoutHooks.Head.First" Layout="@StandardLayouts.Application" />
+
+    // Your head content
+    // ...
+
+    <LayoutHook Name="@LayoutHooks.Head.Last" Layout="@StandardLayouts.Application" />
+</head>
+<body>
+    // Your body content
+    // ...
+</body>
+</html>
+```
+
+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:
