blazor-blog-feature

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Blog Feature Skill for Blazor WASM + Azure Functions

Blazor WASM + Azure Functions 博客功能实现指南

This skill provides a complete, production-ready blog feature for Blazor WASM applications hosted on Azure Static Web Apps with serverless backend processing.

本指南为部署在Azure Static Web Apps上、采用无服务器后端处理的Blazor WASM应用提供一套完整的、可用于生产环境的博客功能实现方案。

Quick Reference: When to Load Which Resource

快速参考：何时加载对应资源

Your Task	Load Resource	Key Concepts
Understand architecture, prerequisites, shared models	`resources/core-architecture.md`	3-layer architecture, project structure, data models
Implement backend services, Azure Functions, file share integration	`resources/backend-services.md`	BlogStorageService, YAML parsing, DI setup
Build Blazor components, UI pages, styling	`resources/frontend-components.md`	Razor components, markdown rendering, responsive design
Configure Azure environment, local settings, deployment	`resources/azure-configuration.md`	Connection strings, file share setup, environment variables
Create sample content, test workflow, troubleshoot issues	`resources/sample-content-testing.md`	Sample markdown, testing checklist, common issues

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

Orchestration Protocol

编排流程

Phase 1: Setup & Understanding

阶段1：准备与认知

Before writing any code, establish context:

Review your current Blazor WASM project structure
Confirm you have Azure Functions API project ready
Verify Azure Storage account and File Share access
Load
```
resources/core-architecture.md
```
to understand 3-layer design

Quick assessment:

Do you have existing Blazor WASM + Functions project? → YES, proceed
Do you need to understand what to build? → Load core-architecture.md first
Are you setting up Azure resources? → Go to azure-configuration.md

在编写任何代码之前，先明确上下文：

检查当前Blazor WASM项目结构
确认已准备好Azure Functions API项目
验证Azure存储账户和File Share的访问权限
加载
```
resources/core-architecture.md
```
以了解三层设计

快速评估：

你是否已有Blazor WASM + Functions项目？→ 是，继续
你是否需要了解要构建的内容？→ 先加载core-architecture.md
你是否正在设置Azure资源？→ 查看azure-configuration.md

Phase 2: Implementation Selection

阶段2：实现路径选择

Choose your implementation path:

Your Situation	Load This First	Then Load
Starting from scratch	core-architecture.md	backend-services.md
Backend complete, need UI	frontend-components.md	(skip backend-services.md)
Just need configuration help	azure-configuration.md	(reference other resources as needed)
Debugging or testing	sample-content-testing.md	(target troubleshooting section)

选择适合你的实现路径：

你的情况	先加载	再加载
从零开始	core-architecture.md	backend-services.md
后端已完成，需要开发UI	frontend-components.md	（跳过backend-services.md）
仅需要配置帮助	azure-configuration.md	（按需参考其他资源）
调试或测试	sample-content-testing.md	（查看问题排查章节）

Phase 3: Execution & Validation

阶段3：执行与验证

Implementation sequence:

Create project structure (core-architecture.md Step 1-2)
Add NuGet packages (backend-services.md)
Implement BlogStorageService (backend-services.md)
Create Azure Functions (backend-services.md)
Build Blazor components (frontend-components.md)
Configure Azure environment (azure-configuration.md)
Test locally (sample-content-testing.md testing workflow)
Deploy to Azure (azure-configuration.md deployment section)

Validation checkpoints:

Backend: Functions respond correctly to test calls
Frontend: Components load and display posts
Integration: End-to-end blog viewing works
Azure: Configuration deployed and accessible

实现顺序：

创建项目结构（core-architecture.md 步骤1-2）
添加NuGet包（backend-services.md）
实现BlogStorageService（backend-services.md）
创建Azure Functions（backend-services.md）
构建Blazor组件（frontend-components.md）
配置Azure环境（azure-configuration.md）
本地测试（sample-content-testing.md 测试流程）
部署到Azure（azure-configuration.md 部署章节）

验证检查点：

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

Common Workflow Scenarios

常见工作流程场景

Scenario 1: Fresh Implementation (First Time)

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

Timeline: 2-3 hours

Read
```
core-architecture.md
```
→ understand what you're building
Follow
```
backend-services.md
```
→ implement API layer
Follow
```
frontend-components.md
```
→ build UI layer
Follow
```
azure-configuration.md
```
→ configure Azure resources
Use
```
sample-content-testing.md
```
→ validate with sample posts

耗时：2-3小时

阅读
```
core-architecture.md
```
→ 了解要构建的内容
遵循
```
backend-services.md
```
→ 实现API层
遵循
```
frontend-components.md
```
→ 构建UI层
遵循
```
azure-configuration.md
```
→ 配置Azure资源
使用
```
sample-content-testing.md
```
→ 通过示例文章验证

Scenario 2: Existing Backend, Need Frontend

场景2：后端已完成，需要开发前端

Timeline: 1 hour

Skip to
```
frontend-components.md
```
Reference
```
core-architecture.md
```
if component questions arise
Use sample posts from
```
sample-content-testing.md
```
Deploy following
```
azure-configuration.md
```

耗时：1小时

直接查看
```
frontend-components.md
```
若对组件有疑问，参考
```
core-architecture.md
```
使用
```
sample-content-testing.md
```
中的示例文章
遵循
```
azure-configuration.md
```
完成部署

Scenario 3: Update Existing Blog

场景3：更新现有博客

Timeline: 30 minutes

Jump to relevant resource file
Reference back to
```
core-architecture.md
```
for context
Test changes with
```
sample-content-testing.md
```
checklist

耗时：30分钟

直接跳转到相关资源文件
如需上下文，参考
```
core-architecture.md
```
使用
```
sample-content-testing.md
```
中的清单测试更改

Scenario 4: Troubleshooting Issues

场景4：排查问题

Timeline: As needed

Go directly to
```
sample-content-testing.md
```
Find problem in troubleshooting section
Reference other resources for context if needed

耗时：按需

直接查看
```
sample-content-testing.md
```
在问题排查章节中找到对应问题
如需上下文，参考其他资源

Architecture Summary

架构概述

Frontend → Backend → Storage:

Blazor WASM pages call HTTP endpoints
Azure Functions retrieve from File Share
Markdown files with YAML frontmatter contain all content
No database needed (files are the database)

Key Components:

BlogStorageService: Abstracts File Share interactions
BlogFunctions: HTTP endpoints for listing/retrieving posts
Index/Post Razor Components: Client UI for browsing
CSS Styling: Responsive design for all screen sizes

前端 → 后端 → 存储：

Blazor WASM页面调用HTTP端点
Azure Functions从File Share中获取内容
带有YAML前置元数据的Markdown文件存储所有内容
无需数据库（文件即数据库）

核心组件：

BlogStorageService：封装File Share交互逻辑
BlogFunctions：用于列出/获取文章的HTTP端点
Index/Post Razor组件：用于浏览的客户端UI
CSS样式：适配所有屏幕尺寸的响应式设计

Implementation Complexity

实现复杂度

Component	Complexity	Time
Backend Services	Medium	45 min
Azure Functions	Easy	30 min
Frontend Components	Medium	60 min
Styling	Easy	30 min
Configuration	Easy	20 min
Total	Easy-Medium	~3 hours

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

Prerequisites Checklist

前置条件检查清单

✅ Existing Blazor WASM SWA project
✅ Azure Functions API project
✅ Azure Storage account with File Share
✅ .NET 10 SDK (or later)
✅ Azure CLI (for deployment)
✅ Visual Studio Code or Visual Studio

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

Resource Files Summary

资源文件概述

resources/core-architecture.md

(285 lines)

resources/core-architecture.md

（285行）

Foundational knowledge about the blog system architecture, project structure, and shared data models needed across frontend and backend.

Load when: Getting started, understanding the design, creating shared models

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

加载时机： 开始开发前、理解设计思路、创建共享模型时

resources/backend-services.md

(425 lines)

resources/backend-services.md

（425行）

Complete implementation of Azure File Share service integration, BlogStorageService class, and Azure Functions for blog operations.

Load when: Building the API layer, implementing backend services

Azure File Share服务集成、BlogStorageService类以及博客操作相关Azure Functions的完整实现指南。

加载时机： 构建API层、实现后端服务时

resources/frontend-components.md

(610 lines)

resources/frontend-components.md

（610行）

Blazor Razor components for blog listing and detail pages, CSS styling for responsive design, navigation integration.

Load when: Building the UI layer, styling components, creating Razor pages

博客列表和详情页的Blazor Razor组件、响应式设计的CSS样式、导航集成方案。

加载时机： 构建UI层、样式设计、创建Razor页面时

resources/azure-configuration.md

(445 lines)

resources/azure-configuration.md

（445行）

Azure environment setup, local development configuration, File Share structure, deployment guidelines, and security considerations.

Load when: Setting up Azure resources, configuring environments, deploying to production

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

加载时机： 设置Azure资源、配置环境、部署到生产环境时

resources/sample-content-testing.md

(395 lines)

resources/sample-content-testing.md

（395行）

Sample markdown formats, complete testing workflow checklist, troubleshooting guide for common issues, and enhancement ideas.

Load when: Creating test data, validating implementation, debugging problems

示例Markdown格式、完整的测试流程清单、常见问题排查指南以及功能增强思路。

加载时机： 创建测试数据、验证实现、调试问题时

Best Practices

最佳实践

Start with core-architecture.md - Don't skip understanding the design
Implement sequentially - Backend first, then frontend, then configuration
Test locally - Use Azure Storage Emulator before deploying
Use sample content - Test with provided markdown examples
Follow naming conventions - Consistent file naming prevents errors

从core-architecture.md开始 - 不要跳过对设计的理解
按顺序实现 - 先后端，再前端，最后配置
本地测试 - 部署前使用Azure Storage模拟器
使用示例内容 - 用提供的Markdown示例进行测试
遵循命名规范 - 一致的文件命名可避免错误

Quick Navigation by Goal

按目标快速导航

I want to...	Resource	Section
Understand the system	core-architecture.md	Architecture Overview
Create the backend	backend-services.md	BlogStorageService
Build the UI	frontend-components.md	Blog Listing Page
Set up Azure	azure-configuration.md	Azure File Share Setup
Test everything	sample-content-testing.md	Testing Workflow
Fix a problem	sample-content-testing.md	Troubleshooting Guide
Deploy to production	azure-configuration.md	Deployment Checklist

我想...	资源	章节
了解系统	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	部署清单

Support & Next Steps

支持与后续步骤

After implementation:

Add pagination for better performance (recommended)
Implement search functionality
Consider caching for frequently-accessed posts
Monitor Azure Function cold starts
Optimize featured image sizes for performance

Enhancement opportunities:

RSS feed generation
Comment system integration
Post categories and tagging
Admin content management interface
Email newsletter subscription

Built with: Blazor WASM, Azure Functions, Azure File Share, Markdown, YAML frontmatter

Skill Type: Feature Implementation (Blazor WASM + Azure)

Difficulty: Easy-Medium (3-4 hours total)

实现完成后：

添加分页以提升性能（推荐）
实现搜索功能
考虑对高频访问文章进行缓存
监控Azure Functions冷启动情况
优化特色图片尺寸以提升性能

功能增强方向：

RSS订阅源生成
评论系统集成
文章分类与标签
管理员内容管理界面
电子邮件订阅

技术栈： Blazor WASM、Azure Functions、Azure File Share、Markdown、YAML前置元数据

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

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

blazor-blog-feature

Original

Translation

Blog Feature Skill for Blazor WASM + Azure Functions

Blazor WASM + Azure Functions 博客功能实现指南

Quick Reference: When to Load Which Resource

快速参考：何时加载对应资源

Orchestration Protocol

编排流程

Phase 1: Setup & Understanding

阶段1：准备与认知

Phase 2: Implementation Selection

阶段2：实现路径选择

Phase 3: Execution & Validation

阶段3：执行与验证

Common Workflow Scenarios

常见工作流程场景

Scenario 1: Fresh Implementation (First Time)

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

Scenario 2: Existing Backend, Need Frontend

场景2：后端已完成，需要开发前端

Scenario 3: Update Existing Blog

场景3：更新现有博客

Scenario 4: Troubleshooting Issues

场景4：排查问题

Architecture Summary

架构概述

Implementation Complexity

实现复杂度

Prerequisites Checklist

前置条件检查清单

Resource Files Summary

资源文件概述

resources/core-architecture.md (285 lines)

resources/core-architecture.md（285行）

resources/backend-services.md (425 lines)

resources/backend-services.md（425行）

resources/frontend-components.md (610 lines)

resources/frontend-components.md（610行）

resources/azure-configuration.md (445 lines)

resources/azure-configuration.md（445行）

resources/sample-content-testing.md (395 lines)

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

Best Practices

最佳实践

Quick Navigation by Goal

按目标快速导航

Support & Next Steps

支持与后续步骤

`resources/core-architecture.md`
(285 lines)

`resources/core-architecture.md`
（285行）

`resources/backend-services.md`
(425 lines)

`resources/backend-services.md`
（425行）

`resources/frontend-components.md`
(610 lines)

`resources/frontend-components.md`
（610行）

`resources/azure-configuration.md`
(445 lines)

`resources/azure-configuration.md`
（445行）

`resources/sample-content-testing.md`
(395 lines)

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