自定义 Swagger Index 静态页模板

最新推荐文章于 2024-05-06 11:50:45 发布

友人dw

最新推荐文章于 2024-05-06 11:50:45 发布

阅读量1.1k

点赞数

分类专栏： Net Core

本文链接：https://blog.csdn.net/qq_39499914/article/details/109636882

版权

Net Core 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有时候我们为了在页面上增加一些小东西，比如说一个图片或者说，修改部分css样式，甚至更改 js 事件，那我们就必须修改 index.html 页面，很简单：

1、首先我们在 api 根目录下边创建一个 index.html 页面

<!--<script async="async" id="mini-profiler" src="/profiler/includes.min.js?v=4.1.0+c940f0f28d"

data-version="4.1.0+c940f0f28d" data-path="/profiler/"

data-current-id="" data-ids="" data-position="Left"

data-authorized="true" data-max-traces="15" data-toggle-shortcut="Alt+P"

data-trivial-milliseconds="2.0" data-ignored-duplicate-execute-types="Open,OpenAsync,Close,CloseAsync">

</script>-->

data-version="4.1.0+c940f0f28d" data-path="/profiler/"

data-current-id="4ec7c742-49d4-4eaf-8281-3c1e0efa8888" data-ids="4ec7c742-49d4-4eaf-8281-3c1e0efa8888"

data-position="Left"

data-authorized="true" data-max-traces="5" data-toggle-shortcut="Alt+P"

data-trivial-milliseconds="2.0" data-ignored-duplicate-execute-types="Open,OpenAsync,Close,CloseAsync">

</script>

<!DOCTYPE html>

<head>

<title>%(DocumentTitle)</title>

<style>

html {

box-sizing: border-box;

overflow: -moz-scrollbars-vertical;

overflow-y: scroll;

}

*:before,

*:after {

box-sizing: inherit;

}

body {

margin: 0;

background: #fafafa;

}

.qqgroup {

float: right;

}

.info {

float: left;

}

.download-contents {

display: none;

}

</style>

%(HeadContent)

</head>

<body>

<defs>

</symbol>

</symbol>

</symbol>

</symbol>

</symbol>

</symbol>

</symbol>

</defs>

</svg>

if (window.navigator.userAgent.indexOf("Edge") > -1) {

console.log("Removing native Edge fetch in favor of swagger-ui's polyfill")

window.fetch = undefined;

}

</script>

var int = null;

window.onload = function () {

var configObject = JSON.parse('%(ConfigObject)');

var oauthConfigObject = JSON.parse('%(OAuthConfigObject)');

// Apply mandatory parameters

configObject.dom_id = "#swagger-ui";

configObject.presets = [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset];

configObject.layout = "StandaloneLayout";

// If oauth2RedirectUrl isn't specified, use the built-in default

if (!configObject.hasOwnProperty("oauth2RedirectUrl"))

configObject.oauth2RedirectUrl = window.location.href.replace("index.html", "oauth2-redirect.html");

// Build a system

const ui = SwaggerUIBundle(configObject);

// Apply OAuth config

ui.initOAuth(oauthConfigObject);

int = setInterval(function () {

getData();

}, 1000);

$("img").attr("src", "./logo/favicon-32x32.png");

}

function getData() {

console.log(1);

if ($(".qqgroup").length <= 0) {

$('.info').after("<div class='qqgroup'><img src='http://123.206.33.109:26898/QQGroup.png' alt='QQ二维码' style='width: 200px;'></div><div style='clear: both;'></div>");

console.log(2);

clearInterval(int);

}

</script>

</body>

</html>

2、然后我们修改中间件，替换掉 swagger 的默认首页

app.UseSwaggerUI(c =>

{

//根据版本名称倒序遍历展示

var ApiName = "net.core";//这里你可以从appsettings.json中获取，比如我封装了一个类Appsettings.cs，具体查看我的源代码

var version = "v1";

c.SwaggerEndpoint($"/swagger/{version}/swagger.json", $"{ApiName} {version}");

// 将swagger首页，设置成我们自定义的页面，记得这个字符串的写法：解决方案名.index.html

c.IndexStream = () => GetType().GetTypeInfo().Assembly.GetManifestResourceStream("Blog.Core.index.html");//这里是配合MiniProfiler进行性能监控的，《文章：完美基于AOP的接口性能分析》，如果你不需要，可以暂时先注释掉，不影响大局。

c.RoutePrefix = ""; //路径配置，设置为空，表示直接在根域名（localhost:8001）访问该文件,注意localhost:8001/swagger是访问不到的，去launchSettings.json把launchUrl去掉，如果你想换一个路径，直接写名字即可，比如直接写c.RoutePrefix = "doc";

});

友人dw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义 Swagger Index 静态页模板

有时候我们为了在页面上增加一些小东西，比如说一个图片或者说，修改部分css样式，甚至更改 js 事件，那我们就必须修改 index.html 页面，很简单：1、首先我们在 api 根目录下边创建一个 index.html 页面<!--<script async="async" id="mini-profiler" src="/profiler/includes.min.js?v=4.1.0+c940f0f28d" data-version="4.1.0...
复制链接

扫一扫