Commit 3578041

HPCesia <me@hpcesia.com>
2025-02-02 14:39:19
refactor: optimize page load event handling for some components
1 parent 43f0843
src/components/utils/Markdown.astro
@@ -39,7 +39,7 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
 }
 
 <script>
-  document.addEventListener('astro:page-load', (_event) => {
+  function prettierPreCode() {
     const codeBlocks = document.querySelectorAll('article pre');
     const template = document.getElementById('code-toolbar-template') as HTMLTemplateElement;
     if (!template) return;
@@ -90,5 +90,12 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
     codeBlocks.forEach((pre) => {
       wrapPre(pre as HTMLPreElement);
     });
-  });
+  }
+
+  document.addEventListener('astro:page-load', prettierPreCode);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', prettierPreCode);
+  } else {
+    prettierPreCode();
+  }
 </script>
src/components/widgets/Button.astro
@@ -4,15 +4,16 @@ import type { HTMLAttributes, HTMLTag } from 'astro/types';
 
 interface Props extends HTMLAttributes<'button'> {
   href?: string;
+  prefetch?: boolean;
 }
-const { href, onclick, class: className, ...rest } = Astro.props;
+const { href, onclick, prefetch, class: className, ...rest } = Astro.props;
 
 if (href && onclick) throw new AstroParameterConflictError('href', 'onclick');
 
 const Tag = (href ? 'a' : Fragment) as HTMLTag;
 ---
 
-<Tag {...{ href }}>
+<Tag {...{ href, 'data-astro-prefetch': prefetch as boolean }}>
   <button {...{ onclick, ...rest }} class:list={[className]}>
     <slot />
   </button>
src/components/widgets/Pagination.astro
@@ -127,8 +127,7 @@ else {
 
 <script>
   import { navigate } from 'astro:transitions/client';
-
-  document.addEventListener('astro:page-load', () => {
+  function initPagination() {
     const pageJumper = document.getElementById('page-jumper');
     const pageJumperInput = document.getElementById(
       'page-jumper-input'
@@ -178,5 +177,11 @@ else {
       }
     });
     pageJumperButton?.addEventListener('click', pageJumperExecHandler);
-  });
+  }
+  document.addEventListener('astro:page-load', initPagination);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPagination);
+  } else {
+    initPagination();
+  }
 </script>
src/components/Search.astro
@@ -43,11 +43,18 @@ import Pagefind from './search/Pagefind.astro';
 </div>
 
 <script>
-  document.addEventListener('astro:page-load', () => {
+  function initSearchContainer() {
     const searchContainer = document.getElementById('search-container');
     const searchContainerMask = searchContainer?.querySelector(':first-child');
     searchContainerMask?.addEventListener('click', () => {
       searchContainer?.classList.add('hidden');
     });
-  });
+  }
+
+  document.addEventListener('astro:page-load', initSearchContainer);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSearchContainer);
+  } else {
+    initSearchContainer();
+  }
 </script>
src/components/Sidebar.astro
@@ -56,7 +56,10 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 </div>
 
 <script>
-  document.addEventListener('astro:page-load', () => {
+  import { navbarConfig } from '@/config';
+  const rightItems = navbarConfig.navbarRightItems.onlyWide;
+
+  function initSidebar() {
     const toggleSidebarBtns = document.getElementById('nav-toggle-sidebar-btn');
     const sidebarMask = document.getElementById('sidebar-mask');
     const sidebarMenu = document.getElementById('sidebar-menu');
@@ -83,19 +86,20 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
         sidebarMenu?.setAttribute('inert', 'true');
       }
     });
-  });
-</script>
 
-<script>
-  import { navbarConfig } from '@/config';
-  const rightItems = navbarConfig.navbarRightItems.onlyWide;
-
-  document.addEventListener('astro:page-load', () => {
+    // 绑定设置的点击事件
     rightItems.forEach((item) => {
       if ('onclick' in item && item.onclick && typeof item.onclick !== 'string') {
         const element = document.getElementById('side-' + item.onclick.id);
         if (element) element.addEventListener('click', item.onclick.function);
       }
     });
-  });
+  }
+
+  document.addEventListener('astro:page-load', initSidebar);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebar);
+  } else {
+    initSidebar();
+  }
 </script>
src/components/SideToolBar.astro
@@ -28,7 +28,7 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 <script>
   import { getReadingProgress } from '@scripts/utils';
 
-  document.addEventListener('astro:page-load', () => {
+  function initSideToolBar() {
     const stbHide = document.getElementById('stb-hide');
     const stbShow = document.getElementById('stb-show');
     const stbShowMore = document.getElementById('stb-show-more');
@@ -74,7 +74,14 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
         stbBackToTopIcon?.classList.add('opacity-0');
       }
     });
-  });
+  }
+
+  document.addEventListener('astro:page-load', initSideToolBar);
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSideToolBar);
+  } else {
+    initSideToolBar();
+  }
 </script>
 
 <style lang="scss">