添加视图过渡动画

Author: LingLambda

src/components/HeadMenu.astro

@@ -11,7 +11,7 @@
   <a id="about" href="/about/" data-astro-prefetch>关于</a>
 </nav>
 
-<script>
+<script is:inline>
   const updateSelected = () => {
     let rawPathname = window.location.pathname;
     const regex = /^\/([^\/]+)(?:\/|$)/;
@@ -23,6 +23,7 @@
     }
     e.classList.add("selected");
   };
+  document.addEventListener("astro:after-swap", updateSelected); //视图过渡后的脚本执行
   updateSelected();
 </script>
 

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import HeadMenu from "../components/HeadMenu.astro";
 import "../styles/global.css";
+import { ClientRouter } from "astro:transitions";
 
 const { description, keywords ,selected} = Astro.props;
 ---
@@ -10,6 +11,7 @@ const { description, keywords ,selected} = Astro.props;
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" type="image/svg" />
     <script src="../scripts/swUnregister.ts"/>
+    <ClientRouter />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content={description} />
     <meta name="keywords" content={keywords} />
@@ -40,21 +42,21 @@ const { description, keywords ,selected} = Astro.props;
       </footer>
     </div>
   </body>
-
-  <script>
-    let lastScrollTop = 0;
-    window.addEventListener("scroll", () => {
-      const menu = document.getElementById("menu");
-      if (!menu || !(menu instanceof HTMLElement)) {
-        return;
-      }
-      const scrollTop = window.scrollY;
-      menu.style.top = scrollTop > lastScrollTop ? "-85px" : "5px";
-      lastScrollTop = scrollTop;
-    });
-  </script>
 </html>
 
+<script>
+  let lastScrollTop = 0;
+  window.addEventListener("scroll", () => {
+    const menu = document.getElementById("menu");
+    if (!menu || !(menu instanceof HTMLElement)) {
+      return;
+    }
+    const scrollTop = window.scrollY;
+    menu.style.top = scrollTop > lastScrollTop ? "-85px" : "5px";
+    lastScrollTop = scrollTop;
+  });
+</script>
+
 <style>
   * {
     box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */

src/posts/index.md

@@ -8,7 +8,7 @@ title: index
 
 于是 24 年末改用 jekyll，用 markdown 随时随地有 git 就能写博客了，很方便。
 
-后来想做自定义，但 Rudy 苦手，于是凭着自己超烂的前端水平构建起了如今的小站，**目前还在努力建设中**，总之欢迎你！
+后来想做自定义，但 Rudy 苦手，于是凭着自己超烂的前端水平构建起了如今的小站，**目前还在努力建设中**，现在在做：**移动端适配**，总之欢迎你！
 
 累了吗，可以在下面的椅子上休息，坐多久都可以！