ASP.NET Core MVC / Razer Pages：布局钩子

ABP 主题系统将页面布局放置在主题 NuGet包中。这意味着最终应用程序不包含Layout.cshtml文件，因此您无法直接修改布局代码来自定义它。

您可以将主题代码复制到您的解决方案中。这种情况下您可以完全自由地进行自定义。但这样一来，您将无法获得主题的自动更新（通过升级主题NuGet包）。

布局钩子系统允许您在布局的特定部分添加代码。所有主题的所有布局都应实现这些钩子。最终，您可以将视图组件添加到钩子点中。

示例：添加 Google Analytics 脚本

假设您需要在布局中添加 Google Analytics 脚本（该脚本将对所有页面可用）。首先，在您的项目中创建一个视图组件：

GoogleAnalyticsViewComponent.cs

public class GoogleAnalyticsViewComponent : AbpViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View("/Pages/Shared/Components/GoogleAnalytics/Default.cshtml");
    }
}

Default.cshtml

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-xxxxxx-1', 'auto');
    ga('send', 'pageview');
</script>

将UA-xxxxxx-1替换为您自己的代码。

然后，您可以在模块的ConfigureServices中将此组件添加到任意钩子点：

Configure<AbpLayoutHookOptions>(options =>
{
    options.Add(
        LayoutHooks.Head.Last, //钩子名称
        typeof(GoogleAnalyticsViewComponent) //要添加的组件
    );
});

现在，GA代码将作为最后一项插入到页面的head中。

指定布局

上述配置将GoogleAnalyticsViewComponent添加到所有布局。您可能希望仅添加到特定布局：

Configure<AbpLayoutHookOptions>(options =>
{
    options.Add(
        LayoutHooks.Head.Last,
        typeof(GoogleAnalyticsViewComponent),
        layout: StandardLayouts.Application //设置要添加的布局
    );
});

请参阅下面的布局部分以了解更多关于布局系统的信息。

布局钩子点

有一些预定义的布局钩子点。上面使用的LayoutHooks.Head.Last就是其中之一。标准钩子点包括：

LayoutHooks.Head.First：用于在HTML head标签中作为第一项添加组件。
LayoutHooks.Head.Last：用于在HTML head标签中作为最后一项添加组件。
LayoutHooks.Body.First：用于在HTML body标签中作为第一项添加组件。
LayoutHooks.Body.Last：用于在HTML body标签中作为最后一项添加组件。
LayoutHooks.PageContent.First：用于在页面内容之前（布局中的@RenderBody()之前）添加组件。
LayoutHooks.PageContent.Last：用于在页面内容之后（布局中的@RenderBody()之后）添加组件。

您（或您使用的模块）可以向同一钩子点添加多个项。所有项将按添加顺序依次添加到布局中。

布局

布局系统允许主题定义标准的命名布局，并允许任何页面根据其用途选择合适的布局。有三个预定义的布局：

"Application"：应用程序的主要（和默认）布局。通常包含页头、菜单（侧边栏）、页脚、工具栏等。
"Account"：此布局用于登录、注册和其他类似页面。默认情况下，用于/Pages/Account文件夹下的页面。
"Empty"：空且最小化的布局。

这些名称在StandardLayouts类中定义为常量。您当然可以创建自己的布局，但这些是标准布局名称，并且所有主题都开箱即用地实现了它们。

布局位置

您可以在这里找到基础主题的布局文件。您可以将它们作为参考来构建自己的布局，或者在必要时覆盖它们。

另请参阅

自定义用户界面