# 编写 mm Pendant 挂件模板

## 规则（Rules）

- pendant.html 使用框架模板引擎语法
- 数据由 `pendant.js` 的 `main` 方法返回，在模板中直接使用变量名

## 方法（Methods）

### 步骤1：输出挂件数据

挂件 js 返回 `{ list: [...], title: "标题" }`，模板中：

```html
<div class="mm_card">
  <div class="mm_view">
    <h3>${title}</h3>
  </div>
  <div class="mm_list">
    <!--{ loop list item i }-->
    <div class="mm_item">
      <a href="${item.url}">${item.title}</a>
      <span>${$to_time(item.create_time)}</span>
    </div>
    <!--{ /if }-->
  </div>
</div>
```

### 步骤2：空数据处理

```html
<!--{ if(list && list.length > 0) }-->
  <!-- 有数据时显示列表 -->
  <!--{ loop list item i }-->
    <div>${item.title}</div>
  <!--{ /if }-->
<!--{ else }-->
  <div class="empty">暂无数据</div>
<!--{ /if }-->
```

### 步骤3：分页或限制显示

```html
<!-- 只显示前5条 -->
<!--{ loop list item i }-->
  <!--{ if(i < 5) }-->
    <div>${item.title}</div>
  <!--{ /if }-->
<!--{ /if }-->
```

## 技巧（Tips）

- 变量输出用 `${变量名}`，原始 HTML 输出用 `${@变量名}`
- 循环用 `<!--{ loop data item index }-->`，`index` 从 0 开始
- 条件判断用 `<!--{ if(条件) }-->` / `<!--{ else }-->` / `<!--{ /if }-->`
- 挂件只负责展示，数据获取逻辑放在 `pendant.js` 中