diff --git a/models/CommentModel.go b/models/CommentModel.go
index 1ada1c09..109f273e 100644
--- a/models/CommentModel.go
+++ b/models/CommentModel.go
@@ -8,7 +8,7 @@ import (
 	"github.com/mindoc-org/mindoc/conf"
 )
 
-//Comment struct
+// Comment struct
 type Comment struct {
 	CommentId int `orm:"pk;auto;unique;column(comment_id)" json:"comment_id"`
 	Floor     int `orm:"column(floor);type(unsigned);default(0)" json:"floor"`
@@ -30,11 +30,12 @@ type Comment struct {
 	// UserAgent 评论者浏览器内容
 	UserAgent string `orm:"column(user_agent);size(500)" json:"user_agent"`
 	// Parent 评论所属父级
-	ParentId     int `orm:"column(parent_id);type(int);default(0)" json:"parent_id"`
-	AgreeCount   int `orm:"column(agree_count);type(int);default(0)" json:"agree_count"`
-	AgainstCount int `orm:"column(against_count);type(int);default(0)" json:"against_count"`
-	Index        int `orm:"-" json:"index"`
-	ShowDel      int `orm:"-" json:"show_del"`
+	ParentId     int    `orm:"column(parent_id);type(int);default(0)" json:"parent_id"`
+	AgreeCount   int    `orm:"column(agree_count);type(int);default(0)" json:"agree_count"`
+	AgainstCount int    `orm:"column(against_count);type(int);default(0)" json:"against_count"`
+	Index        int    `orm:"-" json:"index"`
+	ShowDel      int    `orm:"-" json:"show_del"`
+	Avatar       string `orm:"-" json:"avatar"`
 }
 
 // TableName 获取对应数据库表名.
@@ -90,6 +91,7 @@ func (m *Comment) QueryCommentByDocumentId(doc_id, page, pagesize int, member *M
 		comments[i].Index = (i + 1) + (page-1)*pagesize
 		if member != nil && comments[i].CanDelete(member.MemberId, bookRole) {
 			comments[i].ShowDel = 1
+			comments[i].Avatar = member.Avatar
 		}
 	}
 	return
@@ -103,7 +105,7 @@ func (m *Comment) Update(cols ...string) error {
 	return err
 }
 
-//Insert 添加一条评论.
+// Insert 添加一条评论.
 func (m *Comment) Insert() error {
 	if m.DocumentId <= 0 {
 		return errors.New("评论文档不存在")
diff --git a/static/css/kancloud.css b/static/css/kancloud.css
index 2c1f1ebf..04fe1db6 100644
--- a/static/css/kancloud.css
+++ b/static/css/kancloud.css
@@ -798,6 +798,13 @@ table>tbody>tr:hover {
     line-height: 24px
 }
 
+.m-comment .comment-item .info img {
+    height: 22px;
+    border-radius: 50%;
+    margin-right: 4px;
+    display: ruby;
+}
+
 .m-comment .comment-item .vote {
     display: inline-block;
     margin-right: 12px
diff --git a/static/js/kancloud.js b/static/js/kancloud.js
index d6ebd370..f759cd85 100644
--- a/static/js/kancloud.js
+++ b/static/js/kancloud.js
@@ -77,26 +77,39 @@ function pageClicked($page, $docid) {
     });
 }
 
+function renderOperateSection(comment) {
+    const deleteIcon = comment.show_del == 1
+        ? `<i class="delete e-delete glyphicon glyphicon-remove" onclick="onDelComment(${comment.comment_id})"></i>`
+        : '';
+
+    return `
+        <span class="operate ${comment.show_del == 1 ? 'toggle' : ''}">
+            <span class="number">${comment.index}#</span>
+            ${deleteIcon}
+        </span>`;
+}
+
 // 加载评论
 function loadComment($page, $docid) {
     $("#commentList").empty();
-    var html = ""
-    var c = $page.List;
-    for (var i = 0; c && i < c.length; i++) {
-        html += "<div class=\"comment-item\" data-id=\"" + c[i].comment_id + "\">";
-        html += "<p class=\"info\"><a class=\"name\">" + c[i].author + "</a><span class=\"date\">" + timeFormat(c[i].comment_date) + "</span></p>";
-        html += "<div class=\"content\">" + c[i].content + "</div>";
-        html += "<p class=\"util\">";
-        if (c[i].show_del == 1) html += "<span class=\"operate toggle\">";
-        else html += "<span class=\"operate\">";
-        html += "<span class=\"number\">" + c[i].index + "#</span>";
-        if (c[i].show_del == 1) html += "<i class=\"delete e-delete glyphicon glyphicon-remove\" style=\"color:red\" onclick=\"onDelComment(" + c[i].comment_id + ")\"></i>";
-        html += "</span>";
-        html += "</p>";
-        html += "</div>";
+    let html = ""
+    let c = $page.List;
+    for (let i = 0; c && i < c.length; i++) {
+        const comment = c[i];
+        html += `
+        <div class="comment-item" data-id="${comment.comment_id}">
+            <p class="info">
+                <img src="${comment.avatar}" alt="">
+                <a class="name">${comment.author}</a>
+                <span class="date">${timeFormat(comment.comment_date)}</span>
+            </p>
+            <div class="content">${comment.content}</div>
+            <p class="util">
+                ${renderOperateSection(comment)}
+            </p>
+        </div>`;
     }
     $("#commentList").append(html);
-
     if ($page.TotalPage > 1) {
         $("#page").bootstrapPaginator({
             currentPage: $page.PageNo,
@@ -114,7 +127,6 @@ function loadComment($page, $docid) {
 
 // 删除评论
 function onDelComment($id) {
-    console.log($id);
     $.ajax({
         url: "/comment/delete",
         data: { "id": $id },
diff --git a/views/document/default_read.tpl b/views/document/default_read.tpl
index 039daa3c..9f672345 100644
--- a/views/document/default_read.tpl
+++ b/views/document/default_read.tpl
@@ -35,7 +35,7 @@
         window.IS_DOCUMENT_INDEX = '{{if .IS_DOCUMENT_INDEX}}true{{end}}' === 'true';
         window.IS_DISPLAY_COMMENT = '{{if .Model.IsDisplayComment}}true{{end}}' === 'true';
     </script>
-    <script type="text/javascript">window.book={"identify":"{{.Model.Identify}}"};</script>
+    <script type="text/javascript">window.book={"identify": '{{.Model.Identify}}'};</script>
     <style>
         .btn-mobile {
             position: absolute;
@@ -53,13 +53,13 @@
             }
         }
 
-        .svg { 
+        .svg {
             display: inline-block;
             position: relative;
             width: 100%;
             height: 100%;
-            vertical-align: middle; 
-            overflow: auto; 
+            vertical-align: middle;
+            overflow: auto;
         }
     </style>
 </head>