https://github.com/b3log/solo/issues/12651 Jane

Jane/article.ftl

@@ -99,7 +99,7 @@
         </div>
 
         <#if previousArticlePermalink?? || nextArticlePermalink??>
-        <div class="article__near fn__flex">
+        <div class="article__near article__near--point fn__flex">
             <#if nextArticlePermalink??>
                 <a href="${servePath}${nextArticlePermalink}" rel="next"
                    class="fn__flex-1 first">
@@ -122,12 +122,30 @@
     </div>
 
     <@comments commentList=articleComments article=article></@comments>
+    <#if 0 != relevantArticlesDisplayCount>
+        <div id="relevantArticles" class="article__near"></div>
+    </#if>
+    <#if 0 != randomArticlesDisplayCount>
+        <div id="randomArticles" class="article__near"></div>
+    </#if>
+    <#if externalRelevantArticlesDisplayCount?? && 0 != externalRelevantArticlesDisplayCount>
+        <div id="externalRelevantArticles" class="article__near"></div>
+    </#if>
     <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 <#if pjax><!---- pjax {#pjax} start ----></#if>
 <@comment_script oId=article.oId commentable=article.commentable>
 page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
+<#if 0 != externalRelevantArticlesDisplayCount>
+    page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>");
+</#if>
+<#if 0 != randomArticlesDisplayCount>
+    page.loadRandomArticles();
+</#if>
+<#if 0 != relevantArticlesDisplayCount>
+    page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticles1Label}</h4>');
+</#if>
 </@comment_script>
 <#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>

Jane/css/base.css

@@ -858,7 +858,7 @@ a {
 .article__near {
   margin: 50px 0 70px;
   position: relative; }
-  .article__near:before {
+  .article__near--point:before {
     width: 8px;
     height: 8px;
     position: absolute;
@@ -870,6 +870,8 @@ a {
     border-radius: 50%;
     background: #ddd;
     box-shadow: 0 1px 2px #fff; }
+  .article__near ul {
+    list-style: none; }
   .article__near a {
     font-size: 12px;
     line-height: 1.6em;
@@ -880,7 +882,8 @@ a {
       color: #555; }
     .article__near a.first {
       text-align: right; }
-  .article__near strong {
+  .article__near strong,
+  .article__near h4 {
     margin-bottom: 6px;
     font-size: 14px;
     letter-spacing: 2px;

Jane/css/base.scss

@@ -201,7 +201,7 @@ a {
   &__near {
     margin: 50px 0 70px;
     position: relative;
-    &:before {
+    &--point:before {
       width: 8px;
       height: 8px;
       position: absolute;
@@ -214,6 +214,9 @@ a {
       background: #ddd;
       box-shadow: 0 1px 2px #fff;
     }
+    ul {
+      list-style: none;
+    }
     a {
       font-size: 12px;
       line-height: 1.6em;
@@ -228,7 +231,8 @@ a {
         text-align: right;
       }
     }
-    strong {
+    strong,
+    h4 {
       margin-bottom: 6px;
       font-size: 14px;
       letter-spacing: 2px;

Jane/links.ftl

@@ -42,7 +42,9 @@
             <a rel="friend" class="ft__red" href="${link.linkAddress}"
                target="_blank">
                 ${link.linkTitle}
+                <#if link.linkDescription != ''>
                 <span class="ft__gray">(${link.linkDescription})</span>
+                </#if>
             </a>
             </#list>
         </div>