我的博客网站为什么又回归Blazor了

程序员有二十年 2024-11-08 10:59:02
引言

在博客网站的开发征程中,站长可谓是一路披荆斩棘。从最初的构思到实践,先后涉足了多种开发技术,包括 [MVC](ASP.NET Core MVC 概述 | Microsoft Learn[1])、[Razor Pages](ASP.NET Core 中的 Razor Pages 介绍 | Microsoft Learn[2])、[Vue](Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org "Vue"))、[Go](The Go Programming Language (google.cn "Go"))、[Blazor](ASP.NET Core Blazor | Microsoft Learn[3]) 等。在这漫长的过程中,网站版本更迭近 10 次,每一个版本都凝聚着站长的心血与探索,这段充满挑战的历程详细记录于 分享我做Dotnet9博客网站时积累的一些资料 - 码界工坊[4]。

如今,经过深思熟虑与实践检验,博客网站再次回归 Blazor,并采用了静态 SSR 技术,同时融入了时尚且实用的 Ant Design 设计风格。这一系列的改进使得网站的访问速度得到了质的飞跃,如同给网站注入了新的活力,目前网站已经成功上线。

网址:https://dotnet9.com

开源的力量

在此,要感谢以下开源项目:

Known: https://known.org.cn/

这是一个开源企业级开发框架,基于 Blazor 技术精心打造。它以低代码、跨平台、开箱即用的卓越特性,打破了传统开发的局限,真正实现了一处代码,多处运行的高效模式。其核心价值在于高效与灵活,为软件开发模式带来了全新的变革,就像一把神奇的钥匙,帮助开发者轻松开启数字化转型的大门,从容应对各种挑战,助力业务实现蓬勃发展,开启崭新篇章。

本站源码也是开源:

仓库:https://github.com/dotnet9/CodeWF

码界工坊是使用.NET 9 Blazor开发的一个网站,这里有技术文章,有开源项目介绍,有在线工具使用: 码界工坊—文章启智,工具助力

网站技术

网站是基于 Known[5] 的开源项目 KnownCMS[6] 搭建:

KnownCMS是基于Blazor开发的一个内容管理系统,前台使用Blazor静态组件,后台使用Known框架。

因为站长的网站只是一个博客文章展示、在线工具使用,平时文章编辑也是使用Typora及VS Code搭配使用,网站核心数据文件存储于 Assets.Dotnet9[7] 仓库,所以站长去除了暂时不使用的后台管理相关功能,项目源码只有3个工程:

AntBlazor:站长基本没有改过该工程,基本是由Known提供的Ant Design风格Blazor静态组件封装,比如表单、标签、按钮之类的基本组件等。CodeWF:Razor类库,主要实现网站文档、博文页面封装,目前有工具还未上线,后面会按此库架构另开一个库写在线工具;WebSite:网站的入口工程,整合CodeWF和AntBlazor工程,当然也包括部分页面封装(首页、关于、时间线等)、Web API控制器等AntBlazorCodeWFWebSite

小知识:什么是静态 SSR?

静态 SSR 与 Blazor Server 或 Blazor Client(WASM)有着显著的区别,微软文档[8] 的说明:

静态 SSR 是一种独特的运行模式,在服务器处理传入 HTTP 请求时,组件在服务器端运行。在此过程中,Blazor 会将组件巧妙地呈现为 HTML,并将其包含在响应内容之中。当响应发送完成后,服务器端组件和相应的呈现器状态会被自动丢弃,最终在浏览器端仅留存纯净的 HTML。

这种模式的优势是多方面的。首先,它极大地降低了托管成本,为网站运营者减轻了经济负担。其次,它具有出色的可缩放性,无论是面对小规模的用户访问,还是大规模的流量冲击,都能应对自如。这得益于它无需持续的服务器资源来维持组件状态,从而节省了大量服务器资源。而且,它摆脱了浏览器和服务器之间持续连接的束缚,同时也无需在浏览器中加载 WebAssembly,进一步优化了性能。

从更通俗易懂的角度来看,静态 SSR 与 Blazor Server 同属服务端渲染的范畴,但它在交互能力方面有所不同。在静态 SSR 模式下,前端的 HTML 控件不能像在 Blazor Server 中那样使用 C# 事件方法映射,不过它仍然可以借助 JS 函数来实现交互,例如 button 的 click 事件可以映射 JS 函数进行处理。值得庆幸的是,C# 实体绑定、服务注入等重要功能在静态 SSR 中依然可以正常使用。这一特性使得静态 SSR 成为需要 SEO(搜索引擎优化,即通过一系列技术手段提升网站在搜索引擎中的排名,进而增加网站流量。其核心在于确保网站内容能够被搜索引擎有效抓取,从而获得更多流量)的前台网站的理想选择。以下是一个静态 SSR 组件定义(文章详情基本信息组件 UPostCount.raozr):

@inject IOptions<SiteOption> SiteOption<div>效果如下:

网站功能说明首页网址:https://dotnet9.com

和大多数网站一样,先展示网站宣传语 ”码界工坊:使用.NET 9 Web API + Blazor开发。有技术文章、开源项目介绍和在线工具,助力高效编程。“,然后展示特色文章块,后面会加上特色工具块(正在开发中),最后是友情链接、页尾等:

文档

这里介绍了站长部分开源项目:

网址:https://dotnet9.com/doc

下面是部分项目简介

CodeWF

这是本站的源码仓库,可点击链接[9]查看。

CodeWF.EventBus

它适用于进程内事件传递(无其他外部依赖),功能与 MediatR 类似,可点击链接[10]查看。

CodeWF.EventBus.Socket

CodeWF.EventBus.Socket 是一个轻量级、基于 Socket 的分布式事件总线系统,旨在简化分布式架构中的事件通信。它允许进程之间通过发布 / 订阅模式进行通信,无需依赖外部消息队列服务。可点击链接[11]查看。

CodeWF.NetWeaver

CodeWF.NetWeaver 是一个简洁而强大的C#库,支持AOT,用于处理TCP和UDP数据包的组包和解包操作。可点击链接[12]查看。

CodeWF.Toolbox

CodeWF Toolbox 使用Avalonia开发的跨平台工具箱,使用了Prism做为模块化开发框架,支持AOT发布,可做为Avalonia项目学习。可点击链接[13]查看。

CodeWF.Tools

这里收集、分享了常用工具类,可点击链接[14]查看。

Assets.Dotnet9

这是本站的核心数据仓库,可点击链接[15]查看。

博客网址:https://dotnet9.com/bbs/

博客页面是标准的技术博客风格样式,分为左、中、右三栏。左边栏是文章分类列表,点击可在中间分页浏览文章列表,右侧则是网站统计、站长推荐等内容:

点击列表中的文章可浏览文章详细内容,在此要感谢[VleaStwo](VleaStwo (Lee "VleaStwo"))大佬提供的TOC功能:这个功能使用户能够快速定位文章的重点内容,提高阅读效率。

所有文章您都可以修改

如果文章有错别字、语病,或有误导的地方,或您有什么补充,可点击页头右上角“我要编辑、留言”进行PR,十分感谢!

最新一个对文章 . NET 跨平台客户端框架 - Avalonia UI[16] 的 PR#4[17]:

感谢网友 hjkl950217 (长空X)[18]

总结

在网站的开发历程中,站长不断探索尝试,学习了大量的教程和开源项目,非常受用、非常感谢提供帮助的朋友和老师。

另外,VleaStwo[19]大佬开了一个 Masa Blazor分支[20],欢迎有兴趣的朋友前来 PR 或交流:

最后,贴上相关链接,大家可以了解、交流:

本站源码(Ant Design风格):https://github.com/dotnet9/codewfVleaStwo[21]大佬分支(Masa Blazor风格):https://github.com/VleaStwo/CodeWFKnown:https://known.org.cnAnt Design Blazor:https://antblazor.com/Masa Blazor:https://masastack.com/blazor参考资料[1]

MVC: https://learn.microsoft.com/zh-cn/aspnet/core/mvc/overview?view=aspnetcore-9.0

[2]

Razor Pages: https://learn.microsoft.com/zh-cn/aspnet/core/razor-pages/?view=aspnetcore-9.0&tabs=visual-studio

[3]

Blazor: https://learn.microsoft.com/zh-cn/aspnet/core/blazor/?view=aspnetcore-9.0

[4]

分享我做Dotnet9博客网站时积累的一些资料 - 码界工坊: https://dotnet9.com/bbs/post/2022/3/Share-some-learning-materials-I-accumulated-when-I-was-a-blog-website

[5]

Known: https://known.org.cn/

[6]

KnownCMS: https://gitee.com/known/known-cms

[7]

Assets.Dotnet9: https://github.com/dotnet9/Assets.Dotnet9

[8]

微软文档: https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/class-libraries-and-static-server-side-rendering?view=aspnetcore-9.0

[9]

链接: https://github.com/dotnet9/CodeWF

[10]

链接: https://github.com/dotnet9/CodeWF.EventBus

[11]

链接: https://github.com/dotnet9/CodeWF.EventBus.Socket

[12]

链接: https://github.com/dotnet9/CodeWF.NetWeaver

[13]

链接: https://github.com/dotnet9/CodeWF.Toolbox

[14]

链接: https://github.com/dotnet9/CodeWF.Tools

[15]

链接: https://github.com/dotnet9/Assets.Dotnet9

[16]

. NET 跨平台客户端框架 - Avalonia UI: https://dotnet9.com/bbs/post/2022/11/one-of-the-best-choices-for-dotnet-cross-platform-frameworks-avalonia-ui

[17]

PR#4: https://github.com/dotnet9/Assets.Dotnet9/pull/4

[18]

hjkl950217 (长空X): https://github.com/hjkl950217

[19]

VleaStwo: https://github.com/VleaStwo

[20]

Masa Blazor分支: https://github.com/VleaStwo/CodeWF

[21]

VleaStwo: https://github.com/VleaStwo

0 阅读:0

程序员有二十年

简介:感谢大家的关注