如何修改StrongLoop的LoopBack Explorer CSS

Question

如何修改StrongLoop的LoopBack Explorer CSS

14

我们正在使用Strongloop的LoopBack来构建REST API，并希望修改LoopBack Explorer的CSS。然而，目前并不清楚哪些CSS文件正在使用（是LoopBack还是Swagger），以及它们的位置在哪里。我无法找到相关的文档说明。

- A2MetalCore

5个回答

11

您可以通过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 样式，这样你的自定义可能就失效了。

- Miroslav Bajtoš

1

Miroslav的回答是正确的。我删除了我的回答，因为它是不正确的。 - superkhau

2

我在server js文件中完成了这个操作，并将所有公共文件添加到server/explorer/all目录中。 app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') })); UI已更改，但没有API。 - PPB

1

@PPB 我也遇到了同样的问题，你是怎么解决这个问题的？ - Anil Gupta

在适应这个更改后，我遇到了以下错误：TypeError: app.use() 需要一个中间件函数。 - Hemadri Dasari

@Think-Twice 请查看 https://github.com/strongloop/loopback-component-explorer/blob/master/README.md#upgrading-from-v1x。现在您需要使用 explorer.routes() 而不是 explorer()。 - Miroslav Bajtoš

@MiroslavBajtoš，感谢您的回复。我已经按照在这个问题下面新添加的答案中提到的应用了自定义CSS样式。 - Hemadri Dasari

0

我能够为Loopback API Explorer标题应用自定义CSS样式。

我按照以下步骤进行：

进入node_modules > loopback-component-explorer > public > css文件夹

复制loopbackStyles.css

在server文件夹下创建一个名为explorer的新文件夹

在explorer下创建css文件夹，并将css文件粘贴到其中，即loopbackStyles.css

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

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

要更改Loopback标题的颜色，我只需在loopbackStyles.css中的body #header CSS选择器中使用自己的颜色覆盖background-color

要将默认的标题徽标名称替换为我们的自定义名称。我已经在loopbackStyles.css中添加了以下CSS样式

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

- Hemadri Dasari

0

使用 loopback-component-explorer，应该像下面这样添加在 component-config.json 中定义的 uiDirs（解决了我的问题）。

"uiDirs": ["server/explorer"]

而不是

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

- user2427771

0

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

如果您使用生成器工具生成了loopback应用程序，请编辑server/component-config.json并将其更改为以下内容：

{ "loopback-component-explorer": null }

2.按照Miroslav的说法，将目录node_modules/loopback-explorer/public/复制到server/explorer/。如果您复制整个目录，还可以更改index.html文件。

编辑server/server.js文件，并添加此行：app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') }));还必须在文件顶部添加explorer模块：var explorer = require('loopback-component-explorer');

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

- Enrique Enciso

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christiaan Westerbeek · Accepted Answer

您不仅可以修改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的评论，它是"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中。