困在家裏的這些天，我用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