refactor: 增加 RootTemplate 细化 Root 组件使用方法

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/InstallContent.razor

@@ -1,26 +1,16 @@
 @using Microsoft.Extensions.DependencyInjection
 @inject PackageVersionService VersionManager
 @inject IStringLocalizer<InstallContent> Localizer
-
-<h3>@Title</h3>
-
-<h4>@Localizer["Heading"]</h4>
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
-<p>@Localizer["P1"]</p>
-<ul class="ul-demo">
-    <li><code>visual studio</code> @Localizer["P2"]</li>
-    <li><code>net5</code> @Localizer["P3"] <code>net6</code> <code>net7</code></li>
-</ul>
-<p><code>BootstrapBlazor</code> @Localizer["P4"] <code>NET6/NET7/NET8/NET9</code></p>
-
-<h4>@Localizer["P5"]</h4>
+<h3>@Title</h3>
 
-<p>@Localizer["P6"] <a href="template">[@Localizer["P7"]]</a> @Localizer["P8"]</p>
+<h5>@Localizer["P5"]</h5>
+<p>@((MarkupString)Localizer["InstallByTemplate"].Value)</p>
 
-<h4>@Localizer["P9"]</h4>
+<h5 class="code-label">@Localizer["P9"]</h5>
 
-<h5>@Localizer["P10"]</h5>
+<p class="code-label">@Localizer["P10"]</p>
 <p class="code-label">1. @Localizer["P11"]</p>
 <p class="code-label">2. @Localizer["P12"]</p>
 <p class="code-label">3. @Localizer["P13"] <b>Blazor App</b> @Localizer["P14"] <b>@Localizer["P15"]</b>, @Localizer["P16"] <b>Create</b></p>
@@ -54,7 +44,7 @@
     &lt;link href="BlazorApp1.styles.css" rel="stylesheet"&gt;
 &lt;/head&gt;</Pre>
 
-<p class="code-label">4. @Localizer["P25"]</p>
+<p class="code-label">4. @((MarkupString)Localizer["P25"].Value)</p>
 @ScriptsTemplate
 <Pre>&lt;body&gt;
     ...
@@ -68,25 +58,11 @@
 @ServicesTemplate
 
 <p class="code-label">6. @Localizer["P28"]</p>
-<p>@Localizer["P29"] <code>~/_Imports.razor</code> @Localizer["P30"] <code>Razor</code> @Localizer["P31"]</p>
+<p>@Localizer["P29"] <code>_Imports.razor</code> @Localizer["P30"] <code>Razor</code> @Localizer["P31"]</p>
 <Pre><b>@@using BootstrapBlazor.Components</b></Pre>
 
-<p class="code-label">7. @Localizer["P32"] <code>BootstrapBlazorRoot</code> @Localizer["P33"] <code>~/App.razor</code> @Localizer["P34"]</p>
-<Pre>&lt;BootstrapBlazorRoot&gt;
-    &lt;Router AppAssembly="@@typeof(App).Assembly"&gt;
-        &lt;Found Context="routeData"&gt;
-            &lt;PageTitle&gt;Title&lt;/PageTitle&gt;
-            &lt;RouteView RouteData="@@routeData" DefaultLayout="@@typeof(MainLayout)" /&gt;
-            &lt;FocusOnNavigate RouteData="@@routeData" Selector="h1" /&gt;
-        &lt;/Found&gt;
-        &lt;NotFound&gt;
-            &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
-            &lt;LayoutView Layout="@@typeof(MainLayout)"&gt;
-                &lt;p&gt; @Localizer["P35"] ...&lt;/p&gt;
-            &lt;/LayoutView&gt;
-        &lt;/NotFound&gt;
-    &lt;/Router&gt;
-&lt;/BootstrapBlazorRoot&gt;</Pre>
+<p class="code-label">7. @((MarkupString)Localizer["AddRootText"].Value)</p>
+@RootTemplate
 
 <h5>@Localizer["P36"]</h5>
 <p>@Localizer["P37"] <code>BootstrapBlazor</code> @Localizer["P38"]：</p>

src/BootstrapBlazor.Server/Components/Components/InstallContent.razor.cs

@@ -51,6 +51,12 @@ public sealed partial class InstallContent
     [Parameter]
     public RenderFragment? ServicesTemplate { get; set; }
 
+    /// <summary>
+    ///
+    /// </summary>
+    [Parameter]
+    public RenderFragment? RootTemplate { get; set; }
+
     /// <summary>
     /// 
     /// </summary>

src/BootstrapBlazor.Server/Components/Pages/Install_Maui.razor

@@ -77,7 +77,7 @@ return builder.Build();
 <p>@Localizer["P24"] <code>~/_Imports.razor</code> @Localizer["P25"] <code>Razor</code> @Localizer["P26"]</p>
 <Pre><b>@@using BootstrapBlazor.Components</b></Pre>
 
-<p class="code-label">@Localizer["P27"] <code>BootstrapBlazorRoot</code> @Localizer["P28"] <code>~/Components/Routes.razor</code> @Localizer["P29"]</p>
+<p class="code-label">@((MarkupString)Localizer["AddRootText"].Value)</p>
 <Pre>&lt;BootstrapBlazorRoot&gt;
     &lt;Router AppAssembly="@@typeof(App).Assembly"&gt;
         &lt;Found Context="routeData"&gt;

src/BootstrapBlazor.Server/Components/Pages/Install_Server.razor

@@ -9,20 +9,19 @@
     </ChooseTemplate>
     <SheetTemplate>
         <ul class="ul-demo">
-            <li><code>~/Pages/_Host.cshtml</code> <b>.NET5</b></li>
-            <li><code>~/Pages/_Layout.cshtml</code> <b>.NET6/.NET7</b></li>
+            <li><code>~/Pages/_Layout.cshtml</code> <b>NET6/NET7</b></li>
+            <li><code>App.razor</code> <b>NET8/NET9</b></li>
         </ul>
     </SheetTemplate>
     <ScriptsTemplate>
         <ul class="ul-demo">
-            <li><code>~/Pages/_Host.cshtml</code> <b>.NET5</b></li>
-            <li><code>~/Pages/_Layout.cshtml</code> <b>.NET6/.NET7</b></li>
+            <li><code>~/Pages/_Layout.cshtml</code> <b>NET6/NET7</b></li>
+            <li><code>App.razor</code> <b>NET8/NET9</b></li>
         </ul>
     </ScriptsTemplate>
     <ServicesTemplate>
         <ul class="ul-demo">
-            <li><code>Starup.cs</code> <b>.NET5</b></li>
-            <li><code>Program.cs</code> <b>.NET6/.NET7</b></li>
+            <li><code>Program.cs</code> <b>NET6/NET7/NET8/NET9</b></li>
         </ul>
         <p><b>Startup.cs</b></p>
         <Pre>namespace MyBlazorAppName
@@ -51,4 +50,21 @@ builder.Services.AddServerSideBlazor();
 var app = builder.Build();
 //more code may be present here</Pre>
     </ServicesTemplate>
+    <RootTemplate>
+        <ul class="ul-demo">
+            <li><code>App.razor</code> <b>NET6/NET7</b></li>
+            <li><code>MainLayout.razor</code> <b>NET8/NET9</b></li>
+        </ul>
+
+        <Pre>// NET6/NET7
+&lt;BootstrapBlazorRoot&gt;
+    &lt;Router&gt;&lt;Router&gt;
+&lt;/BootstrapBlazorRoot&gt;
+</Pre>
+
+        <Pre>// NET8/NET9
+&lt;BootstrapBlazorRoot&gt;
+    &lt;@@Body
+&lt;/BootstrapBlazorRoot&gt;</Pre>
+    </RootTemplate>
 </InstallContent>

src/BootstrapBlazor.Server/Components/Pages/Install_WebApp.razor

@@ -25,18 +25,17 @@
 
 <h5>3. 添加字体与样式</h5>
 <p><code>App.razor</code> 文件在 <code>head</code> 位置添加如下内容</p>
-<Pre class="mb-3">// FontAwesoem 字体样式 注意需要引用 BootstrapBlazor.FontAwesome 包
+<Pre class="mb-3">// FontAwesome 字体图标样式 注意需要引用 BootstrapBlazor.FontAwesome 包
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" /&gt;
 // 组件样式已集成 Bootstrap 最新版
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" /&gt;
-// Motronic 样式可不添加
+// Motronic 主题可选建议添加
 &lt;link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css" /&gt;</Pre>
 
-<h5>4. 添加脚本</h5>
+<h5>4. 添加脚本 (<code>9.7.1</code> 版本后可跳过此步骤)</h5>
 <p><code>App.razor</code> 文件在 <code>body</code> 结尾位置添加如下内容它应与默认 blazor 脚本位于同一位置。</p>
 <Pre class="mb-3">// 添加 BootstrapBlazor 脚本
-&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;
-&lt;script src="_framework/blazor.web.js"&gt;&lt;/script&gt;</Pre>
+&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</Pre>
 
 <h5>5. 删除引用</h5>
 <p><code>App.razor</code> 文件，从项目中删除 bootstrap 样式，请同时删除 bootstrap 和 open-iconic 文件夹</p>
@@ -46,7 +45,7 @@
 <Pre class="mb-3">// 增加 BootstrapBlazor 服务
 builder.Services.AddBootstrapBlazor();</Pre>
 
-<h5>7. 添加组件</h5>
+<h5>7. 添加 <code>BootstrapBlazorRoot</code> 组件</h5>
 <p>根据项目情况增加 <code>BootstrapBlazorRoot</code> 组件，如 <code>MainLayout</code> 文件中，使用 <code>BootstrapBlazorRoot</code> 将原有内容包裹即可</p>
 <Pre class="mb-3">&lt;BootstrapBlazorRoot&gt;
     &lt;Header&gt;&lt;/Header&gt;

src/BootstrapBlazor.Server/Components/Pages/Install_wasm.razor

@@ -44,4 +44,15 @@ static async Task SetCultureAsync(WebAssemblyHost host)
 }
 </Pre>
     </ServicesTemplate>
+    <RootTemplate>
+        <ul class="ul-demo">
+            <li><code>App.razor</code> <b>NET6/NET7/NET8/NET9</b></li>
+        </ul>
+
+        <Pre>// NET6/NET7
+&lt;BootstrapBlazorRoot&gt;
+    &lt;Router&gt;&lt;Router&gt;
+&lt;/BootstrapBlazorRoot&gt;
+</Pre>
+    </RootTemplate>
 </InstallContent>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1177,15 +1177,8 @@
     "P1": "Please check <a href='https://learn.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?WT.mc_id=DT-MVP-5004174' target='_blank'> before reading the following knowledge points Official document</a>"
   },
   "BootstrapBlazor.Server.Components.Components.InstallContent": {
-    "Heading": "Environmental preparation",
-    "P1": "Make sure the system is installed",
-    "P2": "or",
-    "P3": "or",
-    "P4": "Currently supported",
     "P5": "Create a project using the BootstrapBlazor Project Template extension",
-    "P6": "you can pass",
-    "P7": "portal",
-    "P8": "After downloading and installing the extension, create a project through the extension",
+    "InstallByTemplate": "You can download and install the extension through <a href=\"template\">[port]</a>, and then create a project with the extension. <code>Highly recommended</code>",
     "P9": "Create a project with Visual Studio",
     "P10": "Step 1. Create a project",
     "P11": "Open Visual Studio",
@@ -1202,16 +1195,14 @@
     "P22": "Add stylesheet file",
     "P23": "Add a theme style sheet to the host file",
     "P24": "Need to reference BootstrapBlazor.FontAwesome package",
-    "P25": "Add Javascript files",
+    "P25": "Add Javascript files. This step can be skipped for versions later than <code>9.7.1</code>",
     "P26": "add code",
     "P27": "Register the BootstrapBlazor service",
     "P28": "Add namespace reference",
     "P29": "Add the following to",
     "P30": "file so that",
     "P31": "Components are recognized in the file",
-    "P32": "Increase",
-    "P33": "component to",
-    "P34": "in file (Replace original content with follow code)",
+    "AddRootText": "Add <code>BootstrapBlazorRoot</code> component into file (Replace original content with follow code)",
     "P35": "under development",
     "P36": "Step 3. Use components in the page",
     "P37": "The last step is to use in the page",
@@ -1222,7 +1213,7 @@
     "P42": "exist",
     "P43": "middle",
     "P44": "run the application",
-    "Tips2": "If you use the <code>Blazor App</code> template to create a project, please remove the default <code>Bootstrap</code> style link <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' /&gt;</code>. Install <b>FontAwesome</b> related resources by yourself or get the nuget package <code>BootstrapBlazor.FontAwesome</code>"
+    "Tips2": "If you use the blazor default template to create a project, please remove the default <code>Bootstrap</code> style link <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' /&gt;</code>. Install <b>FontAwesome</b> related resources by yourself or get the nuget package <code>BootstrapBlazor.FontAwesome</code>"
   },
   "BootstrapBlazor.Server.Components.Pages.Install_Server": {
     "Title": "Server-Side Blazor Installation Tutorial",
@@ -1273,9 +1264,7 @@
     "P24": "Add the following to",
     "P25": "file so that",
     "P26": "Components are recognized in the file",
-    "P27": "7. Increase",
-    "P28": "component to",
-    "P29": "in file",
+    "AddRootText": "7. Add <code>BootstrapBlazorRoot</code> component into <code>Routes.razor</code> file",
     "P30": "under development",
     "P31": "Step 3. Use components in the page",
     "P32": "The last step is to use in the page <code>BootstrapBlazor</code> component and run it in the browser. E.g",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1177,16 +1177,9 @@
     "P1": "阅读以下知识点前请先查看 <a href='https://learn.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?WT.mc_id=DT-MVP-5004174' target='_blank'>微软官方文档</a>"
   },
   "BootstrapBlazor.Server.Components.Components.InstallContent": {
-    "Heading": "环境准备",
-    "P1": "确保系统安装",
-    "P2": "或者",
-    "P3": "或者",
-    "P4": "目前支持",
     "P5": "使用 BootstrapBlazor Project Template 扩展创建项目",
-    "P6": "您可以通过",
-    "P7": "传送门",
-    "P8": "下载安装扩展后，通过扩展创建项目",
-    "P9": "使用 Visual Studio 创建项目 1",
+    "InstallByTemplate":"您可以通过 <a href=\"template\">[传送门]</a> 下载安装扩展后，通过扩展创建项目, <code>强烈推荐</code>",
+    "P9": "使用 Visual Studio 创建项目",
     "P10": "步骤一、创建项目",
     "P11": "打开 Visual Studio",
     "P12": "创建一个新项目",
@@ -1202,16 +1195,14 @@
     "P22": "添加样式表文件",
     "P23": "在宿主文件中增加主题样式表",
     "P24": "需引用 BootstrapBlazor.FontAwesome 包",
-    "P25": "添加 JavaScript 文件",
+    "P25": "添加 JavaScript 文件 <code>9.7.1</code> 版本后可跳过此步骤",
     "P26": "增加代码",
     "P27": "注册 BootstrapBlazor 服务",
     "P28": "增加命名空间引用",
     "P29": "将以下内容添加到",
     "P30": "文件中，以便",
     "P31": "文件中能识别组件",
-    "P32": "增加",
-    "P33": "组件到",
-    "P34": "文件中 (用下面代码替换原内容即可)",
+    "AddRootText": "增加 <code>BootstrapBlazorRoot</code> 组件到 <code>App.razor</code> 文件中 (用下面代码替换原内容即可)",
     "P35": "正在玩命开发中",
     "P36": "步骤三、页面中使用组件",
     "P37": "最后一步是在页面中使用",
@@ -1222,7 +1213,7 @@
     "P42": "在",
     "P43": "中",
     "P44": "运行应用程序",
-    "Tips2": "如果使用微软自带 <code>Blazor App</code> 模板创建工程，请移除 <code>_Layout.cshtml/index.html</code> 文件中的默认 <code>Bootstrap</code> 样式表 <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' /&gt;</code>。如果使用 <code>FontAwesome</code> 图标库可安装扩展包 <code>BootstrapBlazor.FontAwesome</code>"
+    "Tips2": "如果使用微软自带模板创建工程，请移除默认 <code>Bootstrap</code> 样式表 <code>&lt;link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' /&gt;</code>。如果使用 <code>FontAwesome</code> 图标库可安装扩展包 <code>BootstrapBlazor.FontAwesome</code>"
   },
   "BootstrapBlazor.Server.Components.Pages.Install_Server": {
     "Title": "服务器端 Blazor 安装教程",
@@ -1273,9 +1264,7 @@
     "P24": "将以下内容添加到",
     "P25": "文件中，以便",
     "P26": "文件中能识别组件",
-    "P27": "7. 增加",
-    "P28": "组件到",
-    "P29": "文件中",
+    "AddRootText": "7. 增加 <code>BootstrapBlazorRoot</code> 组件到 <code>Routes.razor</code> 文件中",
     "P30": "正在玩命开发中",
     "P31": "步骤三、页面中使用组件",
     "P32": "最后一步是在页面中使用 <code>BootstrapBlazor</code> 组件并在浏览器中运行它。例如：",