Define and use a variable

Any HTML file is valid Daikoku language. But, you can do more with Daikoku than just regular HTML!

Create your first layout component

Open src/apis/page.html, which should look like this:

src/apis/page.html

{{#daikoku-template-wrapper "/layouts/base.html"}}
    <h1 class="text-5xl font-bold">My apis</h1>
    <div class="flex gap-5 m-5">
      {{#daikoku-apis}}
      <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>
{{/daikoku-template-wrapper}}

Add the following line at the top of your file, between the code fences:

src/apis/page.html

pageTitle: "APIs"
---

Replace both the static My CMS title heading in your HTML with the dynamic variable {pageTitle}.

src/layout/base.html

<title>My CMS</title>
<title>{{pageTitle}}</title>

Refresh the live preview of your /apis page.

Your page text should look the same, and your page title displayed in your browser tab should now read APIs instead of My CMS

Instead of typing text directly into HTML tags, you just defined and then used a variable in the two sections of your .html file, respectively.

Conditionally render elements

Daikoku includes 3 reserved keywords : _authenticated, _visible and _exact

_visible

You can use the _visible variable to control wheter or not to render a page. This can be useful for publishing or hiding a page without removing it from your project.

_authenticated

You can restrict access to a page for unauthenticated users. If an unauthenticated user tries to access the page, Daikoku will prevent it from rendering and display the Need to be logged warning.

_exact

By default, the router tries to match pages with the nearest paths. You can specify whether or not you want to match the page's path exactly.

Let's take an example:

Path	Page path	_exact	Matching
/apis/foo	/apis	false	✅
/apis	/apis	false	✅
/apis	/apis	true	✅
/apis/foo	/apis	true	❌