feat(bookmarks): add bookmark navigation and placeholder image

• Added bookmark navigation functionality with smooth scrolling
• Implemented active state highlighting for bookmark nav items
• Created a new SVG placeholder image for bookmarks
• Updated bookmarks layout to include navigation data attributes
• Integrated bookmarkNav.js script for handling navigation logic

layout/components/scripts.ejs

@@ -78,3 +78,9 @@
         'js/plugins/pangu.js'
     ]) %>
 <% } %>
+
+<% if (theme.bookmarks && theme.bookmarks.length !== 0) { %>
+    <%- renderJS('js/layouts/bookmarkNav.js', {
+        module: true
+    }) %>
+<% } %>

layout/pages/bookmarks/bookmarks.ejs

@@ -8,14 +8,16 @@
 
 
 		<!-- Left Sidebar - Categories -->
-		<div class="w-full md:w-64 flex-shrink-0 md:sticky md:top-[var(--navbar-height)] h-fit sm:py-6">
+		<div class="w-full md:w-48 flex-shrink-0 md:sticky md:top-[var(--navbar-height)] h-fit sm:py-6">
 			<nav class="flex md:block overflow-x-auto scrollbar-hide pb-4 md:pb-0 gap-2">
 				<% for (const category of theme.bookmarks) { %>
 				<a href="#<%= category.category.toLowerCase().replace(/\s+/g, '-') %>" class="whitespace-nowrap md:whitespace-normal block px-3 py-2 rounded-lg 
                    hover:bg-second-background-color hover:text-primary hover:scale-102 
                    transition-all duration-200 border border-transparent 
                    hover:border-second-background-color
-                   flex-shrink-0 font-medium">
+                          flex-shrink-0 font-medium
+                          bookmark-nav-item"
+                   data-category="<%= category.category.toLowerCase().replace(/\s+/g, '-') %>">
 					<i class="fa-regular <%= category.icon %> mr-2 w-6 h-6"></i>
 					<%= category.category %>
 				</a>
@@ -39,7 +41,7 @@
 							<div class="flex items-center gap-5">
 								<div class="w-12 h-12 rounded-xl overflow-hidden bg-second-background-color flex-shrink-0
                                                 transform group-hover:scale-105 transition-transform duration-300">
-									<img src="<%= item.image %>" alt="<%= item.name %>" class="w-full h-full object-cover" onerror="this.src='/images/default-bookmark.png'">
+									<img src="<%= item.image %>" alt="<%= item.name %>" class="w-full h-full object-cover" onerror="this.src='/images/bookmark-placeholder.svg'">
 								</div>
 								<div class="flex-1 min-w-0 flex flex-col gap-1">
 									<div class="flex items-center justify-between">

scripts/helpers/page-helpers.js

@@ -65,7 +65,7 @@ const pageData = {
 		layout: "default",
 	},
 	shuoshuo: {
-		titles: ["shuoshuo", "说说", "随笔"],
+		titles: ["shuoshuo", "说说"],
 		types: ["essays", "essay", "shuoshuo"],
 		partial: "pages/shuoshuo/essays",
 		layout: "default",
@@ -77,7 +77,7 @@ const pageData = {
 		layout: "default",
 	},
 	bookmarks: {
-		titles: ["bookmarks", "bookmark", "书签", "工具", "tools"],
+		titles: [],
 		types: ["bookmarks", "bookmark", "tools"],
 		partial: "pages/bookmarks/bookmarks",
 		layout: "raw",

source/css/layout/bookmarks.styl

@@ -0,0 +1,8 @@
+.bookmark-nav-item {
+  &.active {
+    background-color: var(--second-background-color);
+    color: var(--primary-color);
+    border-color: var(--second-background-color);
+    transform: scale(1.02);
+  }
+} 

source/js/layouts/bookmarkNav.js

@@ -0,0 +1,65 @@
+export default function initBookmarkNav() {
+  const navItems = document.querySelectorAll('.bookmark-nav-item');
+  const sections = document.querySelectorAll('section[id]');
+
+  if (!navItems.length || !sections.length) return;
+
+  // Throttle function
+  function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+      const args = arguments;
+      const context = this;
+      if (!inThrottle) {
+        func.apply(context, args);
+        inThrottle = true;
+        setTimeout(() => inThrottle = false, limit);
+      }
+    }
+  }
+
+  function setActiveNavItem() {
+    const fromTop = window.scrollY + 100;
+    let currentSection = null;
+
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+
+      if (fromTop >= sectionTop && fromTop < sectionTop + sectionHeight) {
+        currentSection = section;
+      }
+    });
+
+    navItems.forEach(item => {
+      item.classList.remove('bg-second-background-color');
+      if (currentSection && item.getAttribute('data-category') === currentSection.getAttribute('id')) {
+        item.classList.add('bg-second-background-color');
+      }
+    });
+  }
+
+  // // Handle click events on nav items
+  // navItems.forEach(item => {
+  //   item.addEventListener('click', (e) => {
+  //     e.preventDefault();
+  //     const targetId = item.getAttribute('data-category');
+  //     const targetSection = document.getElementById(targetId);
+  //     if (targetSection) {
+  //       targetSection.scrollIntoView();
+  //     }
+  //   });
+  // });
+
+  // Throttle scroll handler to run at most every 100ms
+  window.addEventListener('scroll', throttle(setActiveNavItem, 100));
+
+  // Initial check
+  setActiveNavItem();
+}
+
+try {
+  swup.hooks.on("page:view", initBookmarkNav);
+} catch (e) {}
+
+document.addEventListener("DOMContentLoaded", initBookmarkNav); 

source/js/main.js

@@ -6,6 +6,7 @@ import initLazyLoad from "./layouts/lazyload.js";
 import initScrollTopBottom from "./tools/scrollTopBottom.js";
 import initLocalSearch from "./tools/localSearch.js";
 import initCopyCode from "./tools/codeBlock.js";
+import initBookmarkNav from "./layouts/bookmarkNav.js";
 
 export const main = {
   themeInfo: {
@@ -47,6 +48,8 @@ export const main = {
     initUtils();
     initModeToggle();
     initScrollTopBottom();
+    initBookmarkNav();
+
     if (
       theme.home_banner.subtitle.text.length !== 0 &&
       location.pathname === config.root