gpt4 book ai didi

html - 如何在 Swagger UI 的标记内插入少量自定义?

转载 作者:行者123 更新时间:2023-12-02 08:04:41 27 4
gpt4 key购买 nike

我有一个使用 Swashbuckle(Swashbuckle.AspNetCore.SwaggerGen 3.0.0 和 Swashbuckle.AspNetCore.SwaggerUi 3.0.0)记录的 .NET Core 项目。我的目标是在带有类标题的 DIV 正下方添加一个自定义标签(即在服务名称下方但在端点上方)。
当我调查 Swagger UI 标记时,我看到有一个带有类 swagger-ui 的 DIV,我想将我的东西插入其中,可以这么说。我今天的设置是一个名为 donkey.html 的文件,当我访问 Swagger UI 的 URL 时正在呈现该文件,如下所示。

...
<body>
<div id="swagger-ui"></div>
<div id="api_info"></div>
<!-- ... -->
<script src="./swagger-ui-bundle.js"></script>
<script src="./swagger-ui-standalone-preset.js"></script>
<script type="text/javascript">
(function () { ... })();
</script>
</body>
</html>
我已经用谷歌搜索了几个小时,并阅读了很多关于 OpenAPI 和 YAML 的内容。然而,我得到的印象是,它需要对 Swagger UI 项目进行全面重建,而我目前的目标是更简单的任务。
有没有办法提取名为 api_info 的 DIV,使其呈现为 swagger_ui 的一部分,而无需重新生成整个 Swagger UI 项目?
我尝试增加基本布局,如图所示 here但结果很糟糕,结果比我的目标要复杂一些。也许这是创建模块的唯一可行方法,在这种情况下我会考虑它,但这是这种情况下的最后一个资源。

最佳答案

Swagger UI 3.x 具有允许您添加或修改 UI 元素的插件系统。一些关于插件的文档可以在以下位置找到:
Plugins
What's the intended way of customizing SwaggerUI 3.x?

使用插件无需重新编译 Swagger UI,您实际上可以直接在 index.html 中定义插件页。要添加或更改 UI 元素,您需要一个使用 wrapComponents 的插件和 React.createElement 构建所需的 DOM 结构。 (另见 React Without JSX。)

要使自定义插件生效,必须将它们添加到 pluginsSwaggerUIBundle 中列出构造函数。

例子

这是一个添加自定义 <h3> 的示例插件API 标题上方和下方的 header :

// index.html

<script>
window.onload = function() {

// Custom plugin that adds extra stuff
const MyCustomPlugin = function() {
return {
wrapComponents: {
// add text above InfoContainer - same effect as above title
InfoContainer: (Original, { React }) => (props) => {
return React.createElement("div", null,
React.createElement("h3", null, "I'm above the InfoContainer"),
React.createElement(Original, props)
)
},

// and/or add text above API description
InfoUrl: (Original, { React }) => (props) => {
return React.createElement("div", null,
React.createElement(Original, props),
React.createElement("h3", null, "I'm above the API description")
)
}
}
}
}


const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
...
plugins: [
MyCustomPlugin, // <------ add your custom plugin here
SwaggerUIBundle.plugins.DownloadUrl
],
...

结果如下所示:

Swagger UI with customized layour

关于html - 如何在 Swagger UI 的标记内插入少量自定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52775462/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com