菜單

• 網站主頁
• 前端設計
• 後端開發
• .NET開發
• 軟體設計
• 企業開發
• 區塊鏈
• 移動端開發
• 軟體工程
• 資料庫
• 作業系統
• 其他

...
<NavLink class="link-item weixin" title="掃碼關注微信公眾號：『阿星Plus』查看更多，" @onmouseover="Hover" @onmouseout="Hover">
    <i class="iconfont iconweixin"></i>
</NavLink>
...

/// <summary>
/// 是否隱藏
/// </summary>
private bool IsHidden = true;

/// <summary>
/// 二維碼CSS
/// </summary>
private string QrCodeCssClass => IsHidden ? "hidden" : null;

/// <summary>
/// 滑鼠移入移出操作
/// </summary>
private void Hover() => IsHidden = !IsHidden;

...
<div class="qrcode @QrCodeCssClass">
    <img src=https://www.cnblogs.com/meowv/p/"https://static.meowv.com/images/wx_qrcode.jpg" />

@page "/"

<div class="main">
    <div class="container">
        <div class="intro">
            <div class="avatar">
                <a href="javascript:;"><img src="https://static.meowv.com/images/avatar.jpg"></a>
            </div>
            <div class="nickname">阿星Plus</div>
            <div class="description">
                <p>
                    生命不息，奮斗不止
                    <br>Cease to struggle and you cease to live
                </p>
            </div>
            <div class="links">
                <NavLink class="link-item" title="Posts" href="posts">
                    <i class="iconfont iconread"></i>
                </NavLink>
                <NavLink target="_blank" class="link-item" title="Notes" href="https://notes.meowv.com/">
                    <i class="iconfont iconnotes"></i>
                </NavLink>
                <NavLink target="_blank" class="link-item" title="API" href="https://api.meowv.com/">
                    <i class="iconfont iconapi"></i>
                </NavLink>
                <NavLink class="link-item" title="Manage" href="/account/auth">
                    <i class="iconfont iconcode"></i>
                </NavLink>
                <NavLink target="_blank" class="link-item" title="Github" href="https://github.com/Meowv/">
                    <i class="iconfont icongithub"></i>
                </NavLink>
                <NavLink class="link-item weixin" title="掃碼關注微信公眾號：『阿星Plus』查看更多，" @onmouseover="Hover" @onmouseout="Hover">
                    <i class="iconfont iconweixin"></i>
                </NavLink>
                <div class="qrcode @QrCodeCssClass">
                    <img src="https://static.meowv.com/images/wx_qrcode.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    /// <summary>
    /// 是否隱藏
    /// </summary>
    private bool IsHidden = true;

    /// <summary>
    /// 二維碼CSS
    /// </summary>
    private string QrCodeCssClass => IsHidden ? "hidden" : null;

    /// <summary>
    /// 滑鼠移入移出操作
    /// </summary>
    private void Hover() => IsHidden = !IsHidden;
}

@code {
    /// <summary>
    /// 下拉選單是否打開
    /// </summary>
    private bool collapseNavMenu = false;

    /// <summary>
    /// 導航選單CSS
    /// </summary>
    private string NavMenuCssClass => collapseNavMenu ? "active" : null;

    /// <summary>
    /// 顯示/隱藏 選單
    /// </summary>
    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;
}

...
<nav class="navbar-mobile">
    <div class="container">
        <div class="navbar-header">
            <div>
                <NavLink class="menu-item" href=https://www.cnblogs.com/meowv/p/"" Match="NavLinkMatch.All">??阿星Plus
                 · Light
            

與二維碼顯示與隱藏唯一區別就是這里是點擊按鈕，不是移入移出，所以選單顯示與隱藏需要用到@onclick方法，

主題切換

哇，這個主題切換真的是一言難盡，當切換主題的時候需要記住當前的主題是什么，當重繪頁面或者跳轉其他頁面的時候，主題狀態是需要一致的，默認是白色主題，當切換暗黑色主題后其實是在body上加了一個class，

在Blazor實在是不知道用什么辦法去動態控制body的樣式，所以這里我想到了一個辦法，寫幾個全域的JavaScript方法，然后再Blazor中呼叫，要知道，他們是可以互相呼叫的，于是問題迎刃而解，

添加app.js檔案，放在 /wwwroot/js/ 下面，

var func = window.func || {};

func = {
    setStorage: function (name, value) {
        localStorage.setItem(name, value);
    },
    getStorage: function (name) {
        return localStorage.getItem(name);
    },
    switchTheme: function () {
        var currentTheme = this.getStorage('theme') || 'Light';
        var isDark = currentTheme === 'Dark';

        if (isDark) {
            document.querySelector('body').classList.add('dark-theme');
        } else {
            document.querySelector('body').classList.remove('dark-theme');
        }
    }
};

這里寫了三個方法，設定localStorage：setStorage(name,value)，獲取localStorage：getStorage(name)，切換主題：switchTheme()，localStorage 是瀏覽器以 name:value 形式的本地存盤物件，

switchTheme主要做的事情就是，判斷當前主題如果是暗黑，就給body加上對應的class，如果不是就去掉，

然后在 index.html 中參考，

...
<body>
    <app>
        <div class="loader"></div>
    </app>
    <script src=https://www.cnblogs.com/meowv/p/"js/app.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>

...

有了這個三個全域的JavaScript方法，切換主題就變得簡單多了，看代碼，

...
/// <summary>
/// 當前主題
/// </summary>
private string currentTheme;

/// <summary>
/// 初始化
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
    currentTheme = await JSRuntime.InvokeAsync<string>("window.func.getStorage", "theme") ?? "Light";

    await JSRuntime.InvokeVoidAsync("window.func.switchTheme");
}
...

注意在Blazor呼叫JavaScript方法需要注入IJSRuntime介面，@inject IJSRuntime JSRuntime，

新建一個變數currentTheme，在生命周期函式初始化的時候去呼叫JavaScript中的getStorage方法，獲取當前主題，考慮到第一次訪問的情況，可以給一個默認值為Light，表示白色主題，然后再去呼叫switchTheme，執行切換主題的方法，這樣頁面就會根據localStorage的值來確定當前的主題，

...
/// <summary>
/// 切換主題
/// </summary>
private async Task SwitchTheme()
{
    currentTheme = currentTheme == "Light" ? "Dark" : "Light";

    await JSRuntime.InvokeVoidAsync("window.func.setStorage", "theme", currentTheme);

    await JSRuntime.InvokeVoidAsync("window.func.switchTheme");
}
...

SwitchTheme()是切換主題的方法，當我們點擊input按鈕時可以任意切換，并且主題還要實時跟著變化，

當點擊按鈕執行SwitchTheme()時候改變currentTheme的值，然后將currentTheme傳遞給JavaScript方法setStorage，最后再次執行切換主題的JavaScript方法即可，

此時變數currentTheme也發揮了不少作用，在小螢屏下會顯示當前主題的名稱，Dark or Light，可以直接將currentTheme在HTML中賦值即可，

并且我們input是checkbox型別，當是黑色主題的時候需要時選中的狀態，白色主題的時候不選中，這里就可以利用checked屬性這樣寫：checked="@(currentTheme == "Dark")"，

<nav class="navbar">
    <div class="container">
       ...
        <div class="menu navbar-right">
           ...
            <input id="switch_default" type="checkbox" class="switch_default" @onchange="SwitchTheme" checked="@(currentTheme == "Dark")" />
            <label for="switch_default" class="toggleBtn"></label>
        </div>
    </div>
</nav>
<nav class="navbar">
    <div class="container">
       ...
        <div class="menu navbar-right">
           ...
            <input id="switch_default" type="checkbox" class="switch_default" @onchange="SwitchTheme" checked="@(currentTheme == "Dark")" />
            <label for="switch_default" class="toggleBtn"></label>
        </div>
    </div>
</nav>
<nav class="navbar-mobile">
    <div class="container">
        <div class="navbar-header">
            <div>
                <NavLink class="menu-item" href=https://www.cnblogs.com/meowv/p/"" Match="NavLinkMatch.All">??阿星Plus
                 · @currentTheme
            
            
☰ Menu
        
        

            ...
        
    

OK，搞定，快去試試吧，

優化代碼

現在看起來亂亂的，并且設定獲取localStorage屬于公共的方法，說不定以后也能用到，我們將其封裝一下，便于日后的呼叫，不然要寫好多重復的代碼，

在Blazor專案根目錄添加檔案夾Commons，在檔案夾下添加一個Common.cs，目前用到了IJSRuntime，用建構式注入，然后寫幾個公共的方法，

//Common.cs
using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace Meowv.Blog.BlazorApp.Commons
{
    public class Common
    {
        private readonly IJSRuntime _jsRuntime;

        public Common(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        /// <summary>
        /// 執行無回傳值方法
        /// </summary>
        /// <param name="identifier"></param>
        /// <param name="args"></param>
        /// <returns></returns>
        public async ValueTask InvokeAsync(string identifier, params object[] args)
        {
            await _jsRuntime.InvokeVoidAsync(identifier, args);
        }

        /// <summary>
        /// 執行帶回傳值的方法
        /// </summary>
        /// <typeparam name="TValue"></typeparam>
        /// <param name="identifier"></param>
        /// <param name="args"></param>
        /// <returns></returns>
        public async ValueTask<TValue> InvokeAsync<TValue>(string identifier, params object[] args)
        {
            return await _jsRuntime.InvokeAsync<TValue>(identifier, args);
        }

        /// <summary>
        /// 設定localStorage
        /// </summary>
        /// <param name="name"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public async Task SetStorageAsync(string name, string value)
        {
            await InvokeAsync("window.func.setStorage", name, value);
        }

        /// <summary>
        /// 獲取localStorage
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public async Task<string> GetStorageAsync(string name)
        {
            return await InvokeAsync<string>("window.func.getStorage", name);
        }
    }
}

然后需要在Program.cs中注入，

using Meowv.Blog.BlazorApp.Commons;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace Meowv.Blog.BlazorApp
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddSingleton(typeof(Common));

            await builder.Build().RunAsync();
        }
    }
}

緊接著在_Imports.razor中注入使用Common，@inject Commons.Common Common，

改造一下Header.razor，全部代碼如下：

<header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo">
                <NavLink class="menu-item" href=https://www.cnblogs.com/meowv/p/"/" Match="NavLinkMatch.All">
                    ??阿星Plus
                
            
            

                Posts
                Categories
                Tags
                Apps
                
                
            
        
    
    


@code {
    /// 

    /// 下拉選單是否打開
    /// 
    private bool collapseNavMenu = false;

    /// 

    /// 導航選單CSS
    /// 
    private string NavMenuCssClass => collapseNavMenu ? "active" : null;

    /// 

    /// 顯示/隱藏 選單
    /// 
    private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;

    /// 

    /// 當前主題
    /// 
    private string currentTheme;

    /// 

    /// 初始化
    /// 
    /// 
    protected override async Task OnInitializedAsync()
    {
        currentTheme = await Common.GetStorageAsync("theme") ?? "Light";

        await Common.InvokeAsync("window.func.switchTheme");
    }

    /// 

    /// 切換主題
    /// 
    private async Task SwitchTheme()
    {
        currentTheme = currentTheme == "Light" ? "Dark" : "Light";

        await Common.SetStorageAsync("theme", currentTheme);

        await Common.InvokeAsync("window.func.switchTheme");
    }
}

實作程序比較簡單，相信你絕對學會了，本篇就到這里了，未完待續...

開源地址：https://github.com/Meowv/Blog/tree/blog_tutorial

標籤：.NET Core

上一篇：動手造輪子：實作一個簡單的依賴注入(三) --- 支持屬性注入

下一篇：一文說通Dotnet Core的后臺任務