🐛 Jane

Jane/article.ftl

@@ -124,6 +124,7 @@
 <#include "footer.ftl">
 <#if pjax><!---- pjax {#pjax} start ----></#if>
 <@comment_script oId=article.oId>
+page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
 </@comment_script>
 <#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>

Jane/common-comment.ftl

@@ -19,8 +19,6 @@
 -->
 <li id="${comment.oId}" class="comment__item">
     <div class="fn__flex">
-
-
         <div class="comment__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
         <main class="comment__main fn__flex-1">
             <div class="fn__clear ft__gray">
@@ -31,7 +29,7 @@
             </#if>
             <#if comment.isReply>
             @<a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
-                onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 28);"
+                onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 2);"
                 onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
                 class="ft__red"
             >${comment.commentOriginalCommentName}</a>

Jane/css/base.css

@@ -891,6 +891,14 @@ a {
     margin-right: 20px;
     float: left; }
 
+#comments {
+  position: relative; }
+
+.comment-body-ref {
+  position: absolute;
+  width: 664px;
+  left: 84px; }
+
 .comments__title {
   padding-top: 20px; }
 
@@ -899,6 +907,7 @@ a {
   margin: 20px 0; }
 
 .comment__avatar {
+  position: relative;
   width: 44px;
   height: 44px;
   border-radius: 3px;
@@ -906,16 +915,10 @@ a {
   background-repeat: no-repeat;
   background-position: 50%;
   margin-right: 20px; }
-
+  .comment__avatar:before, .comment__avatar:after {
-.comment__main {
-  position: relative;
-  border: 1px solid #CFD8DC;
-  border-radius: 0;
-  padding: 20px; }
-  .comment__main:before, .comment__main:after {
     position: absolute;
     top: 11px;
-    left: -16px;
+    left: 49px;
     display: block;
     width: 0;
     height: 0;
@@ -925,12 +928,18 @@ a {
     border-style: solid solid outset;
     border-width: 8px;
     border-right-color: #CFD8DC; }
-  .comment__main:after {
+  .comment__avatar:after {
     margin-top: 1px;
     margin-left: 2px;
     border-width: 7px;
     border-right-color: #fff; }
 
+.comment__main {
+  border: 1px solid #CFD8DC;
+  border-radius: 0;
+  padding: 20px;
+  background-color: #fff; }
+
 .comment__btn {
   cursor: pointer;
   color: #666; }

Jane/css/base.scss

@@ -252,6 +252,19 @@ a {
   }
 }
 
+
+// comments
+
+#comments {
+  position: relative;
+}
+
+.comment-body-ref {
+  position: absolute;
+  width: 664px;
+  left: 84px;
+}
+
 .comments {
   &__title {
     padding-top: 20px;
@@ -265,6 +278,7 @@ a {
   }
 
   &__avatar {
+    position: relative;
     width: 44px;
     height: 44px;
     border-radius: 3px;
@@ -272,18 +286,12 @@ a {
     background-repeat: no-repeat;
     background-position: 50%;
     margin-right: 20px;
-  }
 
-  &__main {
-    position: relative;
-    border: 1px solid #CFD8DC;
-    border-radius: 0;
-    padding: 20px;
     &:before,
     &:after {
       position: absolute;
       top: 11px;
-      left: -16px;
+      left: 49px;
       display: block;
       width: 0;
       height: 0;
@@ -302,6 +310,13 @@ a {
     }
   }
 
+  &__main {
+    border: 1px solid #CFD8DC;
+    border-radius: 0;
+    padding: 20px;
+    background-color: #fff;
+  }
+
   &__btn {
     cursor: pointer;
     color: #666;