Use inline if statements in Customization-Overriding-Components.md

docs/en/UI/Blazor/Basic-Theme.md

@@ -29,7 +29,7 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist
     ```
     `#ApplicationContainer` is a selector (like `<div id="ApplicationContainer">Loading...</div>`) in the `index.html`.
 
-* Execute `abp-bundle` command under blazor project once.
+* Execute `abp bundle` command under blazor project once.
 
 {{end}}
 

docs/en/UI/Blazor/Customization-Overriding-Components.md

@@ -33,33 +33,16 @@ The next step is to create a razor component, like `MyBranding.razor`, in your a
 
 The content of the `MyBranding.razor` is shown below:
 
-{{if UI == "BlazorServer"}}
 
 ````html
 @using Volo.Abp.DependencyInjection
+{{if UI == "BlazorServer"}}
 @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic
-@inherits Branding
-@attribute [ExposeServices(typeof(Branding))]
-@attribute [Dependency(ReplaceServices = true)]
-<a href="/">
-    <img src="bookstore-logo.png" width="250" height="60"/>
-</a>
-````
-
-Let's explain the code:
-
-* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic` namespace).
-* `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component).
-* `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component).
-* The rest of the code is related the content and styling of the component.
-
 {{end}}
-
 {{if UI == "Blazor"}}
-
-````html
-@using Volo.Abp.DependencyInjection
 @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+{{end}}
+
 @inherits Branding
 @attribute [ExposeServices(typeof(Branding))]
 @attribute [Dependency(ReplaceServices = true)]
@@ -70,13 +53,11 @@ Let's explain the code:
 
 Let's explain the code:
 
-* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic` namespace).
+* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the {{if UI == "BlazorServer"}}`Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic`{{end}} {{if UI == "Blazor"}}`Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic`{{end}} namespace).
 * `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component).
 * `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component).
 * The rest of the code is related the content and styling of the component.
 
-{{end}}
-
 Now, you can run the application to see the result:
 
 ![bookstore-added-logo](../../images/bookstore-added-logo.png)
@@ -89,48 +70,29 @@ If you prefer to use code-behind file for the C# code of your component, you can
 
 **MyBlazor.razor**
 
-{{if UI == "BlazorServer"}}
 ````html
+{{if UI == "BlazorServer"}}
 @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic
-@inherits Branding
-<a href="/">
-    <img src="bookstore-logo.png" width="250" height="60"/>
-</a>
-````
 {{end}}
-
 {{if UI == "Blazor"}}
-````html
 @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+{{end}}
 @inherits Branding
 <a href="/">
     <img src="bookstore-logo.png" width="250" height="60"/>
 </a>
 ````
-{{end}}
 
 **MyBlazor.razor.cs**
-{{if UI == "BlazorServer"}}
 
 ````csharp
+{{if UI == "BlazorServer"}}
 using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic;
-using Volo.Abp.DependencyInjection;
-
-namespace MyProject.Blazor.Components
-{
-    [ExposeServices(typeof(Branding))]
-    [Dependency(ReplaceServices = true)]
-    public partial class MyBranding
-    {
-
-    }
-}
-````
 {{end}}
 {{if UI == "Blazor"}}
-
-````csharp
 using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic;
+{{end}}
+
 using Volo.Abp.DependencyInjection;
 
 namespace MyProject.Blazor.Components
@@ -143,7 +105,6 @@ namespace MyProject.Blazor.Components
     }
 }
 ````
-{{end}}
 
 ## Theming