feat: 杂项优化

D-Sketon · Aug 3, 2024 · a9ceeb5 · a9ceeb5
1 parent 92c595b
commit a9ceeb5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 66 deletions.
diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
@@ -131,6 +131,10 @@ $sidebar-state-content
   width: 36px
   height: 25px
   font: 20px font-icon
+  transition: transform .2s ease
+
+  &:hover
+    transform: scale(1.2)
 
 .icon-email
   color: #ff7777
@@ -374,16 +378,22 @@ $menu-link
       text-align: center
 
   .toc-child 
-    display: none;
+    transform: scaleY(0)
+    height: 0
+    overflow: hidden
+    transition: all .3s ease
+    transform-origin: top
+
+    >.toc-item:last-child
+      margin-bottom: 0
 
   .active>.toc-child 
-    display: block;
+    height: auto
+    transform: scaleY(1)
 
   .current>.toc-child 
-    display: block;
-
-    >.toc-item 
-      display: block;
+    height: auto
+    transform: scaleY(1)
 
   .active>a
     color: var(--red-0)
@@ -409,7 +419,7 @@ $menu-link
   padding: 10px 0
 
 .toc-item 
-  // overflow: hidden
+  overflow: hidden
   text-overflow: ellipsis
   white-space: nowrap
 

diff --git a/source/css/style.styl b/source/css/style.styl
@@ -35,10 +35,15 @@ html, body, #container
 body
   background: var(--color-background)
   -webkit-text-size-adjust: 100%
+  -webkit-font-smoothing: antialiased
   text-size-adjust: 100%
   font-family: font-title
   transition: background 0.3s ease
 
+  ::selection
+    background: var(--red-1)
+    color: #fff
+
 if reimu_cursor
   a
     cursor: var(--cursor-pointer) !important

diff --git a/source/js/generator_search.js b/source/js/generator_search.js
@@ -58,14 +58,12 @@
               element.off("click").on("click", (event) => {
                 event.preventDefault();
                 currentPage = element.innerText;
-                document
-                  .querySelectorAll(".ais-Pagination-item")
-                  .forEach((element) => {
-                    element.classList.remove(
-                      "ais-Pagination-item--selected",
-                      "current"
-                    );
-                  });
+                _$$(".ais-Pagination-item").forEach((element) => {
+                  element.classList.remove(
+                    "ais-Pagination-item--selected",
+                    "current"
+                  );
+                });
                 element.parentNode.classList.add(
                   "ais-Pagination-item--selected",
                   "current"

diff --git a/source/js/pjax_script.js b/source/js/pjax_script.js
@@ -27,19 +27,17 @@ var scrollIntoViewAndWait = (element) => {
 };
 
 // anchor
-document
-  .querySelectorAll(
-    ".article-entry h1>a, .article-entry h2>a, .article-entry h3>a, .article-entry h4>a, .article-entry h5>a, .article-entry h6>a"
-  )
-  .forEach((element) => {
-    if (window.icon_font) {
-      // iconfont
-      element.innerHTML = "&#xe635;";
-    } else {
-      // fontawesome
-      element.innerHTML = "&#xf292;";
-    }
-  });
+_$$(
+  ".article-entry h1>a, .article-entry h2>a, .article-entry h3>a, .article-entry h4>a, .article-entry h5>a, .article-entry h6>a"
+).forEach((element) => {
+  if (window.icon_font) {
+    // iconfont
+    element.innerHTML = "&#xe635;";
+  } else {
+    // fontawesome
+    element.innerHTML = "&#xf292;";
+  }
+});
 
 // lightbox
 _$$(".article-entry img").forEach((element) => {
@@ -59,12 +57,10 @@ _$$(".article-entry img").forEach((element) => {
   element.parentNode.removeChild(element);
   a.appendChild(element);
 });
-document
-  .querySelectorAll(".article-gallery a.article-gallery-img")
-  .forEach((a) => {
-    a.dataset.pswpWidth = a.children[0].naturalWidth;
-    a.dataset.pswpHeight = a.children[0].naturalHeight;
-  });
+_$$(".article-gallery a.article-gallery-img").forEach((a) => {
+  a.dataset.pswpWidth = a.children[0].naturalWidth;
+  a.dataset.pswpHeight = a.children[0].naturalHeight;
+});
 window.lightboxStatus = "ready";
 window.dispatchEvent(new Event("lightbox:ready"));
 
@@ -95,36 +91,36 @@ document
 _$$(".sidebar-toc-btn").forEach((element) => {
   element.off("click").on("click", function () {
     if (this.classList.contains("current")) return;
-    document
-      .querySelectorAll(".sidebar-toc-btn")
-      .forEach((element) => element.classList.add("current"));
-    document
-      .querySelectorAll(".sidebar-common-btn")
-      .forEach((element) => element.classList.remove("current"));
-    document
-      .querySelectorAll(".sidebar-toc-sidebar")
-      .forEach((element) => element.classList.remove("hidden"));
-    document
-      .querySelectorAll(".sidebar-common-sidebar")
-      .forEach((element) => element.classList.add("hidden"));
+    _$$(".sidebar-toc-btn").forEach((element) =>
+      element.classList.add("current")
+    );
+    _$$(".sidebar-common-btn").forEach((element) =>
+      element.classList.remove("current")
+    );
+    _$$(".sidebar-toc-sidebar").forEach((element) =>
+      element.classList.remove("hidden")
+    );
+    _$$(".sidebar-common-sidebar").forEach((element) =>
+      element.classList.add("hidden")
+    );
   });
 });
 
 _$$(".sidebar-common-btn").forEach((element) => {
   element.off("click").on("click", function () {
     if (this.classList.contains("current")) return;
-    document
-      .querySelectorAll(".sidebar-common-btn")
-      .forEach((element) => element.classList.add("current"));
-    document
-      .querySelectorAll(".sidebar-toc-btn")
-      .forEach((element) => element.classList.remove("current"));
-    document
-      .querySelectorAll(".sidebar-common-sidebar")
-      .forEach((element) => element.classList.remove("hidden"));
-    document
-      .querySelectorAll(".sidebar-toc-sidebar")
-      .forEach((element) => element.classList.add("hidden"));
+    _$$(".sidebar-common-btn").forEach((element) =>
+      element.classList.add("current")
+    );
+    _$$(".sidebar-toc-btn").forEach((element) =>
+      element.classList.remove("current")
+    );
+    _$$(".sidebar-common-sidebar").forEach((element) =>
+      element.classList.remove("hidden")
+    );
+    _$$(".sidebar-toc-sidebar").forEach((element) =>
+      element.classList.add("hidden")
+    );
   });
 });
 
@@ -140,7 +136,7 @@ _$$(".sidebar-common-btn").forEach((element) => {
 
 // lazyload
 _$$(".article-entry img").forEach((element) => {
-  if(element.classList.contains('lazyload'))  return;
+  if (element.classList.contains("lazyload")) return;
   element.classList.add("lazyload");
   element.setAttribute("data-src", element.src);
   element.setAttribute("data-sizes", "auto");
@@ -222,11 +218,9 @@ function tocInit() {
 
     if (!target || target.classList.contains("current")) return;
 
-    document
-      .querySelectorAll(".sidebar-toc-wrapper .active")
-      .forEach((element) => {
-        element.classList.remove("active", "current");
-      });
+    _$$(".sidebar-toc-wrapper .active").forEach((element) => {
+      element.classList.remove("active", "current");
+    });
 
     sections.forEach((element) => {
       element?.classList.remove("active");

diff --git a/source/js/script.js b/source/js/script.js
@@ -54,7 +54,7 @@
   });
   // Simple Selector
   window._$ = (selector) => {
-    if (selector.startsWith("#") && !selector.includes(' ')) {
+    if (selector.startsWith("#") && !selector.includes(' ') && !selector.includes('.')) {
       return document.getElementById(selector.slice(1));
     }
     return document.querySelector(selector);
@@ -104,7 +104,7 @@
     });
 
   let oldScrollTop = 0;
-  window.addEventListener("scroll", () => {
+  document.addEventListener("scroll", () => {
     let scrollTop =
       document.documentElement.scrollTop || document.body.scrollTop;
     const diffY = scrollTop - oldScrollTop;