登录按钮

settings.yaml

@@ -49,6 +49,9 @@ spec:
             travelling: true
             article: true
             darkMode: true
+            navLogin: false
+            console:
+              consoleEnable: true
           children:
             - $formkit: radio
               name: travelling
@@ -78,15 +81,21 @@ spec:
                   value: true
                 - label: 隐藏
                   value: false
+            - $formkit: radio
+              name: navLogin
+              label: 登入按钮
+              help: 右上角登入按钮
+              options:
+                - label: 显示
+                  value: true
+                - label: 隐藏
+                  value: false
             - $formkit: group
               name: console
               label: 中控台
-              value:
-                consoleLink: false
               children:
                 - $formkit: radio
-                  name: consoleLink
-                  label: 前往控制台
+                  name: consoleEnable
                   options:
                     - label: 显示
                       value: true

templates/assets/zhheo/zhheoblog.css

@@ -5271,6 +5271,98 @@ html {
     right: 0;
 }
 
+
+/* 登入按钮 */
+#page-header #nav #nav-right .console-button .nav-login{
+    width: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+    margin-top: 4.8px;
+}
+
+#page-header.not-top-img #nav .nav-login {
+    color: var(--heo-fontcolor);
+    text-shadow: none;
+}
+
+.console-button{
+    cursor: pointer;
+}
+
+.console-button .back-menu-list-groups .back-menu-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 140px;
+    justify-content: space-between;
+}
+.console-button .back-menu-list-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.console-button .back-menu-list-groups {
+    position: absolute;
+    top: 45px;
+    transform: scale(.8);
+    transform-origin: top left;
+    left: 1.8rem;
+    background-color: var(--heo-maskbgdeep);
+    border-radius: 7.8px;
+    /* border: var(--style-border); */
+    flex-direction: column;
+    font-size: 12px;
+    color: var(--heo-secondtext);
+    box-shadow: var(--heo-shadow-border);
+    transition: .1s;
+    opacity: 0;
+    pointer-events: none;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px)
+}
+
+.console-button .back-menu-list-groups:hover {
+    /* border: var(--style-border-hover); */
+}
+
+.console-button .back-menu-list-group .back-menu-list-title {
+    margin: 8px 0 0 16px;
+    transition: 0.3s;
+}
+
+.console-button .back-menu-list-group:hover .back-menu-list-title {
+    color: var(--heo-main);
+}
+
+.console-button:hover .back-menu-list-groups {
+    display: flex;
+    opacity: 1;
+    transition: 0.3s;
+    top: 50px;
+    pointer-events: auto;
+    left: 1.8rem;
+    transform: scale(1);
+}
+
+.console-button .back-menu-list .back-menu-item {
+    width: 140px;
+}
+
+@media screen and (max-width: 768px) {
+
+    .console-button .back-menu-list-groups {
+        left: 0;
+    }
+
+    .console-button:hover .back-menu-list-groups {
+        padding-bottom: 8px;
+        box-shadow: var(--heo-shadow-border);
+        left: 0;
+    }
+}
+
 /* 导航栏图标 */
 #nav #site-name i {
     font-size: 50px;

templates/modules/widgets/console.html

@@ -134,11 +134,6 @@
         <i class="haofont hao-icon-music"></i>
       </a>
     </div>
-    <div th:if="${theme.config.nav.right.console.consoleLink}" class="console-btn-item" id="consoleLink2Console" title="前往控制台">
-      <a class="console-link" data-pjax-state="" href="/console">
-        <i class="haofont hao-icon-dashboard"></i>
-      </a>
-    </div>
   </div>
   <div class="console-mask" href="javascript:void(0);" onclick="heo.hideConsole()" rel="external nofollow">
   </div>

templates/modules/widgets/nav-right.html

@@ -36,9 +36,33 @@
         </a>
     </div>
 
-    <div class="nav-button" id="nav-console">
-        <a class="console_switchbutton" href="javascript:void(0);"
-           onclick="heo.showConsole()" rel="external nofollow" title="显示中控台">
+    <div th:if="${theme.config.nav.right.navLogin}" class="console-button" tabindex="-1"
+         th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
+        <span class="site-page nav-login">
+            <i sec:authorize="isAnonymous()" class="haofont hao-icon-zhanghao1 " style="font-size: 1rem;font-weight: 700;"></i>
+            <img sec:authorize="isAuthenticated()"  th:src="${currentUser.avatar ?: #theme.assets('/images/none.png')}"
+                 th:alt="${currentUser.displayName}"
+                 style=" width: 24px; height: 24px; border-radius: 9999px" />
+        </span>
+        <div class="back-menu-list-groups">
+            <div class="back-menu-list-group" style="margin: -4px -9px -4px -18px">
+                <div class="back-menu-list">
+                    <a sec:authorize="isAuthenticated()" class="back-menu-item" rel="external nofollow" target="_blank" href="/console">
+                        <span class="back-menu-item-text">控制台</span>
+                    </a>
+                    <!-- <a sec:authorize="isAuthenticated()" class="back-menu-item" rel="external nofollow" href="/logout">
+                        <span class="back-menu-item-text">退出登录</span>
+                    </a> -->
+                    <a sec:authorize="isAnonymous()" class="back-menu-item" rel="external nofollow" target="_blank" href="/console/login">
+                        <span class="back-menu-item-text">登录</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div th:if="${theme.config.nav.right.console.consoleEnable}" class="nav-button" id="nav-console">
+        <a class="console_switchbutton" href="javascript:void(0);" onclick="heo.showConsole()" rel="external nofollow"
+           title="显示中控台">
             <i class="haofont hao-icon-dashboard" style="font-size: 1.12rem;"></i>
         </a>
     </div>