如何修改 StrongLoop 的 LoopBack Explorer CSS

Question

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

Answer 1

我可以将自定义 css 样式应用于环回 api explorer header。

我遵循的步骤如下所述

1. 转到 node_modules > loopback-component-explorer > public > css 文件夹
2. 复制loopbackStyles.css
3. 在服务器文件夹下创建一个名为 explorer 的新文件夹
4. 在 explorer 下创建 css 文件夹，并将 css 文件粘贴到 css 文件夹下，即 loopbackStyles.css
5. 将以下配置添加到 component-config.json 文件中

{
  "loopback-component-explorer": {
    "mountPath": "/explorer",
    "generateOperationScopedModels": true,
    "uiDirs": "server/explorer"
  }
}

要更改环回标题颜色，我刚刚在body #header 中用我自己的颜色覆盖了backgroun-color loopbackStyles.css 中的css 选择器

用我们的自定义名称替换默认标题徽标名称。我在 loopbackStyles.css

中添加了以下 css 样式

.swagger-ui-wrap #logo{
  display: none;
}
.swagger-ui-wrap:after { 
  content: "MyOwn API Explorer";
  color: #fff;
  font-weight: bold; 
}

Answer 2

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

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

"uiDirs": ["server/explorer"]

而不是

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

Answer 4

如果您没有在 package.json 中锁定 loopback-explorer，或者如果您从新版本的 loopback(v2.x) 启动应用程序，则必须进行另一项更改：

1. 如果您使用生成器工具生成了环回应用，请编辑 server/component-config.json 并将其更改为：

   { “环回组件资源管理器”：空 }

2.按照米罗斯拉夫所说，将目录node_modules/loopback-explorer/public/复制到server/explorer/。如果复制整个目录，还可以更改 index.html 文件。

1. 编辑server/server.js文件并添加这一行：app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') }));你还必须在文件顶部添加资源管理器模块：var explorer = require('loopback-component-explorer');

4.自定义你的资源管理器的ui，所有必要的文件都在server/explorer中

Answer 5

您可以通过options.uiDirs 提供您自己版本的 Swagger UI 文件。

1. 编辑您的 server/server.js 并将此配置选项添加到资源管理器：

   app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
   

2. 将目录node_modules/loopback-explorer/public/css复制到server/explorer/css

3. 根据需要自定义复制的 CSS 文件。

您应该在 package.json 中锁定 loopback-explorer 的主要和次要版本。较新版本的 loopback-explorer 可能会更改 CSS，在这种情况下您的自定义可能会停止工作。