基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）

系列文章

1. 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
2. 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身，让它跑起来
3. 基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化，Swagger登场
4. 基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
5. 基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查
6. 基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API，包装返回模型
7. 基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger，分组、描述、小绿锁
8. 基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub，用JWT保护你的API
9. 基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
10. 基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据
11. 基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
12. 基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
13. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（一）
14. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（二）
15. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）
16. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（一）
17. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）
18. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
19. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
20. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
21. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（一）
22. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）
23. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（三）
24. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（四）
25. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（五）
26. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（六）
27. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（七）
28. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（八）
29. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）
30. 基于 abp vNext 和 .NET Core 开发博客项目 - 终结篇之发布项目

---

终于要接近尾声了，上一篇基本上将文章模块的所有功能都完成了，整个博客页面也都完成了，本篇主要来美化几个地方，修修补补。

编辑器主题切换

当我们新增和编辑文章的时候，默认编辑器是白色的，如果点击了头部切换主题按钮，我想要把编辑器主题颜色也做相应的改变该如何去实现呢？

刚好，editor.md是支持主题切换的，这就比较舒服了，直接按照要求调用对应的方法即可。

在app.js的renderEditor函数中我们已经自定义了三个参数theme、editorTheme、previewTheme，这三个参数就是来改变编辑器主题颜色的。

还是将值存在localStorage中，和我们博客的主题切换一样，这里叫editorTheme。

theme: localStorage.editorTheme || 'default',
editorTheme: localStorage.editorTheme === 'dark' ? 'pastel-on-dark' : 'default',
previewTheme: localStorage.editorTheme || 'default',

默认从localStorage中取数据，如果没取到的话，给对应的默认值。第二个参数有点特殊，用了一个三元表达式给不同的值。

然后在主题切换的时候也对编辑器做相应的调整即可。

打开Header.razor头部组件，找到SwitchTheme()切换主题的方法，添加一句await Common.SwitchEditorTheme(currentTheme);。

/// 

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

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

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

    var uri = await Common.CurrentUri();
    if (uri.AbsolutePath.StartsWith("/admin/post"))
    {
        await Common.SwitchEditorTheme(currentTheme);
    }
}

将具体切换逻辑放到SwitchEditorTheme中，他接收一个参数currentTheme，用来判断是切换黑的还是白的。

/// 

/// 切换编辑器主题
/// 
/// 
/// 
public async Task SwitchEditorTheme(string currentTheme)
{
    var editorTheme = currentTheme == "Light" ? "default" : "dark";

    await SetStorageAsync("editorTheme", editorTheme);

    await InvokeAsync("window.func.switchEditorTheme");
}

切换主题之前拿到当前URI对象，判断当前请求的链接是否是新增和更新文章的那个页面，即"/admin/post"，才去执行切换编辑器主题的方法，当不是这个页面的时候，编辑器是没有渲染出来的，如果也执行这段代码就会报错。

去看看效果。

文章详情页美化

现在的文章详情页是没有将markdown格式渲染出来的，这里还是使用editor.md提供的方法，因为需要加载几个js文件，然后才能渲染样式。

所以还是在app.js添加一段代码。

renderMarkdown: async function () {
    await this._loadScript('./editor.md/lib/zepto.min.js').then(function () {
        func._loadScript('./editor.md/lib/marked.min.js').then(function () {
            func._loadScript('./editor.md/lib/prettify.min.js').then(function () {
                func._loadScript('./editor.md/editormd.js').then(function () {
                    editormd.markdownToHTML("content");
                });
            });
        });
    });
},

然后在文章详情页的组件Post.razor中修改代码，当数据加载完成后调用renderMarkdown即可，然后还需要引用一个css文件editormd.preview.css。

提供一下Post.razor最终的代码。

@page "/post/{year:int}/{month:int}/{day:int}/{name}"



@if (post == null)
{
    
}
else
{
    @if (post.Success)
    {
        var _post = post.Result;

        

            

                
@_post.Title
                

                    Author: @_post.Author
                    
                        Date: @_post.CreationTime
                    
                    
                        Category:@_post.Category.CategoryName
                    
                
            
            

                @((MarkupString)_post.Html)
            
            

                

                    Author:
                    @_post.Author
                
                

                    Permalink:
                    https://meowv.com/post@_post.Url
                
                

                    License:
                    本文采用 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 进行许可
                
            
            

                

                    Tag(s):
                    
                        @if (_post.Tags.Any())
                        {
                            @foreach (var tag in _post.Tags)
                            {
                                # @tag.TagName
                            }
                        }
                    
                
                

                    back
                    · 
                    home
                
            
            

                @if (_post.Previous != null)
                {
                    @_post.Previous.Title
                }
                @if (_post.Next != null)
                {
                    
                        @_post.Next.Title
                    
                }
            
        
    }
    else
    {
        
    }
}

@code {
    [Parameter]
    public int year { get; set; }

    [Parameter]
    public int month { get; set; }

    [Parameter]
    public int day { get; set; }

    [Parameter]
    public string name { get; set; }

    /// 

    /// URL
    /// 
    private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{month}")}/{(day >= 10 ? day.ToString() : $"0{day}")}/{name}/";

    /// 

    /// 文章详情数据
    /// 
    private ServiceResult post;

    /// 

    /// 初始化
    /// 
    protected override async Task OnInitializedAsync()
    {
        await FetchData(url);
    }

    /// 

    /// 请求数据，渲染页面
    /// 
    /// 
    /// 
    private async Task FetchData(string url, bool isPostNav = false)
    {
        post = await Http.GetFromJsonAsync>($"/blog/post?url={url}");
        await Common.InvokeAsync("window.func.renderMarkdown");
    }
}

到这里整个开发工作便结束了，这里只是一个小小的实战系列记录，没有深层次的剖析研究Blazor的所有使用方式。

如果本系列对你有些许帮助，便是我最大的收获，欢迎大家关注我的公众号：阿星Plus。

开源地址：https://github.com/Meowv/Blog