Question

我们在REST API中使用Strongloop的LoopBack，并希望修改LoopBack Explorer的CSS。但是，目前尚不清楚使用哪些CSS文件（LoopBack vs Swagger）以及它们的位置。我无法为此找到具体的文档。

Answer 1

您可以修改的不仅仅是css。而且，如果你像我一样使用slc loopback生成Loopback应用程序，你会发现你的server/server.js没有立即看起来像你接受的答案中显示的那样。

相反，您可以使用server/component-config.json指示loopback组件资源管理器为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的评论<{1}}

在我的服务器目录中，我创建了一个index.html，它是"server/explorer"的副本，我还创建了一个带有自定义徽标的图像文件夹。

最后，如果您想要自定义css，请将node_modules/loopback-component-explorer/public/index.html复制到node_modules/loopback-component-explorer/public/css/loopbackStyles.css

Answer 2

您可以通过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文件。

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

Answer 3

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

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

{ “loopback-component-explorer”：null }

2.将目录node_modules/loopback-explorer/public/复制到server/explorer/，正如Miroslav所说。如果复制整个目录，也可以更改index.html文件。

修改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 4

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

"uiDirs": ["server/explorer"]

而不是

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

Answer 5

我能够将自定义CSS样式应用于环回api资源管理器标头。

我遵循的步骤如下所述

转到node_modules>回送组件浏览器>公共> css文件夹

复制loopbackStyles.css

在服务器文件夹下创建一个名为Explorer的新文件夹

在资源管理器下创建css文件夹，然后将css文件粘贴到css文件夹下，即loopbackStyles.css

将以下配置添加到component-config.json文件

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

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

用我们的自定义名称替换默认标题徽标名称。我在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

5 个答案: