定制ABP样式

最近在迁移自己的网站ZLDNN.COM，从基于DNN Platform(DotNetNuke)，迁移到ABP vNext。为了简单起见，希望在ABP的Basic样式的基础上稍作修改。

首先是菜单条的颜色，缺省是深灰色，而我希望使用蓝色，这可以通过定制CSS文件实现。在下图中的css文件中可以定义背景。

图片.png

.bg-dark {
    background-color: #284f99 !important;
}

还需要修改项目名称和Log的URL，这需要编辑Web项目下的BrandingProvider:

using Volo.Abp.Ui.Branding;
using Volo.Abp.DependencyInjection;

namespace ZLDNN.OrderManagement.Web
{
    [Dependency(ReplaceServices = true)]
    public class OrderManagementBrandingProvider : DefaultBrandingProvider
    {
        public override string AppName => "ZLDNN.COM";

        public override string LogoUrl => "/images/zldnnnew4.png";


    }
}

最后，由于网站Logo比较大，希望在菜单上面显示，这需要重载现有的组件。在项目中创建如下目录和文件：

图片.png

修改default.cshtml代码如下：

@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.Brand
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.Menu
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.Toolbar
<div class="container">
    @(await Component.InvokeAsync<MainNavbarBrandViewComponent>())
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4" id="main-navbar" style="min-height: 4rem;">
    <div class="container">

        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#main-navbar-collapse" aria-controls="main-navbar-collapse"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="main-navbar-collapse">
            <ul class="navbar-nav mx-auto">
                @(await Component.InvokeAsync<MainNavbarMenuViewComponent>())
            </ul>
            <ul class="navbar-nav">
                @(await Component.InvokeAsync<MainNavbarToolbarViewComponent>())
            </ul>
        </div>
    </div>
</nav>

将MainNavbarBrandViewComponent的显示位置从导航栏移动到上面。至此，修改完成。