From 90b5dddab8540f92d57f725354310c519aab96af Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Sat, 9 Sep 2023 16:42:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/css/post-copyright.css | 5 ++- templates/assets/js/main.js | 17 +++++++- templates/assets/zhheo/zhheoblog.css | 52 +++++++++++++++++++++---- templates/modules/common/rightside.html | 1 + templates/modules/footer.html | 7 +--- 5 files changed, 65 insertions(+), 17 deletions(-) diff --git a/templates/assets/css/post-copyright.css b/templates/assets/css/post-copyright.css index 512c7406..ccbf9204 100644 --- a/templates/assets/css/post-copyright.css +++ b/templates/assets/css/post-copyright.css @@ -16,12 +16,13 @@ position: absolute; right: 22px; top: -77px; - content: "\f25e"; + content: "\e668"; + font-family: "haofont" !important; font-size: 180px; font-family: "Font Awesome 5 Brands"; color: var(--heo-fontcolor); opacity: 0.1; - filter: blur(7px); + /*filter: blur(7px);*/ } @media screen and (max-width: 768px) { diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index 0b423384..7d55529d 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -159,6 +159,10 @@ document.addEventListener('DOMContentLoaded', function () { // 没有 toc 目录,则直接移除 if (headers.length === 0) { document.getElementById("card-toc").remove(); + const $mobileTocButton = document.getElementById("mobile-toc-button") + if($mobileTocButton){ + $('#mobile-toc-button').attr('style', 'display: none'); + } } else { tocbot.init({ tocSelector: '.toc-content', @@ -218,7 +222,15 @@ document.addEventListener('DOMContentLoaded', function () { ? saveToLocal.set('aside-status', 'show', 2) : saveToLocal.set('aside-status', 'hide', 2) $htmlDom.toggle('hide-aside') - } + }, + runMobileToc: () => { + const $cardToc = document.getElementById("card-toc") + if ($cardToc.classList.contains("open")) { + $cardToc.classList.remove("open"); + } else { + $cardToc.classList.add("open"); + } + }, } document.getElementById('rightside').addEventListener('click', function (e) { @@ -230,6 +242,9 @@ document.addEventListener('DOMContentLoaded', function () { case 'rightside-config': rightSideFn.showOrHideBtn() break + case "mobile-toc-button": + rightSideFn.runMobileToc(); + break; case 'readmode': rightSideFn.switchReadMode() break diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index cb307212..f271f7b6 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -2240,19 +2240,55 @@ blockquote footer cite::before { } } -@media screen and (max-width: 900px) { + +@media screen and (max-width: 1200px) { #aside-content #card-toc { - position: fixed; - right: -100%; + position:fixed; + right: 55px; bottom: 30px; z-index: 100; + max-width: 380px; max-height: calc(100% - 60px); - width: 300px; - opacity: 0; - transform-origin: right bottom; + width: calc(100% - 80px); + -webkit-transition: -webkit-transform .3s; + -moz-transition: -moz-transform .3s; + -o-transition: -o-transform .3s; + -ms-transition: -ms-transform .3s; + transition: transform .3s; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -o-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: right bottom; + -moz-transform-origin: right bottom; + -o-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom + } + + #aside-content #card-toc.open { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1) } } +/*@media screen and (max-width: 900px) {*/ +/* #aside-content #card-toc {*/ +/* position: fixed;*/ +/* right: -100%;*/ +/* bottom: 30px;*/ +/* z-index: 100;*/ +/* max-height: calc(100% - 60px);*/ +/* width: 300px;*/ +/* opacity: 0;*/ +/* transform-origin: right bottom;*/ +/* }*/ +/*}*/ + #aside-content #card-toc .toc-content { overflow-y: auto; max-height: calc(100vh - 120px); @@ -6543,7 +6579,7 @@ a.console_switchbutton { #footer { background: linear-gradient(180deg, var(--heo-background) 0%, var(--heo-card-bg) 25%); margin-top: 0; - z-index: 999; + z-index: 3; } } @@ -10249,7 +10285,7 @@ a.extend.prev { } #aside-content { - z-index: 2; + z-index: 99; background: var(--heo-background); padding: 0 1rem; display: flex; diff --git a/templates/modules/common/rightside.html b/templates/modules/common/rightside.html index af43b0fa..abb29c78 100644 --- a/templates/modules/common/rightside.html +++ b/templates/modules/common/rightside.html @@ -10,6 +10,7 @@
- - - - +