如何实现Swagger页面头部内容的动态修改或添加动态内容？

默认通过options.HeadContent设置的内容是静态的，因为它只在应用启动时初始化一次。要实现动态内容（比如显示当前时间、计数器），可以用以下两种方案：

方案一：嵌入JavaScript动态修改前端内容 #

直接在HeadContent中注入脚本，页面加载后通过JS定时更新内容，适合前端能生成的动态数据（如客户端时间、本地计数器）。

代码示例：

applicationBuilder.UseSwaggerUI(options =>
{
    options.HeadContent = @"
        <script>
            // 动态更新当前时间
            function updateCurrentTime() {
                const now = new Date().toLocaleString();
                const timeEl = document.getElementById('dynamic-time');
                timeEl && (timeEl.textContent = `当前时间：${now}`);
            }

            // 动态更新访问计数器
            function updateCounter() {
                const counterEl = document.getElementById('dynamic-counter');
                counterEl && (counterEl.textContent = `访问计数器：${++window.counterCount}`);
            }

            window.onload = function() {
                const topBar = document.querySelector('.swagger-ui .topbar');
                if (!topBar) return;

                // 添加时间显示元素
                const timeDiv = document.createElement('div');
                timeDiv.id = 'dynamic-time';
                timeDiv.style.margin = '0 16px';
                timeDiv.style.color = '#fff';
                topBar.appendChild(timeDiv);

                // 添加计数器元素
                const counterDiv = document.createElement('div');
                counterDiv.id = 'dynamic-counter';
                counterDiv.style.margin = '0 16px';
                counterDiv.style.color = '#fff';
                topBar.appendChild(counterDiv);

                window.counterCount = 0;
                updateCurrentTime();
                updateCounter();

                // 每秒更新时间，每5秒更新计数器
                setInterval(updateCurrentTime, 1000);
                setInterval(updateCounter, 5000);
            };
        </script>
    ";
});

方案二：自定义中间件拦截请求替换后端动态数据 #

如果需要展示后端生成的动态内容（如服务器时间、业务统计数据），可以通过中间件拦截Swagger UI页面请求，替换页面中的占位符。

步骤1：设置占位符 #

applicationBuilder.UseSwaggerUI(options =>
{
    options.HeadContent = "<div id='backend-dynamic-content' style='margin:0 16px; color:#fff;'>{{BACKEND_DATA}}</div>";
});

步骤2：添加自定义中间件（需放在UseSwaggerUI之前） #

app.Use(async (context, next) =>
{
    if (context.Request.Path.StartsWithSegments("/swagger"))
    {
        // 替换响应流以修改内容
        var originalBody = context.Response.Body;
        using var tempBody = new MemoryStream();
        context.Response.Body = tempBody;

        await next();

        // 读取并修改响应内容
        tempBody.Seek(0, SeekOrigin.Begin);
        var responseHtml = await new StreamReader(tempBody).ReadToEndAsync();

        // 生成后端动态数据
        var backendData = $"服务器当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
        responseHtml = responseHtml.Replace("{{BACKEND_DATA}}", backendData);

        // 将修改后的内容写回响应
        var modifiedBytes = Encoding.UTF8.GetBytes(responseHtml);
        context.Response.ContentLength = modifiedBytes.Length;
        await originalBody.WriteAsync(modifiedBytes, 0, modifiedBytes.Length);
        context.Response.Body = originalBody;
    }
    else
    {
        await next();
    }
});

方案选择 #

• 前端本地动态内容：优先用方案一，实现简单无需后端介入；
• 依赖后端数据的动态内容：用方案二，能获取后端实时生成的数据。

内容的提问来源于stack exchange，提问作者Mo B.