跳到正文

评论

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

纯样式 核心包

示例

李明

这次的发布流程比上次清楚多了。

在线试用 Markdown 版

代码

<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<article>（class）里面放头像和 zh-comment-body一条评论
zh-comment-headbody 里的容器昵称 zh-comment-name 与时间 zh-comment-time标题行
zh-comment-actionsbody 里的容器里面放按钮或链接回复、点赞等操作
zh-comment-repliesbody 里的容器里面放嵌套的 zh-comment回复列表，左侧有竖线并缩进

样式类

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

无障碍

  • 用 <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。