建立自訂版面配置

版面配置是一種特殊類型的元件，Swagger UI 將其用作整個應用程式的根元件。您可以定義自訂版面配置，以便高度控制最終顯示在頁面上的內容。

預設情況下，Swagger UI 會使用內建於應用程式中的 BaseLayout。您可以透過將版面配置的名稱作為 layout 參數傳遞給 Swagger UI 來指定要使用的不同版面配置。請務必將您的自訂版面配置作為元件提供給 Swagger UI。

例如，如果您想要建立只顯示操作的自訂版面配置，您可以定義 OperationsLayout

import React from "react"

// Create the layout component
class OperationsLayout extends React.Component {
  render() {
    const {
      getComponent
    } = this.props

    const Operations = getComponent("operations", true)

    return (
      <div className="swagger-ui">
        <Operations />
      </div>
    )
  }
}

// Create the plugin that provides our layout component
const OperationsLayoutPlugin = () => {
  return {
    components: {
      OperationsLayout: OperationsLayout
    }
  }
}

// Provide the plugin to Swagger-UI, and select OperationsLayout
// as the layout for Swagger-UI
SwaggerUI({
  url: "https://petstore.swagger.io/v2/swagger.json",
  plugins: [ OperationsLayoutPlugin ],
  layout: "OperationsLayout"
})

擴充預設版面配置

如果您想要圍繞 BaseLayout 進行建置，而不是取代它，您可以將 BaseLayout 拉入您的自訂版面配置並使用它

import React from "react"

// Create the layout component
class AugmentingLayout extends React.Component {
  render() {
    const {
      getComponent
    } = this.props

    const BaseLayout = getComponent("BaseLayout", true)

    return (
      <div>
        <div className="myCustomHeader">
          <h1>I have a custom header above Swagger-UI!</h1>
        </div>
        <BaseLayout />
      </div>
    )
  }
}

// Create the plugin that provides our layout component
const AugmentingLayoutPlugin = () => {
  return {
    components: {
      AugmentingLayout: AugmentingLayout
    }
  }
}

// Provide the plugin to Swagger-UI, and select AugmentingLayout
// as the layout for Swagger-UI
SwaggerUI({
  url: "https://petstore.swagger.io/v2/swagger.json",
  plugins: [ AugmentingLayoutPlugin ],
  layout: "AugmentingLayout"
})