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

基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目

基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来

基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化,Swagger登场

基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先

基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查

基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API,包装返回模型

基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger,分组、描述、小绿锁

基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub,用JWT保护你的API

基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录

基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据

基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理

基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射

基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(一)

基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(二)

基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(三)

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(一)

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(二)

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(三)

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(四)

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(一)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(三)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(四)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(五)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(六)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七)

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(八)

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

编辑器主题切换

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

刚好,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);。

/// <summary> /// 切换主题 /// </summary> 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,用来判断是切换黑的还是白的。

/// <summary> /// 切换编辑器主题 /// </summary> /// <param></param> /// <returns></returns> public async Task SwitchEditorTheme(string currentTheme) { var editorTheme = currentTheme == "Light" ? "default" : "dark"; await SetStorageAsync("editorTheme", editorTheme); await InvokeAsync("window.func.switchEditorTheme"); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxfsz.html