https://github.com/b3log/solo/issues/12720 metro-hot

metro-hot/css/base.scss

@@ -20,9 +20,25 @@
  * skin metro-hot style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 2.1.0.1, Mar 16, 2019
+ * @version 2.2.0.0, Mar 22, 2019
  */
+@import "../../../scss/toc";
+@import "../../../scss/usite";
+@import "../../../scss/function";
 @import "vditor/src/assets/scss/classic";
+
+.vditor-reset pre > code {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.user__site {
+  svg {
+    height: 14px;
+    width: 14px;
+    fill: currentColor;
+  }
+}
+
 /* start base */
 @font-face {
   font-family: 'IcoMoon';
@@ -52,7 +68,6 @@ body {
   font-family: Verdana, arial, '\5fae\8f6f\96c5\9ed1';
   font-size: 12px;
   background-color: #292929;
-  min-height: 1990px;
   margin: 0;
   color: #D1D2D1;
 }
@@ -539,7 +554,6 @@ textarea {
   background-color: #2E8BCC;
 }
 
-.login,
 .settings {
   background-color: #008641;
 }
@@ -627,9 +641,8 @@ textarea {
   height: auto;
 }
 
-.user .text,
+.user .text {
-.notice-board .text {
+  top: 27px;
-  top: 36px;
 }
 
 /* end side */
@@ -941,6 +954,9 @@ pre.prettyprint {
 /* end dynamic */
 
 @media (max-width: 860px) and (min-width: 460px) {
+  .fn__flex {
+    display: block;
+  }
   .wrapper {
     width: 720px;
   }
@@ -969,37 +985,33 @@ pre.prettyprint {
     width: 283px;
   }
 
-  .most-comment,
-  .most-view {
-    width: 300px;
-    margin-bottom: 20px;
-    margin-top: 40px;
-  }
-
-  .most-comment .text,
-  .most-view .text {
-    width: 195px;
-  }
-
   .tags-tile,
   .links-tile,
-  .archives-tile {
+  .archives-tile,
+  .most-comment,
+  .most-view {
     width: 670px;
   }
 
   .tags-tile .text,
   .links-tile .text,
-  .archives-tile .text {
+  .archives-tile .text,
+  .most-comment .text,
+  .most-view .text{
     width: 580px;
   }
 
   .links-tile,
-  .tags-tile {
+  .tags-tile,
+  .most-view {
     margin-left: 0;
   }
 }
 
 @media (max-width: 460px) {
+  .fn__flex {
+    display: block;
+  }
   .side,
   .top-info,
   .header > .fn-left,
@@ -1024,7 +1036,6 @@ pre.prettyprint {
     width: 237px;
   }
 
-
   .side-tile {
     width: 94px;
   }

metro-hot/dynamic.ftl

@@ -110,7 +110,7 @@
                 </div>
             </div>
 
-            <div class="fn-clear">
+            <div class="fn__flex">
                 <#if 0 != mostCommentArticles?size>
                 <div class="side-tile most-comment fn-clear">
                     <div class="fn-left">
@@ -163,7 +163,7 @@
                 </#if>
             </div>
 
-            <div class="fn-clear">
+            <div class="fn__flex">
                 <#if 0 != links?size>
                 <div class="side-tile links-tile fn-clear">
                     <div class="fn-left">
@@ -208,15 +208,6 @@
             $("#comments .vditor-reset").each(function () {
                 this.innerHTML = Util.replaceEmString($(this).html());
             });
-
-            if ($(".side").height() < $(".main").height()) {
-                $(".main").height($(".side").height() - 5).css({
-                    "overflow": "auto",
-                    "margin-top": "5px"
-                });
-
-                $("#comments").css("margin-top", "0");
-            }
         </script> 
     </body>
 </html>

metro-hot/header.ftl

@@ -50,9 +50,12 @@
         </li>
     </ul>
     <div class="fn-right top-info">
-        <a href="${servePath}/admin-index.do#main" title="${adminLabel}" id="settings" data-ico="&#x0070;"></a>
+        <#if isLoggedIn>
-        <hr>
+            <a href="${servePath}/admin-index.do#main" title="${adminLabel}" data-ico="&#x0070;"></a>
-        <a id="logout" title="${logoutLabel}" data-ico="&#xe040;"></a>
+            <hr>
-        <a href="${servePath}/start" title="${startToUseLabel}" id="register" data-ico="&#xe03f;"></a>
+            <a href="${logoutURL}" title="${logoutLabel}" data-ico="&#xe040;"></a>
+        <#else>
+          <a href="${servePath}/start" title="${startToUseLabel}" data-ico="&#xe03f;"></a>
+        </#if>
     </div>
 </div>

metro-hot/js/metro-hot.js

@@ -52,15 +52,6 @@ var MetroHot = {
         var onlineVisitorCnt = $("#top > span").first().text();
         $(".online-count .text").append(onlineVisitorCnt.substr(1, onlineVisitorCnt.length));
 
-        // 登录与否的显示设置
-        var isLogin = $("#admin").data("login");
-        if (isLogin) {
-            $(".user .text").html($("#admin > span").text());
-            $(".login, .register, #login, #register, .logout, .settings").hide();
-        } else {
-            $(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide();
-        }
-
         if ($("#dynamic").length === 1) {
             // 滚动处理
             $(window).scroll(function() {
@@ -81,54 +72,14 @@ var MetroHot = {
             return;
         }
 
-        // 侧边栏点击事件
-        $("#login, .login").attr("href", $("#admin > a").first().attr("href"));
-
         // 滚动处理
         $(window).scroll(function() {
             var y = $(window).scrollTop();
-            if (y > MetroHot.headerH) {
-                if (isLogin) {
-                    $(".logout, .settings").show();
-                } else {
-                    $(".login, .register").show();
-                }
-            } else {
-                if (isLogin) {
-                    $(".logout, .settings").hide();
-                } else {
-                    $(".login, .register").hide();
-                }
-            }
-
             if (y > MetroHot.headerH) {
                 $("#goTop").fadeIn("slow");
             } else {
                 $("#goTop").hide();
             }
-
-            if ($(".side > div").height() < 620) {
-                if (y > MetroHot.headerH) {
-                    $(".side > div").css({
-                        "position": "fixed",
-                        "top": "0px",
-                        "width": "240px"
-                    });
-                } else {
-                    $(".side > div").css("position", "static");
-                }
-            } else {
-                if (y + $(window).height() > $(".side > div").height() + MetroHot.headerH) {
-                    $(".side > div").css({
-                        "position": "fixed",
-                        "top": "auto",
-                        "bottom": "10px",
-                        "width": "240px"
-                    });
-                } else {
-                    $(".side > div").css("position", "static");
-                }
-            }
         }).click(function(event) {
             if (event.target.className === "title" || event.target.parentElement.className === "title") {
                 return;

metro-hot/macro-side.ftl

@@ -28,13 +28,9 @@
 
         <#if "" != noticeBoard>
         <div class="notice-board side-tile">
-            <span data-ico="&#xe1e9;"></span>
             <div class="title">
                 ${noticeBoard}
             </div>
-            <div class="text">
-                ${noticeBoardLabel}
-            </div>
         </div>
         </#if>
 
@@ -165,24 +161,35 @@
 
         <div class="user side-tile">
             <span>
-                <img src="<#if gravatar??>${gravatar}</#if>"/>
+                <img src="${faviconURL}"/>
             </span>
-            <div class="text"></div>
+            <div class="text fn-clear">
+                <#include "../../common-template/macro-user_site.ftl"/>
+                <@userSite dir="n"/>
+            </div>
         </div>
 
-        <a href="${servePath}/admin-index.do#main" class="settings side-tile">
+        <#if isLoggedIn>
-            <span data-ico="&#x0070;"></span>
+             <a href="${servePath}/admin-index.do#main" class="settings side-tile">
-            <div class="title">
+                 <span data-ico="&#x0070;"></span>
-                ${adminLabel}
+                 <div class="title">
-            </div>
+                     ${adminLabel}
-        </a>
+                 </div>
-
+             </a>
-        <a href="${servePath}/start" class="register side-tile">
+            <a class="logout side-tile" href="${logoutURL}">
-            <span data-ico="&#xe040;"></span>
+                <span data-ico="&#xe040;"></span>
-            <div class="title">
+                <div class="title">
-                ${startToUseLabel}
+                    ${logoutLabel}
-            </div>
+                </div>
-        </a>
+            </a>
+        <#else>
+         <a href="${servePath}/start" class="register side-tile">
+             <span data-ico="&#xe040;"></span>
+             <div class="title">
+                 ${startToUseLabel}
+             </div>
+         </a>
+        </#if>
     </div>
 </div>
 </#macro>