困在家里的这些天,我用flutter完成了我的个人博客

开头

想必很多小伙伴们都有写博客的习惯,这其中大部分无法自己自定义博客样式的,应该都和我一样,使用的类似与hexo上各种各样好看的博客模版吧。

应该也有很多小伙伴与我一样,不具备前端开发能力,但是想要从头到脚自定义一个属于自己的个人博客,可到了最后也无从下手。

而不便出门的这些天,无聊的我,躺在床上思考人生的同时,也决定使用flutter web 去完成我这个“蓄谋已久”的计划了。

行动

因为flutter web的不成熟,所以很多第三方库都处于起步甚至缺失的状态。于是我不打算让这个博客有什么花里胡哨的功能,这样会轻松不少。

而在此前,我已经在sketch上完成了博客的初步设计

博客的分类设计也参考了我正在使用的hexo主题

UI确定后,对照UI进行设计即可。

迁移

界面已经用flutter实现了,可是之前的博客系统和现在用flutter写的完全不一样,如何把之前的markdown文件迁移到现在的博客系统中来呢?

在思考方案的同时,我还对flutter web进行了测试,看一看类似于图片的文件能否跟随项目一起打包。

测试后发现,在flutter中对某个文件夹进行声明,比如 assets ,就可以将该文件中的内容一起打包了,这点和在移动平台上是一致的。

同时,‘dart:io’ 库无法在flutter web中正常使用,这意为着无法在web中进行类似于在移动端上的文件操作。

所以我选择通过本地编写dart文件操作代码,来对markdown文件进行批量处理,同时将生成后的文件存入 assets 目录,这样一同发布即可

部署

flutter web编译后的产物要放到哪里呢?

因为之前我使用的 hexo + github page 来部署的个人博客,所以这次就是 flutter web + github page

具体操作可以参考这篇文章:

Flutter Web — Github Actions-Github Pages

结合目前的 github action ,可以很方便的做到推送即发布 & 更新

使用flutter web完成个人博客的期间,的确是因为flutter web本身的不成熟,遇到过不少的问题。

下面就来一一介绍

无法识别 assets 目录中的中文文件

在使用 rootBundle.loadString() 加载 assets 目录中的 中文markdown文件 时,会出现无法识别中文的问题,具体可以查看这个issue:

cannot load assets file starting with “#” from the rootBundle after install

目前看来在 flutter 1.14.7-pre.58 版本这个问题已经得到了修复。

markdwon的展示效果不够好

目前 flutter_markdown 插件对于web端的显示效果不如在移动端上的协调。后续要看开发者是否会进一步去更新了。

字体文件过大

可以明显的看到,个人博客中是使用到了特殊字体的,不同于英文字体只有26个字母,中文字体的汉字非常多,所以字体文件非常大。这对导致网络不佳的情况下加载速度会慢很多

目前还没有一个比较简便的压缩办法,所以解决办法是加载网页的时候异步加载字体

总结

如果想要把 flutter web 拿去进行生产还为时尚早,因为它的表现还不尽如人意,但是如果做一点简单的东西,还是可以让没有前端开发知识的小伙伴获得极大的满足感。比如像我一样写一个个人博客之类的。

整体感受就是这样吧,下面是博客地址:

个人博客

然后是github地址,有感兴趣的小伙伴可以多多交流:

flutter-blog

https://juejin.im/post/5e37af4ee51d4501fc50dc54

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论