# HTML模板引擎

使用此模板引擎，可以方便的将数据渲染到网页上。

## 安装
```
npm install @yizhi/render
```

## 使用
使用render函数，传入模板字符串和数据对象，即可渲染出网页内容。
```typescript
import { render } from '@yizhi/render';
const html = render("/path/to/template.html", {name:"Join", age:20, love:["eat", "sleep", "code"] });
console.log(html);
```

### 内容输出
使用`{{ 表达式 }}`语法，可以将表达式的值输出到网页。
```html
<h1>{{ data.name }}</h1>
```

经过渲染后，输出的HTML内容为：
```html
<h1>Join</h1>
```

### 条件判断
在标签上使用`:if`和`:else`来进行条件判断，如果else有值，则表示elseif。


```html
<div :if="data.age < 3">你还是个宝宝</div>
<div :else="data.age < 18">你还未成年</div>
<div :else>你已经长大了</div>
```

经过渲染后，输出的HTML内容为：
```html
<div>你已经长大了</div>
```

### 循环
在标签上使用`:for`来进行循环，支持两种循环方式：

- `:for="数据项 in 数据"`
- `:for="(索引, 数据项) in 数据"`

其中，数据项可以是数组或对象。

示例：

```html
<ul>
  <li :for="item in data.love">{{ item }}</li>
</ul>

<ul>
	<li :for="(index, item) in data.love">{{ index }} - {{ item }}</li>
</ul>

<ul>
	<li :for="(key, value) in data">{{ key }} : {{ value }}</li>
</ul>
```
经过渲染后，输出的HTML内容为：
```html
<ul>
  <li>eat</li>
  <li>sleep</li>
  <li>code</li>
</ul>

<ul>
	<li>0 - eat</li>
	<li>1 - sleep</li>
	<li>2 - code</li>
</ul>

<ul>
	<li>name : Join</li>
	<li>age : 20</li>
	<li>love : eat,sleep,code</li>
</ul>
```

### 模板定义
可以使用`template`来定义模板，通过`name`属性来指定模板名称。

```html
<template name="my-template">
  <h2>{{ data.name }}</h2>
  <ul>
    <li :for="item in data.love">{{ item }}</li>
  </ul>
</template>
```

通过上面方式，我们就定义了一个名为`my-template`的模板。


### 模板使用
通过`use`标签，可以将模板内容渲染到网页上，`data`属性指定数据对象。

```html
<div>
  <h1>模板使用</h1>
  <use name="my-template" data="data"/>
</div>
```

如果模板文件在其他位置，还可以通过`from`属性指定模板文件路径。

```html
<div>
  <h1>模板使用</h1>
  <use from="/path/to/my-template.html" name="my-template" data="data"/>
</div>
```

经过渲染后，输出的HTML内容为：
```html
<div>
  <h1>模板使用</h1>
  <h2>Join</h2>
  <ul>
    <li>eat</li>
    <li>sleep</li>
    <li>code</li>
  </ul>
</div>
```