基于 abp vnext 和 .net core 开发博客项目 -凯发ag旗舰厅登录网址下载

基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（九）

转载于：https://github.com/meowv/blog

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

编辑器主题切换

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

刚好，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);。

///
/// 切换主题
///
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，用来判断是切换黑的还是白的。

///
/// 切换编辑器主题
///
///
///
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}”

@if (post == null)
{

}
else
{
@if (post.success)
{
var _post = post.result;

author: date: category:

@((markupstring)_post.html)

author:@_post.author

permalink:

license:本文采用进行许可

tag(s):@if (_post.tags.any()){@foreach (var tag in _post.tags){}}

· 凯发ag旗舰厅登录网址下载

@if (_post.previous != null){}@if (_post.next != null){}

} else { }

}

@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; }///

/// url ///

private string url => $"/{year}/{(month >= 10 ? month.tostring() : $"0{month}")}/{(day >= 10 ? day.tostring() : $"0{day}")}/{name}/";///

/// 文章详情数据 ///

private serviceresult post;///

/// 初始化 ///

protected override async task oninitializedasync() {await fetchdata(url); }///

/// 请求数据，渲染页面 ///

/// /// private async task fetchdata(string url, bool ispostnav = false) {post = await http.getfromjsonasync>($"/blog/post?url={url}");await common.invokeasync("window.func.rendermarkdown"); }

}

图片

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

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

开源地址：https://github.com/meowv/blog

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。