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

系列文章

  1. 使用 abp cli 搭建项目

  2. 给项目瘦身,让它跑起来

  3. 完善与美化,Swagger登场

  4. 数据访问和代码优先

  5. 自定义仓储之增删改查

  6. 统一规范API,包装返回模型

  7. 再说Swagger,分组、描述、小绿锁

  8. 接入GitHub,用JWT保护你的API

  9. 异常处理和日志记录

  10. 使用Redis缓存数据

  11. 集成Hangfire实现定时任务处理

  12. 用AutoMapper搞定对象映射

  13. 定时任务最佳实战(一)

  14. 定时任务最佳实战(二)

  15. 定时任务最佳实战(三)

  16. 博客接口实战篇(一)

  17. 博客接口实战篇(二)

  18. 博客接口实战篇(三)

  19. 博客接口实战篇(四)

  20. 博客接口实战篇(五)

  21. Blazor实战系列(一)

  22. Blazor实战系列(二)

  23. Blazor实战系列(三)

  24. Blazor实战系列(四)

  25. Blazor实战系列(五)

  26. Blazor实战系列(六)

  27. Blazor实战系列(七)

  28. Blazor实战系列(八)


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

编辑器主题切换

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

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

app.jsrenderEditor函数中我们已经自定义了三个参数themeeditorThemepreviewTheme,这三个参数就是来改变编辑器主题颜色的。

还是将值存在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 name="currentTheme"></param>
/// <returns></returns>
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}"<link href="./editor.md/css/editormd.preview.css" rel="stylesheet" />@if (post == null)
{<Loading />
}
else
{@if (post.Success){var _post = post.Result;<article class="post-wrap"><header class="post-header"><h1 class="post-title">@_post.Title</h1><div class="post-meta">Author: <a itemprop="author" rel="author" href="javascript:;">@_post.Author</a><span class="post-time">Date: <a href="javascript:;">@_post.CreationTime</a></span><span class="post-category">Category:<a href="/category/@_post.Category.DisplayName/">@_post.Category.CategoryName</a></span></div></header><div class="post-content" id="content">@((MarkupString)_post.Html)</div><p class="post-copyright"><p class="copyright-item"><span>Author:</span><span>@_post.Author</span></p><p class="copyright-item"><span>Permalink:</span><span><a href="/post@_post.Url">https://meowv.com/post@_post.Url</a></span></p><p class="copyright-item"><span>License:</span><span>本文采用<a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"> 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 </a>进行许可</span></p></p><p class="post-tags"><div><span>Tag(s):</span><span class="tag">@if (_post.Tags.Any()){@foreach (var tag in _post.Tags){<a href="/tag/@tag.DisplayName/"># @tag.TagName</a>}}</span></div><div><a @onclick="@(async () => await Common.NavigateTo("/posts"))">back</a><span>· </span><a href="/">home</a></div></p><p class="post-nav">@if (_post.Previous != null){<a class="prev"rel="prev"@onclick="@(async () => await FetchData(_post.Previous.Url))"href="/post@_post.Previous.Url">@_post.Previous.Title</a>}@if (_post.Next != null){<a class="next"rel="next"@onclick="@(async () => await FetchData(_post.Next.Url))"href="/post@_post.Next.Url">@_post.Next.Title</a>}</p></article>}else{<ErrorTip />}
}@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; }/// <summary>/// URL/// </summary>private string url => $"/{year}/{(month >= 10 ? month.ToString() : $"0{month}")}/{(day >= 10 ? day.ToString() : $"0{day}")}/{name}/";/// <summary>/// 文章详情数据/// </summary>private ServiceResult<PostDetailDto> post;/// <summary>/// 初始化/// </summary>protected override async Task OnInitializedAsync(){await FetchData(url);}/// <summary>/// 请求数据,渲染页面/// </summary>/// <param name="url"></param>/// <returns></returns>private async Task FetchData(string url, bool isPostNav = false){post = await Http.GetFromJsonAsync<ServiceResult<PostDetailDto>>($"/blog/post?url={url}");await Common.InvokeAsync("window.func.renderMarkdown");}
}

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于-32768补码的问题

首先要知道的是计算机中补码的表示是唯一且连续的&#xff01;我想这是计算机为什么不用原码来表示的一个原因&#xff01;另外&#xff0c;以补码形式来运算的话&#xff0c;设计的逻辑电路会简单很多&#xff0c;会少很多逻辑运算器件&#xff0c;所以计算机采用补码的形式来…

TCP(发消息:简易代码实现)

文章目录客户端服务器review&#xff1a;查询IP和端口发送文件客户端 链接服务器Socket发送消息 package com.ayv.try02;import java.io.IOException; import java.io.OutputStream; import java.net.InetAddress; import java.net.Socket;//客户端 public class TcoClientDe…

记实现TDengine时序数据库支持 .Net Windows 32位系统踩坑

TDengine是一个高效的存储、查询、分析时序大数据的平台&#xff0c;专为物联网、车联网、工业互联网、运维监测等优化而设计的数据库&#xff0c; 官方目前没有提供完整的.Net Core 解决方案&#xff0c; 因此闲来无事&#xff0c; 从基于restful api 到现在使用官方编译的动态…

SPDY, WebSocket, WebDAV概念

SPDY&#xff08;读作“SPeeDY”&#xff09;是Google开发的基于TCP的应用层协议&#xff0c;用以最小化网络延迟&#xff0c;提升网络速度&#xff0c;优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议&#xff0c;而是对HTTP协议的增强。新协议的功能包括数据流的多…

UDP(发短信:简单模拟)

发短信&#xff1a;不用连接&#xff0c;需要知道对方地址 文章目录UDP发送消息实现互相聊天UDP多线程实现聊天UDP发送消息 UDP传输 我们要用UDP传输数据时&#xff0c;怎么用Socket建立连接呢&#xff1f; DatagramSocket与DatagramPacket 建立发送端&#xff0c;接收端。 建…

SilkierQuartz 1.0.21 发布, 是一个 Quartz.NET 的强大且简单的Web管理工具和承载组件...

SilkierQuartz 是一个新的合并了 Quartzmin 和 QuartzHostedService的组件!Quartz.NET 是一个完整的开源的任务规划系统&#xff0c;从小应用至大型企业级应用都可以适用.Quartzmin Quartzmin 是一个 Quartz.NET 的强大且简单的Web管理工具QuartzHostedService QuartzHostedSer…

超文本运输协议HTTP概念

超文本传输协议&#xff08;HTTP&#xff0c;HyperTextTransfer Protocol)是互联网上应用最为广泛的一种网络传输协议&#xff0c;所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。 1960年美国人Ted Nelson构思了一种通过计算机处…

多线程(简单实现)

继承Thread类 两条线程交替进行创建线程方式一&#xff1a;继承Theard类&#xff0c;重写run方法&#xff0c;调用start开启线程总结:注意&#xff0c;线程开启不一定立即执行&#xff0c;由CPU调度执行 //两条线程交替进行//创建线程方式一&#xff1a;继承Theard类&#xf…

用C#在STM32上写第一个Hello world

随着微软放弃.Net MF ,通过C#编写STM32 平台上的程序变得渺茫&#xff0c; 但是&#xff0c; 别着急&#xff0c; 目前至少有两个社区在做这件事情&#xff0c; 传承了微软的.Net MF , 一家是 nanoframework,另外一家比较封闭的是 GHI Electronics 地址是: https://github.com/…

如何找到Eclipse左侧项目栏

如何找到Eclipse左侧项目栏 window --> Show View --> other --> Java–> package Explorer

静态代理模式(多线程底部原理)

静态代理模式总结(线程底部原理) 真实对象和代理对象都要实现同一个接口代理对象要代理真实角色好处&#xff1a; - 代理对象可以做很多真实对象做不了的事情 - 真实对象专注做自己的事情创建静态代理模式&#xff1a;一个接口&#xff08;当前创建为函数式接口&#xff08;只…

深入async/await知多少

.net的async/await功能相信对很多人来说并不陌生了&#xff0c;有人感觉这功能很好&#xff0c;但也有人说这功能不好容易产生一些莫名其妙的死锁&#xff1b;有人说这些异步功能也有人说这是同步功能。其实在使用async/await的有多少人真的了解它们呢&#xff1f;接下来详细地…

Java中各种整形类型可以表示的范围

对于整型类型&#xff0c;Java只定义了带符号的整型&#xff0c;因此&#xff0c;最高位的bit表示符号位&#xff08;0表示正数&#xff0c;1表示负数&#xff09;。各种整型能表示的最大范围如下&#xff1a; byte&#xff1a;-128 ~ 127 short: -32768 ~ 32767 int: -214748…

Lambda表达式(多线程实现)

推导lambda表达式 Lambda表达式&#xff0c;避免匿名内部类定义过多&#xff0c;其实质属于函数式编程的概念&#xff1b; 去掉一些没有意义的代码&#xff0c;只留下核心代码&#xff1b; 当前接口为函数式接口&#xff08;任何一个接口&#xff0c;如果只包含唯一一个抽象方…

微软正式发布 gRPC-Web for .NET

今年一月份的时候&#xff0c;微软曾宣布对 gRPC-Web for .NET 的实验性支持微软实验性地对 .NET 支持 gRPC-Web&#xff0c;现在它已正式发布。gRPC 是谷歌开源的高性能、通用 RPC 框架&#xff0c;支持包括 .NET 在内的多种编程语言。它面向移动和基于 HTTP/2 标准设计&#…

Java多线程(review)

文章目录线程状态线程方法线程停止线程休眠——sleep网络延时模拟倒计时与打印当前系统时间线程礼让——yield线程强制执行——Join线程状态线程优先级守护线程不安全案例死锁Lock锁线程状态 新建状态: 使用 new 关键字和 Thread 类或其子类建立一个线程对象后&#xff0c;该线…

Java,C++四舍五入

如果要进行四舍五入&#xff0c;可以对浮点数加上0.5再强制转型&#xff1a; package HomeTest01;public class Main {public static void main(String[] args){double a 0.6;System.out.println((int)(a0.5));double b 0.4;System.out.println((int)(b0.5));}}C也同理&…

利用Azure Functions和k8s构建Serverless计算平台

题记&#xff1a;昨晚在一个技术社区直播分享了“利用Azure Functions和k8s构建Serverless计算平台”这一话题。整个分享分为4个部分&#xff1a;Serverless概念的介绍、Azure Functions的简单介绍、k8s和KEDA的介绍和最后的演示。ServerlessServerless其实包含了两种概念&…

Java格式化输出

Java还提供了格式化输出的功能。为什么要格式化输出&#xff1f;因为计算机表示的数据不一定适合人来阅读。 如果要把数据显示成我们期望的格式&#xff0c;就需要使用格式化输出的功能。格式化输出使用System.out.printf()&#xff0c;通过使用占位符%?&#xff0c;printf()…

基于 abp vNext 和 .NET Core 开发博客项目 - 终结篇之发布项目

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…