Import And Export

Import page

using y:import="{{ path }}" syntax to import page, or declare at page setting file, then using YAOML tag directly.

Import at content (y:import)

Page Setting

{
"data" : {
"title": "Pet store",
"pet": {
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},
"user": {
"navpage": "/components/header"
}
}
}

YAOML

Header page

<div> {{ title }} </div>

Nav Page

<ul>
<li> <navigator url="/">Home</navigator> </li>
<li> <navigator url="/news">News</navigator> </li>
</ul>

Main page

<header y:import="/components/header" ></header>
<nav y:import="{{ user.navpage }}" ></nav>
<section class="breadcrumb">
<ul>
<li><navigator url="/pets">L[[Pets]]</navigator></li>
<li>{{ pet.name }}</li>
</ul>
</section>

Rendering

<div> Pet store </div>
<ul>
<li> <navigator url="/">Home</navigator> </li>
<li> <navigator url="/news">News</navigator> </li>
</ul>
<section class="breadcrumb">
<ul>
<li><navigator url="/pets">Pets</navigator></li>
<li>Cookie</li>
</ul>
</section>

Markdown or Text

Header page (Markdown)

# {{ title }}

Main page ( Markdown )

<% y:import="/components/header" %>
## {{ pet.name }}
ID: {{ pet.id }}
TYPE: {{ pet.type }}

Rendering ( Markdown )

# Pet store
## Cookie
ID: 10283728
TYPE: cat

Import at page setting

Page setting

declare components need import at the import variable.

{
"data" : {
"title": "Pet store",
"pet": {
"id":"10283728",
"name":"Cookie",
"type":"cat",
"attrs": {
"weight": 2000,
"height": 20,
"eyes-color": "blue"
}
},
"user": {
"navpage": "/components/header"
},
"pets": {
"api": "/pets/search",
"query": {
"page": 1
}
}
},
"import": {
"card":"/components/card",
"button": "@/yao/material-ui/button",
"notification": "@/yao/material-ui/notification"
}
}

YAOML Content

<section class="cardlist">
<div class="head">Pets:</div>
<div class="body">
<!-- /components/card -->
<card y:each="{{ pets as pet }}" title="{{pet.name}}" > {{pet.description}} </card>
</div>
<div class="footer">
<button> Next </button>
</div>
</section>
<section>

Markdown/Text

# Pets
<card y:each="{{ pets as pet }}">{{pet.description}}</card>

Remote components (@)

using @ symbol declare import components from the remote server.

import from the yao official registry server:

<button y:import="@/yao/material-ui/button" > Button </button>
<!-- Page setting-->
<yao-setting type="json">
{
"data": {},
"import": {
"button": "@/yao/material-ui/button",
},
"registry": {
"my-server": "https://your-domain.com/registry"
}
}
</yao-setting>
<button> Button </button>

import from the custom registry server:

<button y:import="@my-server:/yao/material-ui/button" > Button </button>
<!-- Page setting-->
<yao-setting type="json">
{
"data": {},
"import": {
"button": "@my-server:/yao/material-ui/button",
}
}
</yao-setting>
<button> Button </button>

Component data (value)

Using the value attribute assigns value to the component data.

The component page /pets-ui/block

<yao-setting type="json">
{
"data" : {
"title": "Pet store",
"description": "Lots of pets here"
}
}
</yao-setting>
<div>
<div class="title">{{title}}</div>
<div class="description">{{description}}</div>
</div>

Sample1

<yao-setting type="json">
{
"import" : {
"block": "/pets-ui/block"
}
}
</yao-setting>
<div>
<block></block>
</div>

Rendering:

<div>
<div>
<div class="title">Pet store</div>
<div class="description">Lots of pets here</div>
</div>
</div>

Sample2

<yao-setting type="json">
{
"data": {
"block1": {
"title": "Dogs home",
"description": "Lots of dogs here"
}
},
"import" : {
"block": "/pets-ui/block"
}
}
</yao-setting>
<div>
<block value="{{block1}}"></block>
</div>

Rendering:

<div>
<div>
<div class="title">Dogs home</div>
<div class="description">Lots of dogs here</div>
</div>
</div>

Export page

All the pages were auto export, import directly.