跟着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; } // 存储原始 Markdown
        public string AuthorId { get; set; }
        public DateTime CreatedAt { get; set; } = DateTime.Now;
        public DateTime? UpdatedAt { get; set; }

        // 新增属性：用于前端显示 HTML
        public 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 配置）
• 在文章发布页中选择分类与标签
• 在首页按分类筛选文章