自学软件开发需要多久,陕西整站关键词自然排名优化,建设一个校园网站的可行性,wordpress 模板分页系列文章使用 abp cli 搭建项目给项目瘦身#xff0c;让它跑起来完善与美化#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API#xff0c;包装返回模型再说Swagger#xff0c;分组、描述、小绿锁接入GitHub#xff0c;用JWT保护你的API异常处理和… 系列文章使用 abp cli 搭建项目给项目瘦身让它跑起来完善与美化Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API包装返回模型再说Swagger分组、描述、小绿锁接入GitHub用JWT保护你的API异常处理和日志记录使用Redis缓存数据集成Hangfire实现定时任务处理用AutoMapper搞定对象映射定时任务最佳实战一定时任务最佳实战二定时任务最佳实战三博客接口实战篇一博客接口实战篇二博客接口实战篇三博客接口实战篇四博客接口实战篇五Blazor实战系列一Blazor实战系列二Blazor实战系列三Blazor实战系列四Blazor实战系列五Blazor实战系列六Blazor实战系列七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 namecurrentTheme/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 relstylesheet /if (post null)
{Loading /
}
else
{if (post.Success){var _post post.Result;article classpost-wrapheader classpost-headerh1 classpost-title_post.Title/h1div classpost-metaAuthor: a itempropauthor relauthor hrefjavascript:;_post.Author/aspan classpost-timeDate: a hrefjavascript:;_post.CreationTime/a/spanspan classpost-categoryCategory:a href/category/_post.Category.DisplayName/_post.Category.CategoryName/a/span/div/headerdiv classpost-content idcontent((MarkupString)_post.Html)/divp classpost-copyrightp classcopyright-itemspanAuthor:/spanspan_post.Author/span/pp classcopyright-itemspanPermalink:/spanspana href/post_post.Urlhttps://meowv.com/post_post.Url/a/span/pp classcopyright-itemspanLicense:/spanspan本文采用a target_blank hrefhttp://creativecommons.org/licenses/by-nc-nd/4.0/ 知识共享 署名-非商业性使用-禁止演绎(CC BY-NC-ND)国际许可协议 /a进行许可/span/p/pp classpost-tagsdivspanTag(s):/spanspan classtagif (_post.Tags.Any()){foreach (var tag in _post.Tags){a href/tag/tag.DisplayName/# tag.TagName/a}}/span/divdiva onclick(async () await Common.NavigateTo(/posts))back/aspan· /spana href/home/a/div/pp classpost-navif (_post.Previous ! null){a classprevrelprevonclick(async () await FetchData(_post.Previous.Url))href/post_post.Previous.Url_post.Previous.Title/a}if (_post.Next ! null){a classnextrelnextonclick(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/// /summaryprivate string url $/{year}/{(month 10 ? month.ToString() : $0{month})}/{(day 10 ? day.ToString() : $0{day})}/{name}/;/// summary/// 文章详情数据/// /summaryprivate ServiceResultPostDetailDto post;/// summary/// 初始化/// /summaryprotected override async Task OnInitializedAsync(){await FetchData(url);}/// summary/// 请求数据渲染页面/// /summary/// param nameurl/param/// returns/returnsprivate async Task FetchData(string url, bool isPostNav false){post await Http.GetFromJsonAsyncServiceResultPostDetailDto($/blog/post?url{url});await Common.InvokeAsync(window.func.renderMarkdown);}
}
到这里整个开发工作便结束了这里只是一个小小的实战系列记录没有深层次的剖析研究Blazor的所有使用方式。如果本系列对你有些许帮助便是我最大的收获欢迎大家关注我的公众号阿星Plus。开源地址https://github.com/Meowv/Blog
