Skip to main content

Style your APIs page

Style an individual page

Using HTML’s own

tags, you can style items on your page. Adding attributes and directives to these tags gives you even more ways to style.

Copy the following code and paste it into src/pages/apis/page.html:

src/pages/apis/page.html
_exact: true

---
<head>
    <link href="./styles/api.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1>My apis</h1>
    {{#daikoku-apis}}
    <div class="api">
        <p>Api : {{api.name}}</p>
        <p>{{api.smallDescription}}</p>
    </div>
    {{/daikoku-apis}}
</body>

Add the following code a new file called src/styles/api.css:

src/styles/api.css
.api {
    border-radius: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    max-width: 32rem;
    padding: 1rem;
}

Add external CSS component library

tip

Writing a Daikoku template is very much like writing HTML, so you can use all HTML tags and import evertything, including external CSS external librairies.

src/pages/apis/page.html

<head>
    <link href="./styles/api.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="m-5">
    <h1 class="text-5xl font-bold">My apis</h1>
    <div class="flex gap-5 m-5">
      {{#daikoku-apis}}
      <div class="api">
          <p>Api : {{api.name}}</p>
          <p>{{api.smallDescription}}</p>
      </div>
      <div class="card bg-base-100 w-96 shadow-xl">
        <figure>
          <img
            src="https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg"
            alt="Shoes" />
        </figure>
        <div class="card-body">
          <h2 class="card-title">
            {{api.name}}
            <div class="badge badge-secondary">{{api.version}}</div>
          </h2>
          <p>{{api.description}}</p>
        </div>
      </div>
      {{/daikoku-apis}}
    </div>
</body>

Visit your APIs page in your browser again.

result