如何修改 StrongLoop 的 LoopBack Explorer CSS

Question

我们正在为我们的 REST API 使用 Strongloop 的 LoopBack，并希望为 LoopBack Explorer 修改 CSS。但是，尚不清楚正在使用哪些 CSS 文件（LoopBack 与 Swagger）以及它们所在的位置。我找不到这方面的具体文档。

Answer 1

您可以通过 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，在这种情况下，您的自定义可能会停止工作。

Answer 2

如果您没有在 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

Answer 3

您可以修改的不仅仅是 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

Answer 4

对于 loopback-component-explorer，component-config.json 中定义的 uiDirs 应该添加如下内容（解决了我的问题）。

"uiDirs": ["server/explorer"]

而不是

"uiDirs": "server/api-explorer",

Answer 5

我可以将自定义 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; 
}

如何修改 StrongLoop 的 LoopBack Explorer CSS

How to Modify the StrongLoop's LoopBack Explorer CSS

css

user-interface

loopbackjs

strongloop