Separate Blazor WASM & Server for Blazor\Basic-Theme.md

4 years ago · 67b3d58ab9
1 changed files with 69 additions and 6 deletions
--- a/docs/en/UI/Blazor/Basic-Theme.md
+++ b/docs/en/UI/Blazor/Basic-Theme.md
@ -1,5 +1,12 @@
 # Blazor UI: Basic Theme

+````json
+//[doc-params]
+{
+    "UI": ["Blazor", "BlazorServer"]
+}
+````
+
 The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the **base theme** and build your own theme or styling on top of it. See the *Customization* section.

 > If you are looking for a professional, enterprise ready theme, you can check the [Lepton Theme](https://commercial.abp.io/themes), which is a part of the [ABP Commercial](https://commercial.abp.io/).
@ -10,16 +17,48 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist

 **This theme is already installed** when you create a new solution using the [startup templates](../../Startup-Templates/Index.md). If you need to manually install it, follow the steps below:

+{{if UI == "Blazor"}}
+
 * Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project.
 * Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project.
 * Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module:

-````csharp
-var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
-builder.RootComponents.Add<App>("#ApplicationContainer");
-````
+    ```csharp
+    var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
+    builder.RootComponents.Add<App>("#ApplicationContainer");
+    ```
+    `#ApplicationContainer` is a selector (like `<div id="ApplicationContainer">Loading...</div>`) in the `index.html`.
+
+* Execute `abp-bundle` command under blazor project once.
+
+{{end}}
+
+
+{{if UI == "BlazorServer"}}
+
+* Make sure [AspNetCore Basic Theme](../AspNetCore/Basic-Theme.md) installation steps are completed. 
+
+* Install the [Volo.Abp.AspNetCore.Components.Server.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.BasicTheme) NuGet package to your web project.
+
+* Add `AbpAspNetCoreComponentsServerBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project.
+
+* Perform following changes in `Pages/_Host.cshtml` file
+  * Add usings at the top of the page.
+    ```html
+    @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Bundling
+    @using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic
+    ```
+  * Add Basic theme style bundled between `<head>` tags.
+    ```html
+    <abp-style-bundle name="@BlazorBasicThemeBundles.Styles.Global" />
+    ```
+  * Add `App` component of Basic Theme in the body section of page.
+    ```html
+    <component type="typeof(App)" render-mode="Server" />
+    ```
+
+{{end}}

-`#ApplicationContainer` is a selector (like `<div id="ApplicationContainer">Loading...</div>`) in the `index.html`.

 ## The Layout

@ -52,15 +91,39 @@ See the [Customization / Overriding Components](Customization-Overriding-Compone

 You can run the following [ABP CLI](../../CLI.md) command in **Blazor WebAssembly** project directory to copy the source code to your solution:

+
+{{if UI == "Blazor"}}
+
 `abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file`

 Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` project directory and run:

 `abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file`

+{{end}}
+
+{{if UI == "BlazorServer"}}
+
+`abp add-package Volo.Abp.AspNetCore.Components.Server.BasicTheme --with-source-code --add-to-solution-file`
+
+Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.Server.BasicTheme` project directory and run:
+
+`abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file`
+
+{{end}}
+
 ----

-Or, you can download the [source code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements.
+
+Or, you can download the source code of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements.
+
+{{if UI == "Blazor"}}
+- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme)
+{{end}}
+
+{{if UI == "BlazorServer"}}
+- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Server.BasicTheme)
+{{end}}

 ## See Also