StarBlog - 2023年底更新內容一覽

程式設計實驗室發表於2023-12-16

前言

先說一下我對 StarBlog 這個系列的文章的規劃吧，在 StarBlog 的 1.x 版本，我會同步更新兩個系列的文章

  • 部落格前臺+介面開發筆記 （即當前已釋出的這一系列文章）
  • 部落格Vue後臺開發筆記 （後續開始持續釋出）

最近很久沒有更新 StarBlog 系列的文章，事實上我之前已經把【部落格Vue後臺開發筆記】基本完成了，但我想把 StarBlog 1.x版本的功能完善之後，把【前臺+介面開發筆記】這系列完成之後，再開始更新【vue後臺開發筆記】

所以最近一段時間對本專案的後端、前端程式碼做了很多修改，包括效能最佳化、UI調整、功能完善等，本文做一個簡單的記錄。（當然最佳化和改進是無止境的，歡迎各位同學提交 issues 和 pr！）

前臺UI調整

本次更新我對前臺和後臺的UI都做了一些調整，對使用者來說，UI調整是感知程度最強的，所以放在第一個介紹。

文章列表

文章列表介面的調整包括右上角的文章排序選項和重新設計的文章列表。

舊的文章列表直接使用 Bootstrap4 樣式的 Card，card-header 裡放置文章的分類名稱，然後 card-body 裡是文章標題和梗概，醜是醜了點，但更主要的問題是沒有文章釋出時間等額外資訊，檢視起來不太直觀。舊版UI如下圖：

新的文章列表如圖，右上角增加了文章排序，可以根據標題、發表時間、更新時間進行正序/倒序的排序。

文章列表裡的元素也做了重新設計，加入了封面圖、發表時間、閱讀量等資訊元素，細節方面，每個文章卡片我加入了一點點陰影效果，文章梗概的文字使用了小號字型與 text-muted 樣式，更好地與標題區分開來。

導航欄

在前面的文章列表UI裡，可以看到頂部的導航欄也換了，這個修改沒法說比舊版更好，只能說為了自適應移動裝置做出了一些妥協。原本的導航欄還有圖示，有更豐富的視覺效果，但是對移動端的相容比較有限，各個導航選單沒法隱藏到側邊欄裡，會平鋪佔用大量空間；新版的就是普通的Bootstrap風格導航欄，平平無奇，但可以自適應得比較好。

自適應模式下的舊版導航欄

自適應模式下的新版導航欄

後臺UI調整

管理後臺是審美的重災區

目前使用的這套管理後臺，是基於我之前的一個 SpringCloud 專案的管理後臺修改而來

因為歷史問題，有一些比較奇怪和難看的樣式，在這次更新中，我一併修改了

相比之前，現在的後臺UI順眼多了😃

原本是這樣的

現在是這樣的

單純看主介面還不是很明顯

這次主要調整了背景顏色和簡化各個介面的佈局，可以看到導航欄也精簡了很多按鈕，只剩下一個使用者按鈕了。

全新的文章編輯介面

本次我重新設計了文章編輯介面

頂部增加了 breadcrumb

如果處在編輯模式，標題右側模仿部落格園的設計，新增了文章的連結，可以點選直接跳轉到文章頁面

底部是文章資訊與各種設定

新增的 slug 功能可以縮短文章的連結地址，這個功能比較小，所以之前沒有單獨寫一篇文章介紹。設定了 slug 之後，可以透過 starblog.com/p/slug 來訪問文章。

下方的文章選項，可以設定文章的發表狀態、標記、簡介等，沒什麼特別需要介紹的。

文章分類支援多層級選擇

文章管理

先看舊版的，難看的背景，莫名其妙的邊距，總結就是難看

新版介面，頁面乾淨很多，然後文章的篩選功能也增強了，現在除了搜尋和分類篩選，還可以根據發表狀態、文章標記來篩選文章。

其他頁面也一樣，是類似的修改思路，我就不一一貼圖片和介紹了。

上傳文章

原本整個UI都在左邊，各個控制元件的寬度也沒有一致，現在都改成居中了，控制元件樣式也做了統一。

這裡的文章分類選擇同樣支援多層級結構選擇。

動畫

大部分頁面之前都沒有什麼動畫，載入資料的時候是空白的，載入完成就直接呈現了，很生硬。

現在我給它們都加入了載入動畫，感覺舒服多了；還有一個是UI細節繼續調整。

這些動畫體現在一切需要網路互動的介面上，比如文章列表、儲存文章、上傳文章這些介面，實現也很簡單，ElementUI的大部分元件都可以透過新增 loading 屬性來實現載入動畫。

效能最佳化

效能瓶頸大部分在資料庫IO上，還有一些是在記憶體管理方面，主要是和部落格提供的圖片功能有關。

分頁

資料庫這塊的最佳化感知最強的是修改分頁的實現，之前我是直接使用了 X.PagedList 元件來實現分頁，但之前的寫法有點問題，先把全部資料載入出來之後再分頁，資料量大的時候效能就非常差了，現在全部改成了資料庫分頁。

目前使用的 ORM 是 FreeSQL ，可以透過 ISelect.Page 方法實現分頁，生成出來的 SQL 應該是帶類似 offset 和 limit 的，這是在資料庫層面實現的分頁，比讀取全部資料再分頁的效能會好很多。

PS：如果資料量更大的話，這種方式也不靈了，但目前這不在本專案的考慮範圍內。

X.PagedList 這個元件依然可以繼續使用，只不過只用它的後設資料就行，一個典型的程式碼塊如下

IPagedList<Post> pagedList = new StaticPagedList<Post>(
    await querySet.Page(param.Page, param.PageSize).Include(a => a.Category).ToListAsync(),
    param.Page, param.PageSize, Convert.ToInt32(await querySet.CountAsync())
);

使用的時候分別讀取其中的資料和分頁後設資料

return new ApiResponsePaged<Post> {
    Message = "Get posts list",
    Data = pagedList.ToList(),
    Pagination = pagedList.ToPaginationMetadata()
};

修改的程式碼量不大，遷移成本很小。

圖片庫

本專案提供了隨機圖片介面，經過實測這個功能會佔用比較多的記憶體，這可能是和這個功能的設計有關，因為需要根據傳入的引數來調整、裁剪圖片到合適的尺寸再返回，這個過程是在記憶體中實現的。

我看到 ImageSharp 的中介軟體裡提供了一種思路，透過在本地快取圖片，以後再遇到相同引數的圖片時就直接從檔案系統讀取返回，這可以節省一些記憶體，不過又帶來了新的問題，會佔用一些磁碟空間，特別是圖片庫很大的情況下，所以我目前還沒有用這種思路來改造這個功能。

PS：記憶體都白菜價了，不會有人的伺服器還沒128G記憶體吧？😃

業務邏輯

  • 儲存和新增文章時檢查slug是否可用
// 新建時
if (!string.IsNullOrWhiteSpace(dto.Slug) && !await _postService.CheckSlugAvailable(dto.Slug)) {
    return ApiResponse.BadRequest("指定的 slug 已經被其他文章使用！");
}

// 更新時
if (!string.IsNullOrWhiteSpace(dto.Slug)) {
    if (dto.Slug!= post.Slug && !await _postService.CheckSlugAvailable(dto.Slug)) {
        return ApiResponse.BadRequest("指定的 slug 已經被其他文章使用！");
    }
}
  • 文章列表介面終於完善了，可以根據是否管理員來篩選不同狀態的文章。（評論列表同樣）
// 已登入則設定為管理員模式
// todo 後續改成根據角色確定管理員
var adminMode = User.Identity?.IsAuthenticated ?? false;
var pagedList = await _postService.GetPagedList(param, adminMode);
  • 修改文章的時候可以同時修改文章標記和草稿狀態，這個太簡單就不附上程式碼了

bugfix

這沒啥好說的，詳見 github commits

不知不覺竟然已經有了 475 個 commits 了！真是太勤奮了（有刷commit的嫌疑）

小結

OK，就是這些啦，這估計也是2023年 StarBlog 專案的最後一次功能更新，接著我會繼續更新文章，爭取在今年裡把【部落格前臺+介面開發筆記】系列完結掉！~~（然後我就可以來做新專案了）~

PS：當然 StarBlog 也會持續更新的，目前已有初步的 2.x 版本開發計劃，我打算對架構進行一些調整以更好增加其他新功能，同時使用 Blazor 和 Next.js 來重寫兩套管理後臺，練手的同時看看 Blazor 和前端開發的各自優劣。

在這裡給大家拜個早年！敬請期待後續的新專案😃

相關文章