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

切换主题之前拿到当前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="http://www.likecs.com/editor.md/css/editormd.preview.css" /> @if (post == null) { <Loading /> } else { @if (post.Success) { var _post = post.Result; <article> <header> <h1>@_post.Title</h1> <div> Author: <a href="javascript:;">@_post.Author</a> <span> Date: <a href="javascript:;">@_post.CreationTime</a> </span> <span> Category:<a href="http://www.likecs.com/category/@_post.Category.DisplayName/">@_post.Category.CategoryName</a> </span> </div> </header> <div> @((MarkupString)_post.Html) </div> <section> <p> <span>Author:</span> <span>@_post.Author</span> </p> <p> <span>Permalink:</span> <span><a href="http://www.likecs.com/post@_post.Url">https://meowv.com/post@_post.Url</a></span> </p> <p> <span>License:</span> <span>本文采用<a target="_blank" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"> 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 </a>进行许可</span> </p> </section> <section> <div> <span>Tag(s):</span> <span> @if (_post.Tags.Any()) { @foreach (var tag in _post.Tags) { <a href="http://www.likecs.com/tag/@tag.DisplayName/"># @tag.TagName</a> } } </span> </div> <div> <a @onclick="@(async () => await Common.NavigateTo("/posts"))">back</a> <span>· </span> <a href="http://www.likecs.com/">home</a> </div> </section> <section> @if (_post.Previous != null) { <a @onclick="@(async () => await FetchData(_post.Previous.Url))" href="http://www.likecs.com/post@_post.Previous.Url">@_post.Previous.Title</a> } @if (_post.Next != null) { <a @onclick="@(async () => await FetchData(_post.Next.Url))" href="http://www.likecs.com/post@_post.Next.Url"> @_post.Next.Title </a> } </section> </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></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