Back to Details

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 TaskLoad ResourceKey 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:
  1. Review your current Blazor WASM project structure
  2. Confirm you have Azure Functions API project ready
  3. Verify Azure Storage account and File Share access
  4. 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
在编写任何代码之前，先明确上下文：
  1. 检查当前Blazor WASM项目结构
  2. 确认已准备好Azure Functions API项目
  3. 验证Azure存储账户和File Share的访问权限
  4. 加载
    resources/core-architecture.md
    以了解三层设计
快速评估：
  • 你是否已有Blazor WASM + Functions项目？→ 是，继续
  • 你是否需要了解要构建的内容？→ 先加载core-architecture.md
  • 你是否正在设置Azure资源？→ 查看azure-configuration.md

Phase 2: Implementation Selection

阶段2：实现路径选择

Choose your implementation path:
Your SituationLoad This FirstThen Load
Starting from scratchcore-architecture.mdbackend-services.md
Backend complete, need UIfrontend-components.md(skip backend-services.md)
Just need configuration helpazure-configuration.md(reference other resources as needed)
Debugging or testingsample-content-testing.md(target troubleshooting section)
选择适合你的实现路径：
你的情况先加载再加载
从零开始core-architecture.mdbackend-services.md
后端已完成，需要开发UIfrontend-components.md（跳过backend-services.md）
仅需要配置帮助azure-configuration.md（按需参考其他资源）
调试或测试sample-content-testing.md（查看问题排查章节）

Phase 3: Execution & Validation

阶段3：执行与验证

Implementation sequence:
  1. Create project structure (core-architecture.md Step 1-2)
  2. Add NuGet packages (backend-services.md)
  3. Implement BlogStorageService (backend-services.md)
  4. Create Azure Functions (backend-services.md)
  5. Build Blazor components (frontend-components.md)
  6. Configure Azure environment (azure-configuration.md)
  7. Test locally (sample-content-testing.md testing workflow)
  8. 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
实现顺序：
  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：配置已部署且可访问

Common Workflow Scenarios

常见工作流程场景

Scenario 1: Fresh Implementation (First Time)

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

Timeline: 2-3 hours
  1. Read 
    core-architecture.md
    → understand what you're building
  2. Follow 
    backend-services.md
    → implement API layer
  3. Follow 
    frontend-components.md
    → build UI layer
  4. Follow 
    azure-configuration.md
    → configure Azure resources
  5. Use 
    sample-content-testing.md
    → validate with sample posts
耗时：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
    → 通过示例文章验证

Scenario 2: Existing Backend, Need Frontend

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

Timeline: 1 hour
  1. Skip to 
    frontend-components.md
  2. Reference 
    core-architecture.md
    if component questions arise
  3. Use sample posts from 
    sample-content-testing.md
  4. Deploy following 
    azure-configuration.md
耗时：1小时
  1. 直接查看
    frontend-components.md
  2. 若对组件有疑问，参考
    core-architecture.md
  3. 使用
    sample-content-testing.md
    中的示例文章
  4. 遵循
    azure-configuration.md
    完成部署

Scenario 3: Update Existing Blog

场景3：更新现有博客

Timeline: 30 minutes
  1. Jump to relevant resource file
  2. Reference back to 
    core-architecture.md
    for context
  3. Test changes with 
    sample-content-testing.md
    checklist
耗时：30分钟
  1. 直接跳转到相关资源文件
  2. 如需上下文，参考
    core-architecture.md
  3. 使用
    sample-content-testing.md
    中的清单测试更改

Scenario 4: Troubleshooting Issues

场景4：排查问题

Timeline: As needed
  1. Go directly to 
    sample-content-testing.md
  2. Find problem in troubleshooting section
  3. Reference other resources for context if needed
耗时：按需
  1. 直接查看
    sample-content-testing.md
  2. 在问题排查章节中找到对应问题
  3. 如需上下文，参考其他资源

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

实现复杂度

ComponentComplexityTime
Backend ServicesMedium45 min
Azure FunctionsEasy30 min
Frontend ComponentsMedium60 min
StylingEasy30 min
ConfigurationEasy20 min
TotalEasy-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

最佳实践

  1. Start with core-architecture.md - Don't skip understanding the design
  2. Implement sequentially - Backend first, then frontend, then configuration
  3. Test locally - Use Azure Storage Emulator before deploying
  4. Use sample content - Test with provided markdown examples
  5. Follow naming conventions - Consistent file naming prevents errors
  1. 从core-architecture.md开始 - 不要跳过对设计的理解
  2. 按顺序实现 - 先后端，再前端，最后配置
  3. 本地测试 - 部署前使用Azure Storage模拟器
  4. 使用示例内容 - 用提供的Markdown示例进行测试
  5. 遵循命名规范 - 一致的文件命名可避免错误

Quick Navigation by Goal

按目标快速导航

I want to...ResourceSection
Understand the systemcore-architecture.mdArchitecture Overview
Create the backendbackend-services.mdBlogStorageService
Build the UIfrontend-components.mdBlog Listing Page
Set up Azureazure-configuration.mdAzure File Share Setup
Test everythingsample-content-testing.mdTesting Workflow
Fix a problemsample-content-testing.mdTroubleshooting Guide
Deploy to productionazure-configuration.mdDeployment Checklist
我想...资源章节
了解系统core-architecture.md架构概述
创建后端backend-services.mdBlogStorageService
构建UIfrontend-components.md博客列表页
设置Azureazure-configuration.mdAzure 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小时）