https://github.com/b3log/solo/issues/12286

bruce/common-comment.ftl

@@ -0,0 +1,24 @@
+<div class="row comment" id="${comment.oId}">
+    <img class="col-sm-1" title="${comment.commentName}"
+         alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
+    <div class="col-sm-11">
+        <div class="row">
+        <#if "http://" == comment.commentURL>
+            <a>${comment.commentName}</a>
+        <#else>
+            <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+        </#if>
+        <#if comment.isReply>@
+            <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+               onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+               onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+        </#if>
+
+            <span class="gray">• ${comment.commentDate2?string("yy-MM-dd HH:mm")} • <#if article.commentable>
+                <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">Reply</a>
+            </#if></span>
+
+        </div>
+        <div class="row code-highlight">${comment.commentContent}</div>
+    </div>
+</div>

bruce/css/bruce.css

@@ -117,7 +117,8 @@ h4, h5, h6 {
 .em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, 
 .em10, .em11, .em12, .em13, .em14 {
     cursor: pointer;
-    background-image: url("../images/emotions/emotions.png");
+    background-image: url("../../../images/emotions/emotions.png");
+    background-size: 120px;
     float: left;
     height: 24px;
     margin-right: 5px;

bruce/css/bruce.min.css

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@charset "utf-8";.article-date,.article-tags,.article-title,.footer{text-align:center}.footer,.header{background-color:#f9f9f9}body,button,input,select,textarea{font:400 1em/1.8 Avenir,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;letter-spacing:.01rem}.site{padding:0 2em;margin:0 auto;font-size:16px}h4,h5,h6{font-weight:700}.article{margin-bottom:90px}.article-tags{font-size:14px}.article-date{font-size:12px;margin-top:6px;margin-bottom:12px}.article-content{font-size:1.1em}.article-content img{max-width:100%}.header{border-bottom:1px solid #ddd;margin-bottom:20px}.nav-item{position:relative;display:inline-block;padding:10px;font-weight:500}.comment{margin-bottom:32px}.comment p{margin-bottom:0}#captcha,#captchaReply,#emotions span,#emotionsReply span,.form-control{margin-top:15px}.cmtFromSym{font-size:12px;color:#ccc;margin-bottom:1em}.cmtForm{margin-top:24px}.gray{color:#ccc}.em00,.em01,.em02,.em03,.em04,.em05,.em06,.em07,.em08,.em09,.em10,.em11,.em12,.em13,.em14{cursor:pointer;background-image:url(../images/emotions/emotions.png);float:left;height:24px;margin-right:5px;width:24px;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out}#emotions span:hover{transform:scale(1.2) rotate(360deg);-webkit-transform:scale(1.2) rotate(360deg);-moz-transform:scale(1.2) rotate(360deg)}.em01{background-position:-24px 0}.em02{background-position:-48px 0}.em03{background-position:-72px 0}.em04{background-position:-96px 1px}.em05{background-position:0 -24px}.em06{background-position:-24px -24px}.em07{background-position:-48px -24px}.em08{background-position:-72px -24px}.em09{background-position:-96px -24px}.em10{background-position:0 -48px}.em11{background-position:-24px -48px}.em12{background-position:-48px -48px}.em13{background-position:-72px -48px}.em14{background-position:-96px -48px}.footer{padding:40px 0;margin-top:20px;color:#999;border-top:1px solid #e5e5e5}.article-relative{margin-top:48px}.right{float:right}
+@charset "utf-8";.article-date,.article-tags,.article-title,.footer{text-align:center}.footer,.header{background-color:#f9f9f9}body,button,input,select,textarea{font:400 1em/1.8 Avenir,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;letter-spacing:.01rem}.site{padding:0 2em;margin:0 auto;font-size:16px}h4,h5,h6{font-weight:700}.article{margin-bottom:90px}.article-tags{font-size:14px}.article-date{font-size:12px;margin-top:6px;margin-bottom:12px}.article-content{font-size:1.1em}.article-content img{max-width:100%}.header{border-bottom:1px solid #ddd;margin-bottom:20px}.nav-item{position:relative;display:inline-block;padding:10px;font-weight:500}.comment{margin-bottom:32px}.comment p{margin-bottom:0}#captcha,#captchaReply,#emotions span,#emotionsReply span,.form-control{margin-top:15px}.cmtFromSym{font-size:12px;color:#ccc;margin-bottom:1em}.cmtForm{margin-top:24px}.gray{color:#ccc}.em00,.em01,.em02,.em03,.em04,.em05,.em06,.em07,.em08,.em09,.em10,.em11,.em12,.em13,.em14{cursor:pointer;background-image:url(../../../images/emotions/emotions.png);background-size:120px;float:left;height:24px;margin-right:5px;width:24px;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out}#emotions span:hover{transform:scale(1.2) rotate(360deg);-webkit-transform:scale(1.2) rotate(360deg);-moz-transform:scale(1.2) rotate(360deg)}.em01{background-position:-24px 0}.em02{background-position:-48px 0}.em03{background-position:-72px 0}.em04{background-position:-96px 1px}.em05{background-position:0 -24px}.em06{background-position:-24px -24px}.em07{background-position:-48px -24px}.em08{background-position:-72px -24px}.em09{background-position:-96px -24px}.em10{background-position:0 -48px}.em11{background-position:-24px -48px}.em12{background-position:-48px -48px}.em13{background-position:-72px -48px}.em14{background-position:-96px -48px}.footer{padding:40px 0;margin-top:20px;color:#999;border-top:1px solid #e5e5e5}.article-relative{margin-top:48px}.right{float:right}

bruce/macro-comments.ftl

@@ -1,30 +1,7 @@
 <#macro comments commentList article>
 <div class="row" id="comments">
     <#list commentList as comment>
-    <div class="row comment" id="${comment.oId}">
-        <img class="col-sm-1" title="${comment.commentName}"
-             alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
-        <div class="col-sm-11">
-            <div class="row">
-                <#if "http://" == comment.commentURL>
-                <a>${comment.commentName}</a>
-                <#else>
-                <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
-                </#if>
-                <#if comment.isReply>@
-                <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
-                   onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
-                   onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
-                </#if>
-
-                <span class="gray">• ${comment.commentDate?string("yy-MM-dd HH:mm")} • <#if article.commentable>
-                    <a rel="nofollow" href="javascript:replyTo('${comment.oId}');">Reply</a>
-                    </#if></span>
-
-            </div>
-            <div class="row code-highlight">${comment.commentContent}</div>
-        </div>
-    </div>
+    <#include "common-comment.ftl"/>
     </#list>
 </div>
 
@@ -134,32 +111,6 @@
                             "externalRelevantArticles1Label": "${externalRelevantArticlesLabel}"
                         });
 
-                        var addComment = function (result, state) {
-                            var commentHTML = '<div class="row comment" id="' + result.oId + '"><img class="col-sm-1" \
-                                    title="' + result.userName + '" alt="' + result.userName +
-                                    '" src="' + result.commentThumbnailURL
-                                    + '"/><div class="col-sm-11"><div class="row">' + result.replyNameHTML;
-
-
-
-//                            if (state !== "") {
-//                                var commentOriginalCommentName = $("#" + page.currentCommentId
-//                                        + " .comment-panel>.left a").first().text();
-//                                commentHTML += '&nbsp;@&nbsp;<a href="${servePath}'
-//                                        + result.commentSharpURL.split("#")[0] + '#' + page.currentCommentId + '"'
-//                                        + 'onmouseover="page.showComment(this, \'' + page.currentCommentId + '\', 20);"'
-//                                        + 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">'
-//                                        + commentOriginalCommentName + '</a>';
-//                            }
-
-                            commentHTML += '<span class="gray"> • ' + result.commentDate.substring(2, 16)
-                                    + ' • <a rel="nofollow" href="javascript:replyTo('
-                                    + result.oId + ');">Reply</a></span></div><div class="row">' +
-                            Util.replaceEmString($("#comment" + state).val()) + '</div>';
-
-                            return commentHTML;
-                        };
-
                         var replyTo = function (id) {
                             var commentFormHTML = "<table class='cmtReplyForm col-sm-12 form-horizontal' id='replyForm'>";
                             page.addReplyForm(id, commentFormHTML);