How can i pull specific open api swagger file into markdown file using openapi src syntax in hugo

support
1

I used this approach to integrate multiple Swagger files into Hugo, but failed request your help:

  1. Install and Configure Swagger UI:
  • First, you need to have Swagger UI installed and configured in your Hugo project. You can do this by downloading the Swagger UI distribution or using a CDN.
  1. Organize Your Swagger Files:
  • Place your Swagger (OpenAPI) files in a specific directory within your Hugo project, such as static/swagger/.
  1. Create Hugo Shortcodes:
  • Create a shortcode in Hugo to embed Swagger UI with the specified Swagger file. For instance, create a file named swagger.html in the layouts/shortcodes/ directory with the following content:

html

Copy code

<div id="swagger-ui-{{ .Get "file" }}"></div>
<script>
  window.onload = function() {
    const ui = SwaggerUIBundle({
      url: '{{ "static/swagger/" | relURL }}{{ .Get "file" }}',
      dom_id: '#swagger-ui-{{ .Get "file" }}',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      layout: "StandaloneLayout"
    })
    window.ui = ui
  }
</script>
  1. Embed Swagger Files in Your Content:
  • Use the shortcode in your Hugo content files to embed the Swagger UI with the desired Swagger file. For example, in your Markdown file:

markdown

Copy code

## API Documentation 1
{{< swagger file="swagger1.yaml" >}}

## API Documentation 2
{{< swagger file="swagger2.yaml" >}}
  1. Customize as Needed:
  • Adjust the Swagger UI settings and styles as needed to fit your documentation theme.
2

Maybe you want to point out what your problem is. With just the instructions we would just be guessing around.

Best if you share your code and adding details about what your problem is

See:

https://discourse.gohugo.io/t/requesting-help/9132/2

3

Hello…I need to render API documentation using multiple Swagger files. Is this possible with Hugo documentation? If so, could you please guide me on how to achieve it?
Thanks in advance.

4

You provide far too little context. It’s not clear if you have something that works partially or not at all, it’s not clear what role all this JavaScript code is playing in that (JS is not a Hugo issue).
If you want to receive useful and speedy help, your best bet is to post the link to your repository, so people can see what you have and where problems might arise from.

5

This is a simple/crude example that allows one instance per page. You can pull in remote, global, or page resources.

git clone --single-branch -b hugo-forum-topic-49979 https://github.com/jmooring/hugo-testing hugo-forum-topic-49979
cd hugo-forum-topic-49979
npm ci
hugo server