基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(九)
阿新 • • 發佈:2020-06-18
## 系列文章
1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)**
2. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 給專案瘦身,讓它跑起來](https://www.cnblogs.com/meowv/p/12896898.html)**
3. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 完善與美化,Swagger登場](https://www.cnblogs.com/meowv/p/12909558.html)**
4. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 資料訪問和程式碼優先](https://www.cnblogs.com/meowv/p/12913676.html)**
5. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查](https://www.cnblogs.com/meowv/p/12916613.html)**
6. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 統一規範API,包裝返回模型](https://www.cnblogs.com/meowv/p/12924409.html)**
7. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 再說Swagger,分組、描述、小綠鎖](https://www.cnblogs.com/meowv/p/12924859.html)**
8. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub,用JWT保護你的API](https://www.cnblogs.com/meowv/p/12935693.html)**
9. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 異常處理和日誌記錄](https://www.cnblogs.com/meowv/p/12943699.html)**
10. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用Redis快取資料](https://www.cnblogs.com/meowv/p/12956696.html)**
11. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 整合Hangfire實現定時任務處理](https://www.cnblogs.com/meowv/p/12961014.html)**
12. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 用AutoMapper搞定物件對映](https://www.cnblogs.com/meowv/p/12966092.html)**
13. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(一)](https://www.cnblogs.com/meowv/p/12971041.html)**
14. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(二)](https://www.cnblogs.com/meowv/p/12974439.html)**
15. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰(三)](https://www.cnblogs.com/meowv/p/12980301.html)**
16. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(一)](https://www.cnblogs.com/meowv/p/12987623.html)**
17. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(二)](https://www.cnblogs.com/meowv/p/12994914.html)**
18. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(三)](https://www.cnblogs.com/meowv/p/13039883.html)**
19. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(四)](https://www.cnblogs.com/meowv/p/13043084.html)**
20. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇(五)](https://www.cnblogs.com/meowv/p/13046603.html)**
21. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(一)](https://www.cnblogs.com/meowv/p/13061975.html)**
22. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(二)](https://www.cnblogs.com/meowv/p/13065295.html)**
23. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(三)](https://www.cnblogs.com/meowv/p/13081035.html)**
24. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(四)](https://www.cnblogs.com/meowv/p/13088303.html)**
25. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(五)](https://www.cnblogs.com/meowv/p/13096000.html)**
26. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(六)](https://www.cnblogs.com/meowv/p/13124303.html)**
27. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(七)](https://www.cnblogs.com/meowv/p/13124533.html)**
28. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列(八)](https://www.cnblogs.com/meowv/p/13124967.html)**
---
終於要接近尾聲了,上一篇基本上將文章模組的所有功能都完成了,整個部落格頁面也都完成了,本篇主要來美化幾個地方,修修補補。
## 編輯器主題切換
當我們新增和編輯文章的時候,預設編輯器是白色的,如果點選了頭部切換主題按鈕,我想要把編輯器主題顏色也做相應的改變該如何去實現呢?
剛好,`editor.md`是支援主題切換的,這就比較舒服了,直接按照要求呼叫對應的方法即可。
在`app.js`的`renderEditor`函式中我們已經自定義了三個引數`theme`、`editorTheme`、`previewTheme`,這三個引數就是來改變編輯器主題顏色的。
還是將值存在localStorage中,和我們部落格的主題切換一樣,這裡叫`editorTheme`。
```javascript
theme: localStorage.editorTheme || 'default',
editorTheme: localStorage.editorTheme === 'dark' ? 'pastel-on-dark' : 'default',
previewTheme: localStorage.editorTheme || 'default',
```
預設從`localStorage`中取資料,如果沒取到的話,給對應的預設值。第二個引數有點特殊,用了一個三元表示式給不同的值。
然後在主題切換的時候也對編輯器做相應的調整即可。
開啟`Header.razor`頭部元件,找到`SwitchTheme()`切換主題的方法,新增一句`await Common.SwitchEditorTheme(currentTheme);`。
```csharp
///
/// 切換主題
///
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`,用來判斷是切換黑的還是白的。
```csharp
///
/// 切換編輯器主題
///
///
///
public async Task SwitchEditorTheme(string currentTheme)
{
var editorTheme = currentTheme == "Light" ? "default" : "dark";
await SetStorageAsync("editorTheme", editorTheme);
await InvokeAsync("window.func.switchEditorTheme");
}
```
切換主題之前拿到當前URI物件,判斷當前請求的連結是否是新增和更新文章的那個頁面,即"/admin/post",才去執行切換編輯器主題的方法,當不是這個頁面的時候,編輯器是沒有渲染出來的,如果也執行這段程式碼就會報錯。
去看看效果。
![1](https://img2020.cnblogs.com/blog/891843/202006/891843-20200615204827795-1896882776.gif)
## 文章詳情頁美化
現在的文章詳情頁是沒有將markdown格式渲染出來的,這裡還是使用`editor.md`提供的方法,因為需要載入幾個js檔案,然後才能渲染樣式。
所以還是在`app.js`新增一段程式碼。
```javascript
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`最終的程式碼。
```csharp
@page "/post/{year:int}/{month:int}/{day:int}/{name}"
@if (post == null)
{
}
else
{
@if (post.Success)
{
var _post = post.Result;
@((MarkupString)_post.Html)
}
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");
}
}
```
![2](https://img2020.cnblogs.com/blog/891843/202006/891843-20200615210615733-982554725.gif)
到這裡整個開發工作便結束了,這裡只是一個小小的實戰系列記錄,沒有深層次的剖析研究Blazor的所有使用方式。
如果本系列對你有些許幫助,便是我最大的收穫,歡迎大家關注我的公眾號:阿星Plus。
開源地址:https://github.com/Meowv/Blog
@_post.Title
Author: @_post.Author Date: @_post.CreationTime Category:@_post.Category.CategoryNameAuthor: @_post.Author
Permalink: https://meowv.com/post@_post.Url
License: 本文采用 知識共享 署名-非商業性使用-禁止演繹(CC BY-NC-ND)國際許可協議 進行許可