系列文章
- 基于 abp vNext 和 .NET Core 開發博客專案 - 使用 abp cli 搭建專案
- 基于 abp vNext 和 .NET Core 開發博客專案 - 給專案瘦身，讓它跑起來
- 基于 abp vNext 和 .NET Core 開發博客專案 - 完善與美化，Swagger登場
- 基于 abp vNext 和 .NET Core 開發博客專案 - 資料訪問和代碼優先
- 基于 abp vNext 和 .NET Core 開發博客專案 - 自定義倉儲之增刪改查
- 基于 abp vNext 和 .NET Core 開發博客專案 - 統一規范API，包裝回傳模型
- 基于 abp vNext 和 .NET Core 開發博客專案 - 再說Swagger，分組、描述、小綠鎖
- 基于 abp vNext 和 .NET Core 開發博客專案 - 接入GitHub，用JWT保護你的API
- 基于 abp vNext 和 .NET Core 開發博客專案 - 例外處理和日志記錄
- 基于 abp vNext 和 .NET Core 開發博客專案 - 使用Redis快取資料
- 基于 abp vNext 和 .NET Core 開發博客專案 - 集成Hangfire實作定時任務處理
- 基于 abp vNext 和 .NET Core 開發博客專案 - 用AutoMapper搞定物件映射
- 基于 abp vNext 和 .NET Core 開發博客專案 - 定時任務最佳實戰（一）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 定時任務最佳實戰（二）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 定時任務最佳實戰（三）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 博客介面實戰篇（一）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 博客介面實戰篇（二）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 博客介面實戰篇（三）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 博客介面實戰篇（四）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 博客介面實戰篇（五）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（一）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（二）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（三）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（四）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（五）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（六）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（七）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（八）
- 基于 abp vNext 和 .NET Core 開發博客專案 - Blazor 實戰系列（九）
- 基于 abp vNext 和 .NET Core 開發博客專案 - 終結篇之發布專案
上一篇完成了博客的主題切換，選單和二維碼的顯示與隱藏功能，本篇繼續完成分頁查詢文章串列的資料展示，
添加頁面
現在點擊頁面上的鏈接，都會提示錯誤訊息，因為沒有找到對應的路由地址，先在Pages下創建五個檔案夾：Posts、Categories、Tags、Apps、FriendLinks，
然后在對應的檔案夾下添加Razor組件，
- Posts檔案夾：文章串列頁面
Posts.razor、根據分類查詢文章串列頁面Posts.Category.razor、根據標簽查詢文章串列頁面Posts.Tag.razor、文章詳情頁Post.razor - Categories檔案夾：分類串列頁面
Categories.razor - Tags檔案夾：標簽串列頁面
Tags.razor - Apps檔案夾：
Apps.razor準備將友情鏈接入口放在里面 - FriendLinks檔案夾：友情鏈接串列頁面
FriendLinks.razor
先分別創建上面這些Razor組件，差不多除了后臺CURD的頁面就這些了，現在來逐個突破，
不管三七二十一，先把所有頁面的路由給確定了，指定頁面路由使用 @page 指令，官方檔案說不支持可選引數，但是可以支持多個路由規則，
默認先什么都不顯示，可以將之前的加載中圈圈寫成一個組件，供每個頁面使用，
在Shared檔案夾添加組件Loading.razor，
<!--Loading.razor-->
<div class="loader"></div>
//Posts.razor
@page "/posts/"
@page "/posts/page/{page:int}"
@page "/posts/{page:int}"
<Loading />
@code {
/// <summary>
/// 當前頁碼
/// </summary>
[Parameter]
public int? page { get; set; }
}
這里我加了三條，可以匹配沒有page引數，帶page引數的，/posts/page/{page:int}這個大家可以不用加，我是用來兼容目前線上的博客路由的，總的來說可以匹配到：/posts、/posts/1、/posts/page/1這樣的路由，
//Posts.Category.razor
@page "/category/{name}"
<Loading />
@code {
/// <summary>
/// 分類名稱引數
/// </summary>
[Parameter]
public string name { get; set; }
}
根據分類名稱查詢文章串列頁面，name當作分類名稱引數，可以匹配到類似于：/category/aaa、/category/bbb這樣的路由，
//Posts.Tag.razor
@page "/tag/{name}"
<Loading />
@code {
/// <summary>
/// 標簽名稱引數
/// </summary>
[Parameter]
public string name { get; set; }
}
這個根據標簽名稱查詢文章串列頁面和上面差不多一樣，可以匹配到：/tag/aaa、/tag/bbb這樣的路由，
//Post.razor
@page "/post/{year:int}/{month:int}/{day:int}/{name}"
<Loading />
@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; }
}
文章詳情頁面的路由有點點復雜，以/post/開頭，加上年月日和當前文章的語意化名稱組成，分別添加了四個引數年月日和名稱，用來接收URL的規則，使用int來設定路由的約束，最終可以匹配到路由：/post/2020/06/09/aaa、/post/2020/06/9/bbb這樣的，
//Categories.razor
@page "/categories"
<Loading />
//Tags.razor
@page "/tags"
<Loading />
//FriendLinks.razor
@page "/friendlinks"
<Loading />
分類、標簽、友情鏈接都是固定的路由，像上面這樣就不多說了，然后還剩一個Apps.razor，
//Apps.razor
@page "/apps"
<div class="container">
<div class="post-wrap">
<h2 class="post-title">- Apps -</h2>
<ul>
<li>
<a target="_blank" href=https://www.cnblogs.com/meowv/p/"https://support.qq.com/products/75616">吐個槽_留言板
友情鏈接
