【开往】开往按钮hover优化

settings.yaml

@@ -47,7 +47,6 @@ spec:
           label: 导航栏右侧
           value:
             travelling: true
-            travellingUrl: https://travellings.cn/go.html
             article: true
             darkMode: true
           children:
@@ -61,12 +60,6 @@ spec:
                   value: true
                 - label: 隐藏
                   value: false
-            - $formkit: url
-              if: $get(travelling).value
-              name: travellingUrl
-              label: 开往链接
-              placeholder: 请输入开往链接
-              help: 开往项目：https://github.com/travellings-link/travellings
             - $formkit: radio
               name: article
               label: 随机文章

templates/assets/js/utils.js

@@ -192,23 +192,22 @@ var btf = {
         }
     },
 
-    snackbarShow: (text, showAction, duration) => {
+    snackbarShow: (text, showActionFunction = false, duration = 2000, actionText = false) => {
-        const sa = (typeof showAction !== 'undefined') ? showAction : false
+        const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar;
-        const dur = (typeof duration !== 'undefined') ? duration : 5000
+        const bg = document.documentElement.getAttribute("data-theme") === "light" ? bgLight : bgDark;
-        const position = GLOBAL_CONFIG.Snackbar.position
+        const root = document.querySelector(":root");
-        const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+        root.style.setProperty("--heo-snackbar-time", duration + "ms");
-        const style = document.createElement('style');
+
-        document.head.appendChild(style);
-        const styleSheet = style.sheet;
-        styleSheet.insertRule(`:root{--heo-snackbar-time: ${dur}ms!important}`, styleSheet.cssRules.length);
         Snackbar.show({
             text: text,
             backgroundColor: bg,
-            showAction: sa,
+            onActionClick: showActionFunction,
-            duration: dur,
+            actionText: actionText,
-            pos: position
+            showAction: actionText,
-        })
+            duration: duration,
-
+            pos: position,
+            customClass: "snackbar-css",
+        });
     },
 
     initJustifiedGallery: function (selector) {

templates/assets/zhheo/blogex.js

@@ -435,11 +435,14 @@ function toforeverblog() {
 }
 
 //前往开往项目
-function totraveling() {
+function totraveling () {
-    btf.snackbarShow('即将跳转到「开往」项目的成员博客，不保证跳转网站的安全性和可用性', false, 5000);
+    btf.snackbarShow("即将跳转到「开往」项目的成员博客，不保证跳转网站的安全性和可用性", function(element) {
-    setTimeout(function () {
+        element.style.opacity = 0,
-        window.open('https://travellings.link/');
+        travellingsTimer && clearTimeout(travellingsTimer)
-    }, "5000");
+    }, 5000, "取消"),
+        travellingsTimer = setTimeout(function() {
+            window.open("https://www.travellings.cn/go.html", "_blank")
+        }, "5000")
 }
 
 // 移除加载动画

templates/assets/zhheo/zhheoblog.css

@@ -29,6 +29,7 @@
     --style-border-hover: 1px solid var(--heo-main);
     --style-border-hover-always: 1px solid var(--heo-main);
     --style-border-dashed: 1px dashed var(--heo-theme-op);
+    --heo-radius-full: 50px;
 }
 
 ::selection {
@@ -2644,6 +2645,115 @@ blockquote footer cite::before {
     text-shadow: none;
 }
 
+#page-header.not-top-img #travellings_button::after {
+    background: var(--heo-main)!important;
+}
+
+#body-wrap .nav-fixed #travellings_button::after {
+    background: var(--heo-main)!important
+}
+
+#body-wrap #travellings_button {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex
+}
+
+#body-wrap #travellings_button:hover::after {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: none;
+    -moz-transform: none;
+    -o-transform: none;
+    -ms-transform: none;
+    transform: none;
+    visibility: visible
+}
+
+#body-wrap #travellings_button:hover a {
+    background: var(--heo-main);
+    -webkit-box-shadow: var(--heo-shadow-main);
+    -webkit-box-shadow: var(--heo-shadow-main);
+    box-shadow: var(--heo-shadow-main)
+}
+
+#body-wrap #travellings_button:hover a i {
+    color: var(--heo-white)
+}
+
+#body-wrap #travellings_button::after {
+    --height: 1.8rem;
+    content: attr(title);
+    position: fixed;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    color: var(--heo-white);
+    background: var(--heo-white-op)!important;
+    -webkit-box-shadow: var(--heo-shadow-nav);
+    box-shadow: var(--heo-shadow-nav);
+    border-radius: var(--heo-radius-full);
+    width: fit-content;
+    height: var(--height);
+    font-size: var(--global-font-size);
+    white-space: nowrap;
+    margin: auto;
+    padding: 0 4em;
+    top: calc((60px - var(--height))/ 2);
+    right: 0;
+    left: 0;
+    line-height: 0;
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    z-index: 1;
+    visibility: hidden;
+    -webkit-transform: scaleX(1.1);
+    -moz-transform: scaleX(1.1);
+    -o-transform: scaleX(1.1);
+    -ms-transform: scaleX(1.1);
+    transform: scaleX(1.1);
+    pointer-events: none;
+    -webkit-transition: .5s;
+    -moz-transition: .5s;
+    -o-transition: .5s;
+    -ms-transition: .5s;
+    transition: .5s
+}
+
+@media screen and (max-width: 900px) {
+    #body-wrap #travellings_button::after {
+        padding:0 2em;
+    }
+}
+
+#body-wrap:has(#travellings_button:hover) #nav #menus,#body-wrap:has(#travellings_button:hover) #page-name {
+    display: none
+}
+
+#body-wrap .page #travellings_button:hover::after {
+    background: var(--heo-main)!important
+}
+
 #page-header.nav-fixed #nav {
     position: fixed;
     top: -60px;
@@ -5587,6 +5697,9 @@ html {
     #page-header.not-top-img:not(.nav-fixed) #nav {
         background: var(--heo-background) !important;
     }
+    div#travellings_button {
+        display: none!important
+    }
 }
 
 

templates/modules/widgets/nav-right.html

@@ -7,14 +7,14 @@
     <!-- 功能都需要添加开关 -->
 
     <!-- 随机前往一个开往项目网站 -->
-    <div class="nav-button only-home" id="travellings_button" th:if="${theme.config.nav.right.travelling}">
+    <div class="nav-button" id="travellings_button" title="随机前往一个开往项目网站" th:if="${theme.config.nav.right.travelling}">
-        <a class="site-page" th:href="@{${theme.config.nav.right.travellingUrl}}" target="_blank" rel="external nofollow"
+        <a class="site-page" onclick="totraveling()" href="javascript:void(0);"  rel="external nofollow"
            title="随机前往一个开往项目网站">
             <i class="haofont hao-icon-train" style="font-size: 1rem; font-weight: 700; "></i>
         </a>
     </div>
 
-    <div class="nav-button only-home" th:if="${theme.config.nav.right.article}">
+    <div class="nav-button" th:if="${theme.config.nav.right.article}">
         <a class="site-page" href="javascript:void(0);" onclick="toRandomPost()" title="随机文章">
             <i class="haofont hao-icon-dice" style="font-size: 1rem; font-weight: 700;"></i>
         </a>