在Linux下,要自定義Swagger UI的主題,你需要遵循以下步驟:
npm install swagger-ui-dist
custom.css
。在這個文件中,你可以覆蓋Swagger UI的默認樣式。例如:/* custom.css */
.swagger-ui .topbar {
background-color: #007bff;
}
.swagger-ui .info .title {
color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="node_modules/swagger-ui-dist/swagger-ui.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div id="swagger-ui"></div>
<script src="node_modules/swagger-ui-dist/swagger-ui-bundle.js"></script>
<script src="node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"></script>
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "your-swagger-json-url",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
});
window.ui = ui;
}
</script>
</body>
</html>
請注意,你可以根據需要修改custom.css
文件中的樣式規則,以實現你想要的主題效果。