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:
{{#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:
pageTitle: "APIs"
---
Replace both the static My CMS
title heading in your HTML with the dynamic variable {pageTitle}
.
<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 | ❌ |