zhangdocs 1.1.28 → 1.1.31

package/README.md

@@ -32,6 +32,8 @@ npm install -g zhangdocs
 npm install zhangdocs
 ```
 
+安装完成后，可以使用 `doc` 命令来操作项目。
+
 ## 🚀 快速开始
 
 ### 1. 初始化项目
@@ -39,13 +41,13 @@ npm install zhangdocs
 在项目目录下运行：
 
 ```bash
-zhangdocs init
+doc init
 ```
 
 或者指定项目名称：
 
 ```bash
-zhangdocs init --Create my-docs
+doc init --Create my-docs
 ```
 
 初始化过程会引导你配置项目信息，包括：
@@ -75,7 +77,7 @@ zhangdocs init --Create my-docs
 ### 3. 构建文档
 
 ```bash
-zhangdocs build
+doc build
 ```
 
 构建完成后，HTML 文件将生成在 `html/` 目录下，首页 `index.html` 会生成在项目根目录。
@@ -83,7 +85,7 @@ zhangdocs build
 ### 4. 启动开发服务器
 
 ```bash
-zhangdocs server
+doc server
 ```
 
 这将启动一个本地服务器，并监听文件变化自动重新构建。
@@ -91,7 +93,7 @@ zhangdocs server
 ### 5. 监听文件变化
 
 ```bash
-zhangdocs watch
+doc watch
 ```
 
 监听 `md/` 目录下的文件变化，自动重新构建。
@@ -100,14 +102,14 @@ zhangdocs watch
 
 | 命令 | 说明 |
 |------|------|
-| `zhangdocs init` | 初始化项目 |
-| `zhangdocs build` | 构建静态页面 |
-| `zhangdocs watch` | 监听文件变化并自动构建 |
-| `zhangdocs server` | 启动开发服务器（包含 watch 功能） |
-| `zhangdocs clean` | 清理构建文件 |
-| `zhangdocs deploy` | 部署文档 |
-| `zhangdocs theme` | 主题管理 |
-| `zhangdocs -V` | 查看版本号 |
+| `doc init` | 初始化项目 |
+| `doc build` | 构建静态页面 |
+| `doc watch` | 监听文件变化并自动构建 |
+| `doc server` | 启动开发服务器（包含 watch 功能） |
+| `doc clean` | 清理构建文件 |
+| `doc deploy` | 部署文档 |
+| `doc theme` | 主题管理 |
+| `doc -V` | 查看版本号 |
 
 ## ⚙️ 配置说明
 
@@ -210,7 +212,7 @@ $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
 
 1. 修改现有主题的样式和模板
 2. 创建新主题
-3. 使用 `zhangdocs theme` 命令管理主题
+3. 使用 `doc theme` 命令管理主题
 
 ## 📝 注意事项
 
@@ -218,19 +220,3 @@ $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
 2. **图片路径**：图片应放在 `static/img/` 目录下，在 Markdown 中使用相对路径引用
 3. **数学公式**：使用 `$...$` 表示行内公式，`$$...$$` 表示块级公式
 4. **Mermaid 图表**：在代码块中指定语言为 `mermaid`，工具会自动处理特殊字符转义
-
-## 📄 许可证
-
-MIT License
-
-## 👤 作者
-
-kenny wang <wowohoo@qq.com>
-
-## 🔗 相关链接
-
-- [GitHub 仓库](https://github.com/zhangrenyang/zhangdocs.git)
-
----
-
-**Happy Documenting! 📚**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zhangdocs",
-    "version": "1.1.28",
+    "version": "1.1.31",
     "description": "Simple document generation tool. Dependence Node.js run.",
     "repository": {
         "type": "git",

package/theme/handbook/layout.ejs

@@ -53,7 +53,7 @@
   </div>
 
   <!-- 滚动到底部按钮 -->
-  <button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部">
+  <button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部" onclick="(function(){var container=document.querySelector('.markdown-body')||document.querySelector('.warpper')||document.documentElement;container.scrollTop=container.scrollHeight;window.scrollTo(0,document.documentElement.scrollHeight);return false;})();">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M6 9l6 6 6-6"></path>
     </svg>
@@ -170,12 +170,27 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           // Token正确，立即显示内容
           const mainContainer = document.getElementById('main-container');
           const menuIcon = document.getElementById('menu-icon');
+          const scrollToBottomBtn = document.getElementById('scroll-to-bottom');
           if (mainContainer) mainContainer.style.display = 'block';
           if (menuIcon) {
             menuIcon.style.display = 'flex';
             // 菜单图标显示后，初始化菜单功能
             setTimeout(initMenuPopup, 50);
           }
+          // 初始化滚动到底部按钮 - 直接添加 show 类
+          if (scrollToBottomBtn) {
+            function addShowClass() {
+              scrollToBottomBtn.style.display = 'flex';
+              scrollToBottomBtn.classList.add('show');
+              // 强制设置内联样式，确保显示
+              scrollToBottomBtn.style.opacity = '1';
+              scrollToBottomBtn.style.visibility = 'visible';
+            }
+            addShowClass();
+            setTimeout(addShowClass, 0);
+            setTimeout(addShowClass, 100);
+            setTimeout(addShowClass, 300);
+          }
         }
       })();
 
@@ -226,6 +241,43 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           // 菜单图标显示后，初始化菜单功能
           setTimeout(initMenuPopup, 50);
         }
+        // 显示内容后，直接显示滚动到底部按钮 - 强制添加 show 类并设置内联样式
+        function addShowClass() {
+          var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+          if (scrollToBottomBtn) {
+            scrollToBottomBtn.style.display = 'flex';
+            scrollToBottomBtn.classList.add('show');
+            // 强制设置内联样式，确保显示
+            scrollToBottomBtn.style.opacity = '1';
+            scrollToBottomBtn.style.visibility = 'visible';
+            // 确保点击事件已绑定 - 使用多种方式
+            if (!scrollToBottomBtn.hasAttribute('data-click-bound')) {
+              var clickHandler = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var markdownBody = document.querySelector('.markdown-body');
+                var warpper = document.querySelector('.warpper');
+                var container = markdownBody || warpper || document.documentElement;
+                if (container) {
+                  container.scrollTop = container.scrollHeight;
+                }
+                window.scrollTo(0, document.documentElement.scrollHeight);
+                return false;
+              };
+              scrollToBottomBtn.addEventListener('click', clickHandler, true); // 捕获阶段
+              scrollToBottomBtn.onclick = clickHandler; // 直接赋值
+              scrollToBottomBtn.setAttribute('data-click-bound', 'true');
+            }
+          }
+        }
+        // 立即执行
+        addShowClass();
+        // 多次执行，确保添加成功
+        setTimeout(addShowClass, 0);
+        setTimeout(addShowClass, 50);
+        setTimeout(addShowClass, 100);
+        setTimeout(addShowClass, 200);
+        setTimeout(addShowClass, 500);
       }
 
       // 隐藏内容
@@ -459,10 +511,9 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
     
     // 滚动到底部功能
     (function() {
-      var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
-      if (!scrollToBottomBtn) {
-        return;
-      }
+      var scrollToBottomBtn = null;
+      var mainContainer = null;
+      var isInitialized = false;
       
       // 检查是否在页面底部
       function isAtBottom() {
@@ -473,51 +524,215 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
         return scrollHeight - scrollTop - clientHeight <= 5;
       }
       
-      // 显示/隐藏按钮
-      function toggleButton() {
-        if (isAtBottom()) {
-          scrollToBottomBtn.classList.remove('show');
-        } else {
+        // 显示/隐藏按钮
+        function toggleButton() {
+          if (!scrollToBottomBtn) {
+            return;
+          }
+          
+          // 确保按钮可见（如果内容已显示）
+          if (mainContainer && mainContainer.style.display !== 'none') {
+            scrollToBottomBtn.style.display = 'flex';
+            
+            // 直接添加 show 类，让按钮显示
+            // 只有在页面底部时才移除 show 类
+            if (isAtBottom()) {
+              scrollToBottomBtn.classList.remove('show');
+            } else {
+              scrollToBottomBtn.classList.add('show');
+            }
+          } else {
+            // 如果内容未显示，确保按钮有 show 类（当内容显示时会自动显示）
+            scrollToBottomBtn.classList.add('show');
+          }
+        }
+      
+      // 初始化函数
+      function initScrollToBottom() {
+        if (isInitialized) {
+          // 如果已初始化，只更新按钮状态
+          toggleButton();
+          // 即使已初始化，也确保点击事件已绑定
+          if (scrollToBottomBtn) {
+            scrollToBottomBtn.onclick = function(e) {
+              if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              console.log('按钮被点击了！');
+              var markdownBody = document.querySelector('.markdown-body');
+              var warpper = document.querySelector('.warpper');
+              var container = markdownBody || warpper || document.documentElement;
+              if (container && container.scrollTo) {
+            container.scrollTop = container.scrollHeight;
+              }
+              window.scrollTo(0, document.documentElement.scrollHeight);
+              return false;
+            };
+          }
+          return;
+        }
+        
+        scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+        mainContainer = document.getElementById('main-container');
+        
+        if (!scrollToBottomBtn) {
+          return;
+        }
+        
+        isInitialized = true;
+        
+        // 立即添加 show 类，确保按钮显示
+        if (mainContainer && mainContainer.style.display !== 'none') {
+          scrollToBottomBtn.style.display = 'flex';
           scrollToBottomBtn.classList.add('show');
         }
+        
+        // 滚动到底部 - 找到正确的滚动容器
+        function scrollToBottom() {
+          // 尝试找到滚动容器
+          var markdownBody = document.querySelector('.markdown-body');
+          var warpper = document.querySelector('.warpper');
+          var container = markdownBody || warpper || document.documentElement;
+          
+          // 滚动容器
+          if (container) {
+            container.scrollTop = container.scrollHeight;
+          }
+          // 同时滚动 window（以防万一）
+          window.scrollTo(0, document.documentElement.scrollHeight);
+        }
+        
+        // 绑定点击事件 - 使用多种方式确保事件能触发
+        var clickHandler = function(e) {
+          if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+          // 找到滚动容器并滚动
+          var markdownBody = document.querySelector('.markdown-body');
+          var warpper = document.querySelector('.warpper');
+          var container = markdownBody || warpper || document.documentElement;
+          
+          if (container) {
+            container.scrollTop = container.scrollHeight;
+          }
+          // 同时滚动 window
+          window.scrollTo(0, document.documentElement.scrollHeight);
+          return false;
+        };
+        // 先移除可能存在的旧监听器
+        scrollToBottomBtn.removeEventListener('click', clickHandler);
+        // 添加新的监听器 - 使用捕获阶段
+        scrollToBottomBtn.addEventListener('click', clickHandler, true);
+        // 同时使用 onclick 属性作为备用
+        scrollToBottomBtn.onclick = clickHandler;
+        
+        // 监听滚动事件
+        var scrollTimer = null;
+        window.addEventListener('scroll', function() {
+          // 使用节流，减少频繁检查
+          if (scrollTimer) {
+            clearTimeout(scrollTimer);
+          }
+          scrollTimer = setTimeout(toggleButton, 100);
+        }, { passive: true });
+        
+        // 初始检查（多次检查，确保页面渲染完成）
+        // 直接添加 show 类，确保按钮显示
+        if (mainContainer && mainContainer.style.display !== 'none') {
+          scrollToBottomBtn.style.display = 'flex';
+          scrollToBottomBtn.classList.add('show');
+        }
+        toggleButton();
+        setTimeout(toggleButton, 100);
+        setTimeout(toggleButton, 300);
+        setTimeout(toggleButton, 500);
+        setTimeout(toggleButton, 1000);
+        
+        // 监听内容变化（处理动态加载的内容）
+        var observer = new MutationObserver(function() {
+          setTimeout(toggleButton, 100);
+        });
+        
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true
+        });
       }
       
-      // 滚动到底部
-      function scrollToBottom() {
-        window.scrollTo({
-          top: document.documentElement.scrollHeight,
-          behavior: 'smooth'
-        });
+      // 立即尝试初始化
+      initScrollToBottom();
+      
+      // DOM加载完成后初始化
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initScrollToBottom);
+      } else {
+        setTimeout(initScrollToBottom, 100);
       }
       
-      // 绑定点击事件
-      scrollToBottomBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        scrollToBottom();
-      });
+      // 延迟初始化（处理动态显示的情况）
+      setTimeout(initScrollToBottom, 500);
+      setTimeout(initScrollToBottom, 1000);
+      setTimeout(initScrollToBottom, 2000);
       
-      // 监听滚动事件
-      var scrollTimer = null;
-      window.addEventListener('scroll', function() {
-        // 使用节流，减少频繁检查
-        if (scrollTimer) {
-          clearTimeout(scrollTimer);
+      // 强制添加 show 类 - 不依赖任何条件
+      function forceShowButton() {
+        var btn = document.getElementById('scroll-to-bottom');
+        var container = document.getElementById('main-container');
+        if (btn && container && container.style.display !== 'none') {
+          btn.style.display = 'flex';
+          btn.classList.add('show');
+          // 确保点击事件已绑定
+          if (!btn.hasAttribute('data-click-bound')) {
+            btn.addEventListener('click', function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              var markdownBody = document.querySelector('.markdown-body');
+              var warpper = document.querySelector('.warpper');
+              var container = markdownBody || warpper || document.documentElement;
+              if (container && container.scrollTo) {
+            container.scrollTop = container.scrollHeight;
+              }
+              window.scrollTo(0, document.documentElement.scrollHeight);
+            });
+            btn.setAttribute('data-click-bound', 'true');
+          }
         }
-        scrollTimer = setTimeout(toggleButton, 100);
-      }, { passive: true });
+      }
       
-      // 初始检查
-      setTimeout(toggleButton, 500);
+      // 在多个时机强制添加 show 类
+      forceShowButton();
+      setTimeout(forceShowButton, 100);
+      setTimeout(forceShowButton, 200);
+      setTimeout(forceShowButton, 500);
+      setTimeout(forceShowButton, 1000);
+      setTimeout(forceShowButton, 2000);
       
-      // 监听内容变化（处理动态加载的内容）
-      var observer = new MutationObserver(function() {
-        setTimeout(toggleButton, 100);
-      });
+      // 监听内容显示事件
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', forceShowButton);
+      }
       
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
+      // 使用 MutationObserver 监听 main-container 的显示状态
+      var containerObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+            var container = document.getElementById('main-container');
+            if (container && container.style.display !== 'none') {
+              forceShowButton();
+            }
+          }
+        });
       });
+      
+      var mainContainer = document.getElementById('main-container');
+      if (mainContainer) {
+        containerObserver.observe(mainContainer, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
     })();
   </script>
   <% include footer.ejs %>

package/theme/handbook/source/css/main.styl

@@ -516,49 +516,54 @@ table
 
 // 滚动到底部按钮
 .scroll-to-bottom
-    position: fixed
-    bottom: 30px
-    right: 30px
-    width: 48px
-    height: 48px
-    background: #fff
-    border: 1px solid $border-color
+    position: fixed !important
+    bottom: 30px !important
+    right: 5px !important
+    width: 36px !important
+    height: 36px !important
+    background: transparent
+    border: none
     border-radius: 50%
-    cursor: pointer
-    z-index: 999
+    cursor: pointer !important
+    z-index: 99999 !important
     display: none
     align-items: center
     justify-content: center
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
-    transition: all 0.3s ease
+    box-shadow: none
+    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease
     color: $text-color
     padding: 0
     -webkit-tap-highlight-color: transparent
+    opacity: 0
+    visibility: hidden
+    pointer-events: auto
+    user-select: none
     
     &:hover
-        background: $primary-color
-        border-color: $primary-color
-        color: #fff
-        transform: translateY(-3px)
-        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4)
+        background: rgba(74, 144, 226, 0.1)
+        color: $primary-color
+        transform: translateY(-2px)
     
     &:active
-        transform: translateY(-1px)
-        box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3)
+        transform: translateY(0)
     
     svg
-        width: 20px
-        height: 20px
+        width: 16px
+        height: 16px
+        pointer-events: none
     
     &.show
-        display: flex
+        display: flex !important
+        opacity: 1 !important
+        visibility: visible !important
+        pointer-events: auto !important
     
     @media mq-mobile
         bottom: 20px
-        right: 20px
-        width: 44px
-        height: 44px
+        right: 5px
+        width: 32px
+        height: 32px
         
         svg
-            width: 18px
-            height: 18px
+            width: 14px
+            height: 14px