如何修改 StrongLoop 的 LoopBack Explorer CSS
How to Modify the StrongLoop's LoopBack Explorer CSS
我们正在为我们的 REST API 使用 Strongloop 的 LoopBack,并希望为 LoopBack Explorer 修改 CSS。但是,尚不清楚正在使用哪些 CSS 文件(LoopBack 与 Swagger)以及它们所在的位置。我找不到这方面的具体文档。
您可以通过 options.uiDirs
.
提供自己版本的 Swagger UI 文件
编辑您的 server/server.js
并将此配置选项添加到资源管理器:
app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
复制目录node_modules/loopback-explorer/public/css
到server/explorer/css
根据需要自定义复制的 CSS 文件。
您应该在 package.json 中锁定 loopback-explorer 的主要和次要版本。较新版本的 loopback-explorer 可能会更改 CSS,在这种情况下,您的自定义可能会停止工作。
如果您没有在 package.json 中锁定 loopback-explorer,或者如果您从新版本的 loopback(v2.x) 启动您的应用程序,则必须进行另一项更改:
如果您使用生成器工具生成环回应用程序,请编辑 server/component-config.json
并将其更改为:
{
"loopback-component-explorer": 空
}
正如 Miroslav 所说,2.Copy 目录 node_modules/loopback-explorer/public/
到 server/explorer/
。如果您复制整个目录,您还可以更改 index.html 文件。
- 编辑
server/server.js
文件并添加此行:app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
您还必须在文件顶部添加资源管理器模块:var explorer = require('loopback-component-explorer');
4.Customize你的资源管理器ui,所有需要的文件都在server/explorer
您可以修改的不仅仅是 css。而且,如果您像我一样使用 slc loopback
生成 Loopback 应用程序,您会发现您的 server/server.js
不会立即按照您可以配置它的方式进行配置,就像它在接受的答案中显示的那样。
相反,您可以使用 server/component-config.json
来指示环回组件资源管理器为 swagger-ui 使用静态文件的替代目录。使用下面的 uiDirs
配置,我将其配置为在 server/explorer
目录中查找静态文件。
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"uiDirs": "server/explorer",
"apiInfo": {
"title": "My API",
"description": "Description of my API"
}
}
}
*使用 IISNode 时,uiDirs
必须设置为 "explorer"
,否则根据 @phegde 的评论
,它是 "server/explorer"
在我的服务器目录中,我创建了一个 index.html,它是 node_modules/loopback-component-explorer/public/index.html
的副本,我还创建了一个带有自定义徽标的图像文件夹。
最后,如果您想要自定义 css,请将 node_modules/loopback-component-explorer/public/css/loopbackStyles.css
复制到 server/explorer/css/loopbackStyles.css
对于 loopback-component-explorer
,component-config.json
中定义的 uiDirs
应该添加如下内容(解决了我的问题)。
"uiDirs": ["server/explorer"]
而不是
"uiDirs": "server/api-explorer",
我可以将自定义 css 样式应用于环回 api 资源管理器 header。
我遵循的步骤如下所述
- Goto node_modules > loopback-component-explorer > public > css folder
- Copy loopbackStyles.css
- Create a new folder called explorer under server folder
- create css folder under explorer and paste the css file under css folder i.e., loopbackStyles.css
- Add below config to component-config.json file
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"generateOperationScopedModels": true,
"uiDirs": "server/explorer"
}
}
要更改环回 header 颜色,我刚刚在 body #header
css 选择器 loopbackStyles.css
中用我自己的颜色覆盖了 backgroun-color
将默认的 header 徽标名称替换为我们的自定义名称。我在 loopbackStyles.css
中添加了以下 css 样式
.swagger-ui-wrap #logo{
display: none;
}
.swagger-ui-wrap:after {
content: "MyOwn API Explorer";
color: #fff;
font-weight: bold;
}
我们正在为我们的 REST API 使用 Strongloop 的 LoopBack,并希望为 LoopBack Explorer 修改 CSS。但是,尚不清楚正在使用哪些 CSS 文件(LoopBack 与 Swagger)以及它们所在的位置。我找不到这方面的具体文档。
您可以通过 options.uiDirs
.
编辑您的
server/server.js
并将此配置选项添加到资源管理器:app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
复制目录
node_modules/loopback-explorer/public/css
到server/explorer/css
根据需要自定义复制的 CSS 文件。
您应该在 package.json 中锁定 loopback-explorer 的主要和次要版本。较新版本的 loopback-explorer 可能会更改 CSS,在这种情况下,您的自定义可能会停止工作。
如果您没有在 package.json 中锁定 loopback-explorer,或者如果您从新版本的 loopback(v2.x) 启动您的应用程序,则必须进行另一项更改:
如果您使用生成器工具生成环回应用程序,请编辑
server/component-config.json
并将其更改为:{ "loopback-component-explorer": 空 }
2.Copy 目录 node_modules/loopback-explorer/public/
到 server/explorer/
。如果您复制整个目录,您还可以更改 index.html 文件。
- 编辑
server/server.js
文件并添加此行:app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
您还必须在文件顶部添加资源管理器模块:var explorer = require('loopback-component-explorer');
4.Customize你的资源管理器ui,所有需要的文件都在server/explorer
您可以修改的不仅仅是 css。而且,如果您像我一样使用 slc loopback
生成 Loopback 应用程序,您会发现您的 server/server.js
不会立即按照您可以配置它的方式进行配置,就像它在接受的答案中显示的那样。
相反,您可以使用 server/component-config.json
来指示环回组件资源管理器为 swagger-ui 使用静态文件的替代目录。使用下面的 uiDirs
配置,我将其配置为在 server/explorer
目录中查找静态文件。
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"uiDirs": "server/explorer",
"apiInfo": {
"title": "My API",
"description": "Description of my API"
}
}
}
*使用 IISNode 时,uiDirs
必须设置为 "explorer"
,否则根据 @phegde 的评论
"server/explorer"
在我的服务器目录中,我创建了一个 index.html,它是 node_modules/loopback-component-explorer/public/index.html
的副本,我还创建了一个带有自定义徽标的图像文件夹。
最后,如果您想要自定义 css,请将 node_modules/loopback-component-explorer/public/css/loopbackStyles.css
复制到 server/explorer/css/loopbackStyles.css
对于 loopback-component-explorer
,component-config.json
中定义的 uiDirs
应该添加如下内容(解决了我的问题)。
"uiDirs": ["server/explorer"]
而不是
"uiDirs": "server/api-explorer",
我可以将自定义 css 样式应用于环回 api 资源管理器 header。
我遵循的步骤如下所述
- Goto node_modules > loopback-component-explorer > public > css folder
- Copy loopbackStyles.css
- Create a new folder called explorer under server folder
- create css folder under explorer and paste the css file under css folder i.e., loopbackStyles.css
- Add below config to component-config.json file
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"generateOperationScopedModels": true,
"uiDirs": "server/explorer"
}
}
要更改环回 header 颜色,我刚刚在 body #header
css 选择器 loopbackStyles.css
backgroun-color
将默认的 header 徽标名称替换为我们的自定义名称。我在 loopbackStyles.css
.swagger-ui-wrap #logo{
display: none;
}
.swagger-ui-wrap:after {
content: "MyOwn API Explorer";
color: #fff;
font-weight: bold;
}