swagger 斜带扣/摆动中的动压头含量

xzlaal3s 于 2023-03-18 发布在其他

关注(0)|答案(1)|浏览(112)

要更改Swagger页面的head内容，我们可以编写

applicationBuilder.UseSwaggerUI(options => 
    options.HeadContent = ...
);

然而，它在启动时只被调用一次，因此保持静态。是否可以在Swagger页面中添加动态附加内容或在稍后阶段动态更改头部内容？（简单的玩具示例：显示当前时间或计数器的值。）

swagger

来源：https://stackoverflow.com/questions/75673839/dynamic-head-content-in-swashbuckle-swagger

1条答案

按热度按时间

guz6ccqo1#

您可以在SwaggerUIOptions中看到这一行：

/// <summary>
/// Gets or sets additional content to place in the head of the swagger-ui page
/// </summary>
public string HeadContent { get; set; } = "";

HeadContent实际上是一个字符串类型，由%(HeadContent)在Swagger的默认索引页上接收，因此如果您通过HeadContent传递一个值，它似乎只能呈现为静态内容。
您可以定制Swagger的index.html并替换其中的%(HeadContent)，然后通过JavaScript动态呈现它。

app.UseSwaggerUI(config =>
{
    //I add index.html in the root directory, please pay attention to your path
    config.IndexStream = () => Assembly.GetExecutingAssembly()
        .GetManifestResourceStream("YourProjectName.index.html");
}

将index.html设置为Embedded resource：

<ItemGroup>
    <EmbeddedResource Include="index.html">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
</ItemGroup>

首先，您应该将自定义index.html基于default version。
以显示当前时间为例，下面是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>%(DocumentTitle)</title>
    <link rel="stylesheet" type="text/css" href="./swagger-ui.css">
    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            background: #fafafa;
        }

        #wrapper {
            font-size: 50px;
            font-weight: bold;
        }
    </style>

    //Replace %(HeadContent) here
    <div id="wrapper"></div>
    <!--%(HeadContent)-->

</head>

<body>
    <div id="swagger-ui"></div>
 </body>
<script>
        if (window.navigator.userAgent.indexOf("Edge") > -1) {
            console.log("Removing native Edge fetch in favor of swagger-ui's polyfill")
            window.fetch = undefined;
        }
    </script>

    <script src="./swagger-ui-bundle.js"></script>
    <script src="./swagger-ui-standalone-preset.js"></script>
    <script>
        /* Source: https://gist.github.com/lamberta/3768814
         * Parse a string function definition and return a function object. Does not use eval.
         * @param {string} str
         * @return {function}
         *
         * Example:
         *  var f = function (x, y) { return x * y; };
         *  var g = parseFunction(f.toString());
         *  g(33, 3); //=> 99
         */

         //Here is my JavaScript code:
         function test(){
            var date=new Date();  
            var year = date.getFullYear(); 
            var month = date.getMonth()+1;  
            var day = date.getDate();  
            var hour = date.getHours();  
            var minute = date.getMinutes();  
            var second = date.getSeconds(); 
                
            if(month<10){
                month = "0"+month;
            }
            if(day<10){
                day = "0"+day;
            }
            if(hour<10){
                hour = "0"+hour;
            }
            if(minute<10){
                minute = "0"+minute;
            }
            if(second<10){
                second = "0"+second;
            }
                
            document.getElementById("wrapper").innerHTML = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        }
        setInterval("test()",1000);

        function parseFunction(str) {
            if (!str) return void (0);

            var fn_body_idx = str.indexOf('{'),
                fn_body = str.substring(fn_body_idx + 1, str.lastIndexOf('}')),
                fn_declare = str.substring(0, fn_body_idx),
                fn_params = fn_declare.substring(fn_declare.indexOf('(') + 1, fn_declare.lastIndexOf(')')),
                args = fn_params.split(',');

            args.push(fn_body);

            function Fn() {
                return Function.apply(this, args);
            }
            Fn.prototype = Function.prototype;

            return new Fn();
        }

        window.onload = function () {
            var configObject = JSON.parse('%(ConfigObject)');
            var oauthConfigObject = JSON.parse('%(OAuthConfigObject)');

            // Workaround for https://github.com/swagger-api/swagger-ui/issues/5945
            configObject.urls.forEach(function (item) {
                if (item.url.startsWith("http") || item.url.startsWith("/")) return;
                item.url = window.location.href.replace("index.html", item.url).split('#')[0];
            });

            // If validatorUrl is not explicitly provided, disable the feature by setting to null
            if (!configObject.hasOwnProperty("validatorUrl"))
                configObject.validatorUrl = null

            // If oauth2RedirectUrl isn't specified, use the built-in default
            if (!configObject.hasOwnProperty("oauth2RedirectUrl"))
                configObject.oauth2RedirectUrl = (new URL("oauth2-redirect.html", window.location.href)).href;

            // Apply mandatory parameters
            configObject.dom_id = "#swagger-ui";
            configObject.presets = [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset];
            configObject.layout = "StandaloneLayout";

            // Parse and add interceptor functions
            var interceptors = JSON.parse('%(Interceptors)');
            if (interceptors.RequestInterceptorFunction)
                configObject.requestInterceptor = parseFunction(interceptors.RequestInterceptorFunction);
            if (interceptors.ResponseInterceptorFunction)
                configObject.responseInterceptor = parseFunction(interceptors.ResponseInterceptorFunction);

            // Begin Swagger UI call region

            const ui = SwaggerUIBundle(configObject);

            ui.initOAuth(oauthConfigObject);

            // End Swagger UI call region

            window.ui = ui
        }
    </script>
</body>
</html>

测试结果：

赞(0）回复(0）举报 2023-03-18

我来回答

swagger 斜带扣/摆动中的动压头含量

1条答案

相关问题

热门标签

最新问答