introduction
在博客网站的开发征程中，站长可谓是一路披荆斩棘。从最初的构思到实践，先后涉足了多种开发技术，包括 MVC、Razor Pages、Vue、Go、Blazor 等。在这漫长的过程中，网站版本更迭近 10 次，每一个版本都凝聚着站长的心血与探索，这段充满挑战的历程详细记录于 分享我做 Dotnet9 博客网站时积累的一些资料 - 码坊。
Today, after careful consideration and practical testing, the blog site has once again returned to Blazor, adopting static SSR technology and incorporating the stylish and practical Ant Design design style. This series of improvements has made the website's access speed a qualitative leap, as if injecting new vitality into the website. The website has been successfully launched.
- Website: dotnet9.com
the power of open source
Here, I would like to thank the following open source projects:
- Known: https://known.org.cn/
This is an open source enterprise-level development framework carefully built based on Blazor technology. With its excellent features of low-code, cross-platform, and out-of-the-box, it breaks the limitations of traditional development and truly realizes an efficient mode of running one code and multiple places. Its core value lies in efficiency and flexibility, which brings new changes to the software development model. It is like a magical key that helps developers easily open the door to digital transformation, calmly cope with various challenges, help the business achieve vigorous development, and open a new chapter.
The source code of this site is also open source:
- Warehouse: github.com/dotnet9/CodeWF
Code Workshop is a website developed using. NET 9 Blazor. There are technical articles, open source project introductions, and online tools to use: Code Workshop-Articles enlighten, tools help
website technology
网站是基于 Known 的开源项目 KnownCMS 搭建：
KnownCMS is a content management system developed based on Blazor. The front end uses Blazor static components and the background uses the Known framework.
因为站长的网站只是一个博客文章展示、在线工具使用，平时文章编辑也是使用 Typora 及 VS Code 搭配使用，网站核心数据文件存储于 Assets.Dotnet9 仓库，所以站长去除了暂时不使用的后台管理相关功能，项目源码只有 3 个工程：
- AntBlazor: The webmaster has basically not changed the project. It is basically an Ant Design-style Blazor static component encapsulation provided by Known, such as basic components such as forms, tags, and buttons.
- CodeWF: Razor class library, which mainly implements the encapsulation of website documents and blog pages. Currently, there are tools that are not yet online, and another library will be opened to write online tools according to this library architecture;
- WebSite: The portal project of the website, integrating CodeWF and AntBlazor projects, and of course also includes some page packages (home page, about, timeline, etc.), Web API controllers, etc.
| AntBlazor | CodeWF | WebSite |
 |
 |
 |
** Tips: What is a static SSR? **
静态 SSR 与 Blazor Server 或 Blazor Client（WASM）有着显著的区别，微软文档 的说明：
Static SSR is a unique operating mode where components run on the server side while the server processes incoming HTTP requests. During this process, Blazor cleverly renders the component as HTML and includes it in the response content. When the response is sent, the server-side components and corresponding renderer state are automatically discarded, and only pure HTML remains on the browser side.
The advantages of this model are manifold. First, it greatly reduces hosting costs and reduces the financial burden on website operators. Secondly, it has excellent scalability and can cope with both small-scale user access and large-scale traffic shocks. This is due to the fact that it eliminates the need for continuous server resources to maintain component state, saving significant server resources. Moreover, it frees off the shackles of a continuous connection between the browser and the server, while also eliminating the need to load WebAssembly in the browser, further optimizing performance.
From a more easy-to-understand perspective, static SSR and Blazor Server belong to the category of server-side rendering, but they differ in terms of interaction capabilities. In static SSR mode, the front-end HTML control cannot use C#event method mapping like in Blazor Server, but it can still use JS functions to achieve interaction. For example, the click event of button can be mapped to JS functions for processing. Fortunately, important functions such as C#entity binding and service injection can still be used normally in static SSR. This feature makes static SSR a requirement for SEO (Search Engine Optimization), which uses a series of technical means to improve a website's ranking in search engines, thereby increasing website traffic. The core is to ensure that website content can be effectively crawled by search engines to obtain more traffic.) It is an ideal choice for a front-end website. The following is a static SSR component definition (article details basic information component UPostCount.raozr):
@inject IOptions<SiteOption>
SiteOption
<div class="counts">
@if (Post?.Lastmod != null) {
<span>更新于@(Post?.Lastmod?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
} else {
<span>创建于@(Post?.Date?.ToString("yyyy-MM-dd HH:mm:ss"))</span>
}
<span style="margin:0 5px;">|</span>
<span class="author"
>@(string.IsNullOrWhiteSpace(Post?.Author) ? SiteOption.Value.Owner :
Post!.Author)</span
>
@if (ShowEdit) {
<span style="margin:0 5px;">|</span>
<a
href="@ConstantUtil.GetPostGitHubPath(SiteOption.Value.RemoteAssetsRepository, Post)"
target="_blank"
>我要编辑、留言</a
>
}
</div>
@code { [Parameter] public BlogPost Post { get; set; } [Parameter] public bool
ShowEdit { get; set; } = true; }</SiteOption
>
The effects are as follows:
Website function description
home
- Website: dotnet9.com
Like most websites, first display the website slogan "Code Workshop: Develop using. NET 9 Web API + Blazor. There are technical articles, open source project introductions and online tools to help you program efficiently. ", then display the featured article block, followed by the featured tool block (under development), and finally, friendship links, page endings, etc.:
document
Here are some of the webmaster's open source projects:
- Website: dotnet9.com/project
The following is a brief introduction to some of the projects
- CodeWF
这是本站的源码仓库，可点击链接查看。
- CodeWF.EventBus
它适用于进程内事件传递（无其他外部依赖），功能与 MediatR 类似，可点击链接查看。
- CodeWF.EventBus.Socket
CodeWF.EventBus.Socket 是一个轻量级、基于 Socket 的分布式事件总线系统，旨在简化分布式架构中的事件通信。它允许进程之间通过发布 / 订阅模式进行通信，无需依赖外部消息队列服务。可点击链接查看。
- CodeWF.NetWeaver
CodeWF.NetWeaver 是一个简洁而强大的 C#库，支持 AOT，用于处理 TCP 和 UDP 数据包的组包和解包操作。可点击链接查看。
- CodeWF.Toolbox
CodeWF Toolbox 使用 Avalonia 开发的跨平台工具箱，使用了 Prism 作为模块化开发框架，支持 AOT 发布，可作为 Avalonia 项目学习。可点击链接查看。
- CodeWF.Tools
这里收集、分享了常用工具类，可点击链接查看。
- Assets.Dotnet9
这是本站的核心数据仓库，可点击链接查看。
blog
- Website: dotnet9.com/post
The blog page is a standard technical blog style style and is divided into three columns: left, center and right. The left column is a classified list of articles. Click to browse the article list in the middle. On the right side are website statistics, webmaster recommendations, etc.:
点击列表中的文章可浏览文章详细内容，在此要感谢 VleaStwo (Lee) 大佬提供的 TOC 功能：这个功能使用户能够快速定位文章的重点内容，提高阅读效率。
** You can modify all articles **
If the article contains typos, language errors, or misleading, or you have any additions, you can click on "I want to edit and leave a message" in the top right corner of the page to do a PR. Thank you very much!
最新一个对文章 . NET 跨平台客户端框架 - Avalonia UI 的 PR#4：
感谢网友 hjkl950217 (长空 X)
summary
During the development process of the website, the webmaster continued to explore and try, learned a large number of tutorials and open source projects, and was very useful and grateful to the friends and teachers who provided help.
另外，VleaStwo大佬开了一个 Masa Blazor 分支，欢迎有兴趣的朋友前来 PR 或交流：
Finally, post relevant links so that everyone can understand and communicate:
- Source code for this site (Ant Design style): github.com/dotnet9/codewf
- VleaStwo大佬分支(Masa Blazor 风格)：https://github.com/VleaStwo/CodeWF
- Known：https://known.org.cn
- Ant Design Blazor：https://antblazor.com/
- Masa Blazor：https://masastack.com/blazor