BootStrapBlazor 安裝教學--Server模式

使用模板

使用模板是最簡單的辦法。因為專案模板裡已經包含了BootStrapBlazor的所有需要設定的內容。

首先我們安裝專案模板：

dotnet new -i Bootstrap.Blazor.Templates::6.4.1

這裡的6.4.1是版本號，截至到目前Templates的版本號為6.4.1。

然後建立專案

dotnet new bbapp

這裡的bbapp是專案名稱，你可以換成自己的專案名。

這樣一個新鮮的BB專案就建好了。

在現有模板上增加

安裝BootstrapBlazor的庫

可以使用NuGet瀏覽器，也可以使用命令

dotnet add package BootstrapBlazor --version 6.8.17

來安裝。發文時的版本號為6.8.17。

新增樣式表檔案

.net6預設的cshtml已經移動到了~/Pages/_Layout.cshtml檔案，不是.net5的~/Pages/_Host.cshtml檔案了，這裡需要注意。

<head>
    ...

    <!-- 需參照 BootstrapBlazor.FontAwesome 包 !-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

    ...
    <link href="css/site.css" rel="stylesheet">
    <link href="BlazorApp1.styles.css" rel="stylesheet">
</head>

這裡注意一下，預設BB使用FontAwesome作為圖示庫，同時BB也做了整合，但是整合在了一個子包裡面，需要使用NuGet安裝BootstrapBlazor.FontAwesome。

這裡還需要注意，需要刪除預設模板帶的bootstrap的css檔案，否則會有css的衝突。

新增 Javascript 檔案

<body>
    ...
    <!-- 增加程式碼 !-->
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
    ...
    <script src="_framework/blazor.server.js"></script>
</body>

這裡需要注意一下，bootstrap的js一定要放在blazor.server.js的前面，否則可能出問題。

註冊 BootstrapBlazor 服務

頂級語句：Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddServerSideBlazor();

// 新增本行程式碼
builder.Services.AddBootstrapBlazor();

var app = builder.Build();
//more code may be present here

非頂級語句：Starup.cs

namespace MyBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddServerSideBlazor();

            // 新增本行程式碼
            services.AddBootstrapBlazor();
        }
    }
}

增加名稱空間參照

將以下內容新增到 ~/_Imports.razor 檔案中，以便 Razor 檔案中能識別元件

@using BootstrapBlazor.Components

增加 `BootstrapBlazorRoot` 元件到 `~/App.razor` 檔案中

注意，這一步很重要，如果不做，程式在執行時大概率會報錯。

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <PageTitle>Title</PageTitle>
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>正在玩命開發中 ...</p>
            </LayoutView>
        </NotFound>
    </Router>
</BootstrapBlazorRoot>