快速搞定 Swagger UI 布局插件自定义，只需 3 处改动

快速搞定 Swagger UI 布局插件自定义只需 3 处改动【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui团队里 API 文档由 Swagger UI 生成官网却是另一套品牌视觉新人打开文档得先找半天接口在哪。症结往往在最外层——Swagger UI 布局插件自定义它决定页面从上到下摆哪些块、每块占多宽。本文先讲清这层壳的运作机制再用 3 处改动把布局改成你要的样子。Swagger UI 布局插件只摆积木不碰数据先分一件事布局层不解析任何接口数据。它拿到的信息都是别的插件比如 spec 插件解析好后塞进状态的布局层只做三件朴素的事把信息区、服务器/授权区、筛选框、接口主区、模型区按从上到下顺序摆出来决定每块宽多宽、何时显示或折叠给整页套一个能被外部整体替换的壳所以默认界面长这样根源在 src/core/components/layouts/base.jsx 里那个 BaseLayout它只是依次放下信息容器、授权区、筛选框、接口和模型区。换句话说默认布局不是写死的模板而是一个可以整个换掉的组件——这正是自定义布局的全部前提。 自定义布局改哪 3 处各管什么核心操作就 3 处别搞复杂。改哪里三个入口各管什么组件入口上一步那个 BaseLayout 是默认布局本体想加一块或调顺序就仿它写一个新组件状态入口src/core/plugins/layout/ 里的 layout 插件管哪块显示、哪块折叠、筛选词是什么配置入口初始化参数里那个 layout 值决定用哪个组件当根布局默认是字符串 BaseLayout怎么改把新布局喂给 Swagger UI思路是包一层而不是推倒重来——直接取回 BaseLayout再在它上面叠你要的品牌栏这样默认的全部交互都还在。class BrandLayout extends React.Component { render() { const Base this.props.getComponent(BaseLayout, true) return divMyBrandBar /Base //div } }再把它注册成插件、用名字选上它本地起个页面验证即可不用动仓库里的任何文件SwaggerUI({ url: /my-api/openapi.json, plugins: [ () ({ components: { BrandLayout } }) ], layout: BrandLayout })如果你还想动态换主题或调断点layout 插件还留了状态位show 动作能把任意块标记成显示或隐藏mode 动作能给它换个模式。完全可以监听一个开关触发一次 show(editor, true)让页面从纯文档切到文档加源码编辑双栏——仓库里的 XPane 布局就是这么做的。至于颜色和断点这类更细的落在 src/style/ 的 SCSS 变量里属于另一层的事这里点到为止。从改一个页面开始再推全量回到开头新人找不到接口、文档跟官网割裂根源都是根布局那层没换成自己的。先拿一个内网小页面把 BrandLayout 跑通确认信息区和筛选框都在预期位置再考虑推给全站。想深入机制看官方布局文档。【免费下载链接】swagger-uiSwagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.项目地址: https://gitcode.com/GitHub_Trending/sw/swagger-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考