Jx.Cms开发笔记(七)-升级BootstrapBlazor到6.9.x

 jx   2022-09-04 08:18:54   755 人阅读  0 条评论

由于BootstrapBlazor升级到6.9以后的升级还是非常大的,比如图标库升级到了6.1.2,bs升级到了5.2.0。所以这里记录一下升级过程。

升级BootstrapBlazor主程序

直接升级BootstarpBlazor到最新版本,没有错误,但是我们会发现我们的BootstrapBlazor自带图标全部变成方块了。这就需要升级图标库。

升级图标库

由于这个项目使用BootstrapBlazor的时间比较早,当时还没有BootstrapBlazor.Fontawasome的扩展库,我们是直接内部引用了fontawasome的css库。

在现在看已经不合时宜了,因为BootstrapBlazor已经有了扩展库,我们可以直接用扩展库来处理我们的图标库,随时跟着项目升级走。

所以我们直接从NuGet中安装BootstrapBlazor.FontAwasome。然后参照官网的安装说明,将我们_AdminHost.cshtml中的<link rel="stylesheet" href="/Admin/css/font-awesome.min.css">改为引用NuGet包中的<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">

这时候我们重启项目,发现BootstrapBlazor自带的图标已经全部正常了,但是我们菜单上有部分图标异常,比如我们的文章列表图标,需要由fa fa-newspaper-o修改为fa-solid fa-newspaper但是两者样式也不完全相同。同样,我们的页面列表图标也需要由fa fa-file-o修改为fa-regular fa-file

其他的图标目前来看正常,后期可能会有进一步修改。

清理原来的图标文件

由于我们的图标css直接由NuGet来提供了,所以我们原来的图标库相关的css还有font即可直接删除掉。


这里我们wwwwroot/Admin下的css文件夹和fonts文件夹就可以完全删除了。


这样我们就把BootstrapBlazor升级完成了。

本文地址:http://www.jvxiang.com/Post?id=58
版权声明:本文为原创文章,版权归 jx 所有,欢迎分享本文,转载请保留出处!

 发表评论

{if $option['ZC_COMMENT_VERIFY_ENABLE']}

{/if}


表情

还没有留言,还不快点抢沙发?