Merge pull request #35 from devlive-community/dev

优化计算内容距离菜单位置

Author: qianmoQ

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pageforge",
-  "version": "2025.1.3",
+  "version": "2025.1.4",
   "description": "PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。",
   "homepage": "https://pageforge.devlive.org",
   "repository": {

templates/assets/js/pageforge.js

@@ -160,6 +160,91 @@ const CodeCopy = {
     }
 };
 
+// Banner 和 Header 高度管理模块
+const Banner = {
+    updateHeaderHeight() {
+        requestAnimationFrame(() => {
+            const header = DOMUtils.find('header nav');
+            if (header) {
+                const height = header.offsetHeight;
+                document.documentElement.style.setProperty('--header-height', height + 'px');
+
+                // 更新 sidebar 和 toc 的 top 位置
+                const sidebar = DOMUtils.find('#sidebar-menu nav');
+                const toc = DOMUtils.find('#toc-container nav');
+
+                if (sidebar) {
+                    // 更新 sidebar 的 top 位置
+                    sidebar.style.top = `calc(var(--header-height) + 1rem)`;
+                }
+
+                if (toc) {
+                    // 更新 toc 的 top 位置
+                    toc.style.top = `calc(var(--header-height) + 1rem)`;
+                }
+            }
+        });
+    },
+
+    close(button) {
+        const banner = button.closest('[data-banner]');
+        if (!banner) {
+            return;
+        }
+
+        // 移除之前的监听器
+        if (window._bannerObserver) {
+            window._bannerObserver.disconnect();
+        }
+
+        // 添加过渡效果
+        banner.style.transition = 'height 0.2s ease-out, opacity 0.2s ease-out';
+        banner.style.height = banner.offsetHeight + 'px';
+        banner.style.opacity = '1';
+
+        // 强制重绘
+        banner.offsetHeight;
+
+        // 开始动画
+        banner.style.height = '0';
+        banner.style.opacity = '0';
+        banner.style.overflow = 'hidden';
+
+        // 动画结束后移除元素并更新高度
+        banner.addEventListener('transitionend', function handler() {
+            banner.remove();
+            Banner.updateHeaderHeight();
+            banner.removeEventListener('transitionend', handler);
+        });
+    },
+
+    init() {
+        // 初始化 header 高度
+        this.updateHeaderHeight();
+
+        // 监听窗口大小变化
+        window.addEventListener('resize', () => this.updateHeaderHeight());
+
+        // 监听 banner 的变化
+        const banner = DOMUtils.find('[data-banner]');
+        if (banner) {
+            window._bannerObserver = new MutationObserver(() => this.updateHeaderHeight());
+            window._bannerObserver.observe(banner, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+                characterData: true
+            });
+
+            // 绑定关闭按钮事件
+            const closeButton = DOMUtils.find('[data-banner-close]', banner);
+            if (closeButton) {
+                closeButton.addEventListener('click', () => this.close(closeButton));
+            }
+        }
+    }
+};
+
 // Header 组件
 const Header = {
     DarkMode: {
@@ -280,6 +365,7 @@ const Header = {
     init() {
         this.DarkMode.init();
         this.initEventListeners();
+        Banner.init();
 
         const observer = new MutationObserver(() => {
             this.initEventListeners();
@@ -331,19 +417,174 @@ const FontSizeControl = {
     }
 };
 
+const TOC = {
+    init() {
+        // 添加样式
+        if (!document.getElementById('toc-styles')) {
+            const style = document.createElement('style');
+            style.id = 'toc-styles';
+            style.textContent = `
+                .toc-link.active-toc-item {
+                    background-color: rgb(239 246 255);
+                    color: rgb(37 99 235);
+                    position: relative;
+                }
+                .dark .toc-link.active-toc-item {
+                    background-color: rgba(30 58 138 / 0.2);
+                    color: rgb(96 165 250);
+                }
+                .toc-link.active-toc-item::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 3px;
+                    height: 16px;
+                    background-color: rgb(37 99 235);
+                    border-top-right-radius: 2px;
+                    border-bottom-right-radius: 2px;
+                }
+                .dark .toc-link.active-toc-item::before {
+                    background-color: rgb(96 165 250);
+                }
+            `;
+            document.head.appendChild(style);
+        }
+
+        // 获取所有 TOC 链接
+        const tocLinks = document.querySelectorAll('.toc-link');
+
+        // 处理点击事件
+        tocLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+
+                // 移除所有活跃状态
+                tocLinks.forEach(l => l.classList.remove('active-toc-item'));
+
+                // 添加当前项的活跃状态
+                link.classList.add('active-toc-item');
+
+                // 获取目标元素和滚动位置
+                const targetId = link.getAttribute('data-slug');
+                const target = document.getElementById(targetId);
+                const header = document.querySelector('header nav');
+                const offset = header ? header.offsetHeight + 10 : 80;
+                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
+
+                // 滚动到目标位置
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+
+                // 如果是移动端，关闭 TOC 面板
+                const tocMobile = document.getElementById('toc-mobile');
+                if (tocMobile) {
+                    tocMobile.classList.add('translate-y-full');
+                }
+            });
+        });
+
+        // 监听滚动，更新当前活跃项
+        const updateActiveItem = () => {
+            const header = document.querySelector('header nav');
+            const headerHeight = header ? header.offsetHeight : 0;
+
+            // 查找所有带 slug 的容器
+            const headings = Array.from(document.querySelectorAll('[id].inline-flex'));
+
+            // 找到当前视窗中最靠上的标题
+            let current = null;
+            let minDistance = Infinity;
+
+            headings.forEach(heading => {
+                const rect = heading.getBoundingClientRect();
+                const top = rect.top - headerHeight - 20;
+
+                // 计算到视窗顶部的距离
+                const distance = Math.abs(top);
+
+                // 如果元素在视窗上方或接近顶部，且距离比当前最小距离更小
+                if (top <= 10 && distance < minDistance) {
+                    minDistance = distance;
+                    current = heading;
+                }
+            });
+
+            // 更新 TOC 活跃状态
+            if (current) {
+                const slug = current.id;
+                const tocLinks = document.querySelectorAll('.toc-link');
+
+                tocLinks.forEach(link => {
+                    if (link.getAttribute('data-slug') === slug) {
+                        link.classList.add('active-toc-item');
+
+                        // 确保活跃项在滚动区域内可见
+                        const nav = link.closest('.overflow-y-auto');
+                        if (nav) {
+                            const navRect = nav.getBoundingClientRect();
+                            const linkRect = link.getBoundingClientRect();
+
+                            if (linkRect.top < navRect.top || linkRect.bottom > navRect.bottom) {
+                                link.scrollIntoView({behavior: 'smooth', block: 'center'});
+                            }
+                        }
+                    }
+                    else {
+                        link.classList.remove('active-toc-item');
+                    }
+                });
+            }
+        };
+
+        // 使用 IntersectionObserver 来优化滚动监听
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(() => {
+                requestAnimationFrame(updateActiveItem);
+            });
+        }, {
+            rootMargin: '-20% 0px -80% 0px',
+            threshold: [0, 1]
+        });
+
+        // 观察所有标题元素
+        document.querySelectorAll('[id].inline-flex').forEach(heading => {
+            observer.observe(heading);
+        });
+
+        // 仍然保留滚动监听作为备份
+        let scrollTimeout;
+        window.addEventListener('scroll', () => {
+            if (scrollTimeout) {
+                window.cancelAnimationFrame(scrollTimeout);
+            }
+            scrollTimeout = window.requestAnimationFrame(updateActiveItem);
+        }, {passive: true});
+
+        // 初始调用一次
+        updateActiveItem();
+    }
+};
+
 // 暴露到全局
 window.PageForge = {
     GitHubStats,
     CodeCopy,
     Header,
-    FontSizeControl
+    FontSizeControl,
+    Banner,
+    TOC
 };
 
 // DOM 加载完成后初始化
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => {
         Header.init();
         FontSizeControl.init();
+        TOC.init();
     });
 }
 else {

templates/includes/header-banner.ejs

@@ -5,7 +5,7 @@
                 <%- locals.siteData.banner.content %>
             </div>
             <button class="text-blue-500 hover:text-blue-700 <%= darkClasses('dark:text-blue-400 dark:hover:text-blue-200') %>"
-                    onclick="this.closest('[data-banner]').remove()">
+                    data-banner-close>
                 <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
                 </svg>

templates/includes/toc.ejs

@@ -1,13 +1,13 @@
 <div class="hidden lg:block flex-none w-64 pl-8 mr-8">
-    <div class="sticky top-20">
+    <div class="sticky" style="top: calc(var(--header-height) + 1rem)">
         <div class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">目录</div>
-        <nav class="overflow-y-auto max-h-[calc(100vh-8rem)] pr-4 -mr-4 space-y-1 pageforge-scrollbar"
+        <nav class="overflow-y-auto pr-4 -mr-4 space-y-1 pageforge-scrollbar"
+             style="max-height: calc(100vh - var(--header-height) - 8rem);"
              id="table-of-contents">
             <% function renderTocItem(items) { %>
                 <% items?.forEach(item => { %>
                     <div class="pl-<%= (item.level - 1) * 4 %>">
                         <a href="#<%= item.slug %>"
-                           onclick="event.preventDefault(); const target = document.getElementById('<%= item.slug %>'); const offset = 80; const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset; window.scrollTo({top: targetPosition, behavior: 'smooth'});"
                            class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link"
                            data-slug="<%= item.slug %>">
                             <%- item.text %>
@@ -23,15 +23,7 @@
     </div>
 </div>
 
-<!-- 移动端目录按钮 -->
-<button class="lg:hidden fixed right-4 bottom-4 z-20 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg"
-        onclick="document.getElementById('toc-mobile').classList.toggle('translate-y-full')">
-    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
-    </svg>
-</button>
-
-<!-- 移动端底部目录面板 -->
+<!-- 移动端的模板也需要同样的修改 -->
 <div id="toc-mobile"
      class="lg:hidden fixed bottom-0 inset-x-0 z-30 bg-white dark:bg-gray-800
                 transform translate-y-full transition duration-200 ease-in-out
@@ -45,17 +37,12 @@
             </svg>
         </button>
     </div>
-    <nav class="overflow-y-auto max-h-[60vh] space-y-1">
+    <nav class="overflow-y-auto space-y-1"
+         style="max-height: calc(60vh - var(--header-height));">
         <% function renderTocItemMobile(items) { %>
             <% items?.forEach(item => { %>
                 <div class="pl-<%= (item.level - 1) * 4 %>">
                     <a href="#<%= item.slug %>"
-                       onclick="event.preventDefault();
-                               const target = document.getElementById('<%= item.slug %>');
-                               const offset = 80;
-                               const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
-                               window.scrollTo({top: targetPosition, behavior: 'smooth'});
-                               document.getElementById('toc-mobile').classList.add('translate-y-full');"
                        class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link"
                        data-slug="<%= item.slug %>">
                         <%- item.text %>