带认证的Blazor WebAssembly托管项目动态添加Recipe Schema脚本

核心思路 #

由于Blazor WebAssembly是客户端渲染框架，无法直接操作DOM中的head标签，因此需要通过JS互操作来动态创建或更新Recipe Schema对应的script标签。流程为：组件初始化时从API获取食谱数据 → 生成符合Schema规范的JSON → 调用JS函数将JSON插入到head中。

实现步骤 #

1. 编写JS辅助函数 #

在wwwroot/js/site.js中添加用于操作DOM的函数，负责创建或更新head中的Recipe Schema脚本：

window.updateRecipeSchema = function (schemaJson) {
    // 查找已存在的Recipe Schema脚本（通过自定义data属性标识）
    let scriptElement = document.querySelector('script[type="application/ld+json"][data-schema="recipe"]');
    
    if (scriptElement) {
        // 若已存在则更新内容
        scriptElement.textContent = schemaJson;
    } else {
        // 若不存在则创建新的script标签并插入到head
        scriptElement = document.createElement('script');
        scriptElement.type = 'application/ld+json';
        scriptElement.dataset.schema = 'recipe';
        scriptElement.textContent = schemaJson;
        document.head.appendChild(scriptElement);
    }
};

2. 在Blazor组件中实现逻辑 #

以食谱详情页组件RecipeDetail.razor为例，在初始化阶段获取数据并生成Schema：

@page "/recipe/{RecipeId:int}"
@inject HttpClient Http
@inject IJSRuntime JSRuntime

<h1>@Recipe?.Title</h1>
<div class="recipe-content">
    <!-- 渲染食谱的其他内容，比如食材、步骤等 -->
    <p>@Recipe?.Description</p>
</div>

@code {
    [Parameter] public int RecipeId { get; set; }
    private RecipeModel Recipe { get; set; }

    protected override async Task OnInitAsync()
    {
        // 从后端API获取食谱数据（确保API支持身份认证，Blazor会自动携带用户令牌）
        Recipe = await Http.GetFromJsonAsync<RecipeModel>($"api/recipes/{RecipeId}");
        
        if (Recipe != null)
        {
            // 构建符合Recipe Schema规范的对象
            var recipeSchema = new
            {
                "@context" = "https://schema.org",
                "@type" = "Recipe",
                name = Recipe.Title,
                description = Recipe.Description,
                image = Recipe.ImageUrl,
                author = Recipe.AuthorName,
                datePublished = Recipe.CreatedDate.ToString("yyyy-MM-dd"),
                recipeYield = Recipe.Servings,
                recipeIngredient = Recipe.Ingredients.Split(new[] {'\n'}, StringSplitOptions.RemoveEmptyEntries),
                recipeInstructions = Recipe.Instructions.Split(new[] {'\n'}, StringSplitOptions.RemoveEmptyEntries)
                    .Select(step => new { "@type" = "HowToStep", text = step })
            };
            
            // 序列化为JSON字符串
            var schemaJson = System.Text.Json.JsonSerializer.Serialize(recipeSchema);
            
            // 调用JS函数更新head中的Schema脚本
            await JSRuntime.InvokeVoidAsync("updateRecipeSchema", schemaJson);
        }
    }

    // 根据你的实际数据库结构定义食谱模型
    private class RecipeModel
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public string ImageUrl { get; set; }
        public string AuthorName { get; set; }
        public DateTime CreatedDate { get; set; }
        public string Servings { get; set; }
        public string Ingredients { get; set; }
        public string Instructions { get; set; }
    }
}

3. 身份认证相关注意事项 #

• 确保后端API的api/recipes/{RecipeId}端点配置了正确的身份认证策略（比如JWT或Cookie认证）。
• Blazor WebAssembly的HttpClient默认会自动携带当前用户的认证令牌，无需额外配置，只要用户已登录即可访问受保护的API端点。

额外说明 #

由于项目不支持预渲染，搜索引擎爬虫可能无法执行客户端JS获取Schema数据。如果需要更好的SEO效果，建议后续考虑添加服务器端预渲染支持，但当前方案是符合你需求的可行实现。

内容的提问来源于stack exchange，提问作者JoeyD