跟着AI学习C#之项目实践Day3

📅 Day 3：支持 Markdown 写作 + 文章详情页展示

✅ 今日目标：

• 在文章编辑中支持 Markdown 编写
• 实现文章详情页面（渲染 Markdown 为 HTML）
• 显示作者信息（关联 Identity 用户）
• 简化 UI，添加导航菜单和样式优化
• 提交代码并保存进度

---

🧰 一、引入 Markdown 解析库

我们使用 Markdig ——一个高性能的 Markdown 解析库。

✅ 安装 Markdig

在 NuGet 包管理器中安装：

Install-Package Markdig

或者使用命令行：

dotnet add package Markdig

---

📝 二、修改 Post 模型以支持 Markdown 渲染

✅ 更新 Models/Post.cs

using System;namespace MyBlog.Models
{public class Post{public int Id { get; set; }public string Title { get; set; }public string Content { get; set; } // 存储原始 Markdownpublic string AuthorId { get; set; }public DateTime CreatedAt { get; set; } = DateTime.Now;public DateTime? UpdatedAt { get; set; }// 新增属性：用于前端显示 HTMLpublic string RenderedContent => MarkdownToHtml(Content);private string MarkdownToHtml(string markdown){if (string.IsNullOrEmpty(markdown)) return "";var pipeline = new Markdig.MarkdownPipelineBuilder().UseAdvancedExtensions().Build();return Markdig.Markdown.ToHtml(markdown, pipeline);}}
}

---

👁️‍🗨️ 三、实现文章详情页展示

如果你之前使用了 Razor Page 的 CRUD 模板，Details.cshtml 应该已经生成好了。

✅ 修改 Pages/Posts/Details.cshtml

确保内容区域渲染的是 HTML 而不是纯文本：

<div>@Html.Raw(Model.Post.RenderedContent)
</div>

⚠️ 注意：@Html.Raw() 会直接输出 HTML，务必确保内容安全，防止 XSS 攻击。你可以在保存时对 Markdown 进行清理。

---

👤 四、关联用户信息（显示作者）

我们需要在文章页面中显示作者用户名。

✅ 修改 Pages/Posts/PagesModel.cs（如 IndexModel / DetailsModel）

注入 UserManager<IdentityUser>：

private readonly UserManager<IdentityUser> _userManager;public IndexModel(ApplicationDbContext context, UserManager<IdentityUser> userManager)
{_context = context;_userManager = userManager;
}

然后获取用户名：

public async Task<IActionResult> OnGetAsync()
{Posts = await _context.Posts.ToListAsync();foreach (var post in Posts){var user = await _userManager.FindByIdAsync(post.AuthorId);post.AuthorName = user?.UserName;}return Page();
}

你也可以扩展 Post 类，加上一个 AuthorName 属性：

public string AuthorName { get; set; }

---

🎨 五、美化 UI 页面

你可以使用 Bootstrap 或 Tailwind CSS 来美化页面。

✅ 推荐做法：

1. 使用 _Layout.cshtml 统一布局
2. 添加导航栏链接：

<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" asp-page="/Posts/Index">文章列表</a></li><li class="nav-item"><a class="nav-link" asp-page="/Posts/Create">写新文章</a></li>
</ul>

3. 添加基础样式或使用 Bootstrap CDN：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

---

📦 六、提交 Git 版本

git add .
git commit -m "Day3: Added Markdown support and improved article detail page"

---

📝 今日总结

今天你完成了：

✅ 引入 Markdown 支持
✅ 实现文章详情页并渲染 Markdown 为 HTML
✅ 关联 Identity 用户，显示文章作者信息
✅ 美化页面 UI 并添加导航菜单
✅ 提交版本控制记录

---

📆 明日计划（Day4）

我们将继续增强功能：

• 实现分类（Category）与标签（Tag）功能
• 支持多对多关系（EF Core 配置）
• 在文章发布页中选择分类与标签
• 在首页按分类筛选文章