# 评论

纯样式组件：不需要 JS，写好标记即可。评论列表项：头像、昵称、时间、正文、操作，回复缩进显示。头像用 zh-avatar。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<article class="zh-comment">
  <span class="zh-avatar" data-name="李明" data-size="sm"></span>
  <div class="zh-comment-body">
    <div class="zh-comment-head"><span class="zh-comment-name">李明</span><time class="zh-comment-time" datetime="2026-10-04T15:20">2 小时前</time></div>
    <p class="zh-comment-text">这次的发布流程比上次清楚多了。</p>
    <div class="zh-comment-actions"><button class="zh-btn sm text">回复</button><button class="zh-btn sm text">赞</button></div>
  </div>
</article>
```

## 样式类

`zh-comment`、`zh-comment-body`、`zh-comment-head`、`zh-comment-name`、`zh-comment-time`、`zh-comment-text`、`zh-comment-actions`、`zh-comment-replies`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-comment` | <article>（class） | 里面放头像和 zh-comment-body | 一条评论 |
| `zh-comment-head` | body 里的容器 | 昵称 zh-comment-name 与时间 zh-comment-time | 标题行 |
| `zh-comment-actions` | body 里的容器 | 里面放按钮或链接 | 回复、点赞等操作 |
| `zh-comment-replies` | body 里的容器 | 里面放嵌套的 zh-comment | 回复列表，左侧有竖线并缩进 |

## 无障碍

- 用 <article> 表示一条评论，时间用 <time datetime>
- 回复嵌套在 zh-comment-replies 里，层级不要超过两层

## 常见问题

### 评论是什么？

评论列表项：头像、昵称、时间、正文、操作，回复缩进显示。头像用 zh-avatar。

### 怎么使用评论？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 评论支持键盘和读屏吗？

用 <article> 表示一条评论，时间用 <time datetime>；回复嵌套在 zh-comment-replies 里，层级不要超过两层。

### 评论需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。