blazor-blog-feature

适用于 Blazor WASM + Azure Functions 的博客功能技能

此技能为托管在 Azure Static Web Apps 上、并使用无服务器后端处理的 Blazor WASM 应用提供完整且可用于生产环境的博客功能。

快速参考：根据任务加载资源

你的任务	加载资源	核心概念
了解架构、先决条件和共享模型	resources/core-architecture.md	三层架构、项目结构、数据模型
实现后端服务、Azure Functions 和文件共享集成	resources/backend-services.md	BlogStorageService、YAML 解析、DI 设置
构建 Blazor 组件、UI 页面和样式	resources/frontend-components.md	Razor 组件、Markdown 渲染、自适应设计
配置 Azure 环境、本地设置和部署	resources/azure-configuration.md	连接字符串、文件共享设置、环境变量
创建示例内容、测试工作流和排查问题	resources/sample-content-testing.md	示例 Markdown、测试清单、常见问题

编排协议

阶段 1：设置与理解

编写任何代码之前，先了解上下文：

1. 检查当前 Blazor WASM 项目的结构
2. 确认 Azure Functions API 项目已就绪
3. 验证 Azure Storage 帐户和 File Share 访问权限
4. 加载 resources/core-architecture.md，了解三层设计

快速评估：

• 是否已有 Blazor WASM + Functions 项目？→ 是，继续
• 是否需要了解要构建什么？→ 先加载 core-architecture.md
• 是否正在设置 Azure 资源？→ 转到 azure-configuration.md

阶段 2：选择实现路径

选择实现路径：

你的情况	首先加载	然后加载
从头开始	core-architecture.md	backend-services.md
后端已完成，需要 UI	frontend-components.md	（跳过 backend-services.md）
只需要配置方面的帮助	azure-configuration.md	（按需参考其他资源）
调试或测试	sample-content-testing.md	（跳转到相关故障排查部分）

阶段 3：执行与验证

实现顺序：

1. 创建项目结构（core-architecture.md 步骤 1-2）
2. 添加 NuGet 包（backend-services.md）
3. 实现 BlogStorageService（backend-services.md）
4. 创建 Azure Functions（backend-services.md）
5. 构建 Blazor 组件（frontend-components.md）
6. 配置 Azure 环境（azure-configuration.md）
7. 在本地测试（sample-content-testing.md 中的测试工作流）
8. 部署到 Azure（azure-configuration.md 中的部署部分）

验证检查点：

• 后端：Functions 能正确响应测试调用
• 前端：组件能够加载并显示文章
• 集成：端到端博客浏览正常
• Azure：配置已部署且可以访问

常见工作流场景

场景 1：全新实现（首次）

预计用时：2-3 小时

1. 阅读 core-architecture.md → 了解要构建的内容
2. 按照 backend-services.md 操作 → 实现 API 层
3. 按照 frontend-components.md 操作 → 构建 UI 层
4. 按照 azure-configuration.md 操作 → 配置 Azure 资源
5. 使用 sample-content-testing.md → 通过示例文章进行验证

场景 2：后端已存在，需要前端

预计用时：1 小时

1. 直接跳到 frontend-components.md
2. 如果遇到组件相关问题，参考 core-architecture.md
3. 使用 sample-content-testing.md 中的示例文章
4. 按照 azure-configuration.md 部署

场景 3：更新现有博客

预计用时：30 分钟

1. 跳转到相关资源文件
2. 参考 core-architecture.md 了解背景
3. 使用 sample-content-testing.md 中的清单测试更改

场景 4：排查问题

时间安排：按需进行

1. 直接前往 sample-content-testing.md
2. 在故障排查部分查找问题
3. 如有需要，参考其他资源了解背景

架构概述

前端 → 后端 → 存储：

• Blazor WASM 页面调用 HTTP 端点
• Azure Functions 从 File Share 中检索内容
• 所有内容都存储在带有 YAML frontmatter 的 Markdown 文件中
• 无需数据库（文件就是数据库）

关键组件：

• BlogStorageService：封装 File Share 交互
• BlogFunctions：用于列出和检索博文的 HTTP 端点
• Index/Post Razor Components：用于浏览内容的客户端界面
• CSS Styling：适配所有屏幕尺寸的响应式设计

实现复杂度

组件	复杂度	时间
后端服务	中等	45 分钟
Azure Functions	简单	30 分钟
前端组件	中等	60 分钟
样式	简单	30 分钟
配置	简单	20 分钟
总计	简单至中等	约 3 小时

前置条件检查清单

• ✅ 现有的 Blazor WASM SWA 项目
• ✅ Azure Functions API 项目
• ✅ 带有 File Share 的 Azure Storage 帐户
• ✅ .NET 10 SDK（或更高版本）
• ✅ Azure CLI（用于部署）
• ✅ Visual Studio Code 或 Visual Studio

资源文件摘要

resources/core-architecture.md（285 行）

介绍博客系统架构、项目结构以及前后端所需共享数据模型的基础知识。

适用场景： 开始使用、了解设计、创建共享模型

resources/backend-services.md（425 行）

完整介绍 Azure File Share 服务集成、BlogStorageService 类以及用于博客操作的 Azure Functions。

适用场景： 构建 API 层、实现后端服务

resources/frontend-components.md（610 行）

用于博客列表和详情页的 Blazor Razor 组件、响应式设计的 CSS 样式，以及导航集成。

适用场景： 构建 UI 层、设置组件样式、创建 Razor 页面

resources/azure-configuration.md（445 行）

Azure 环境设置、本地开发配置、File Share 结构、部署指南和安全注意事项。

适用场景： 设置 Azure 资源、配置环境、部署到生产环境

resources/sample-content-testing.md（395 行）

示例 Markdown 格式、完整的测试工作流检查清单、常见问题的故障排查指南以及改进建议。

适用场景： 创建测试数据、验证实现、调试问题

最佳实践

1. 从 core-architecture.md 开始 - 不要跳过对设计的了解
2. 按顺序实现 - 先实现后端，然后是前端，最后是配置
3. 在本地测试 - 部署前使用 Azure Storage Emulator
4. 使用示例内容 - 使用提供的 Markdown 示例进行测试
5. 遵循命名约定 - 统一的文件命名可避免错误

按目标快速导航

我想要……	资源	部分
了解系统	core-architecture.md	架构概述
创建后端	backend-services.md	BlogStorageService
构建 UI	frontend-components.md	博客列表页面
设置 Azure	azure-configuration.md	Azure File Share 设置
测试所有内容	sample-content-testing.md	测试工作流
修复问题	sample-content-testing.md	故障排查指南
部署到生产环境	azure-configuration.md	部署检查清单

支持与后续步骤

实现后：

• 添加分页以提升性能（推荐）
• 实现搜索功能
• 考虑缓存经常访问的文章
• 监控 Azure Function 冷启动
• 优化特色图片尺寸以提升性能

改进机会：

• 生成 RSS feed
• 集成评论系统
• 文章分类和标签
• 管理员内容管理界面
• 电子邮件简报订阅

---

构建技术： Blazor WASM、Azure Functions、Azure File Share、Markdown、YAML frontmatter

技能类型： 功能实现（Blazor WASM + Azure）

难度： 简单-中等（总计 3-4 小时）