docs.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>FeHelper 文档中心 - 前端开发者的超级助手</title>
  7. <meta name="description" content="FeHelper是一个功能强大的浏览器扩展,专为前端开发者设计,集成了多种实用工具,支持Chrome和Edge浏览器。">
  8. <!-- Favicon -->
  9. <link rel="icon" type="image/x-icon" href="static/img/favicon.ico">
  10. <link rel="icon" type="image/png" sizes="16x16" href="static/img/fe-16.png">
  11. <link rel="icon" type="image/png" sizes="48x48" href="static/img/fe-48.png">
  12. <link rel="icon" type="image/png" sizes="128x128" href="static/img/fe-128.png">
  13. <link rel="apple-touch-icon" sizes="128x128" href="static/img/fe-128.png">
  14. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  15. <link rel="stylesheet" href="static/css/style.css">
  16. <link rel="stylesheet" href="static/css/docs.css">
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
  20. <script>
  21. var _hmt = _hmt || [];
  22. (function() {
  23. var hm = document.createElement("script");
  24. hm.src = "https://hm.baidu.com/hm.js?17b02fba4e62901b4289eef4c2243123";
  25. var s = document.getElementsByTagName("script")[0];
  26. s.parentNode.insertBefore(hm, s);
  27. })();
  28. </script>
  29. </head>
  30. <body>
  31. <!-- Navigation -->
  32. <nav class="navbar">
  33. <div class="nav-container">
  34. <div class="nav-logo">
  35. <img src="static/img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
  36. <span>FeHelper</span>
  37. </div>
  38. <ul class="nav-menu">
  39. <li><a href="index.html#features">功能特性</a></li>
  40. <li><a href="index.html#tools">工具箱</a></li>
  41. <li><a href="docs.html">文档中心</a></li>
  42. <li><a href="index.html#about">关于我们</a></li>
  43. <li><a href="index.html#download">立即下载</a></li>
  44. <li><a href="https://github.com/zxlie/FeHelper" class="github-link" target="_blank">
  45. <i class="fab fa-github"></i> GitHub
  46. </a></li>
  47. </ul>
  48. <div class="nav-toggle">
  49. <span></span>
  50. <span></span>
  51. <span></span>
  52. </div>
  53. </div>
  54. </nav>
  55. <!-- 添加缺失的侧边栏切换按钮 -->
  56. <button id="sidebar-toggle" class="sidebar-toggle">
  57. <i class="fas fa-bars"></i>
  58. </button>
  59. <!-- 添加返回顶部按钮 -->
  60. <button id="back-to-top" class="back-to-top">
  61. <i class="fas fa-arrow-up"></i>
  62. </button>
  63. <div class="docs-container">
  64. <div class="docs-sidebar">
  65. <div class="sidebar-header">
  66. <h2>工具文档</h2>
  67. </div>
  68. <div class="sidebar-search">
  69. <input type="text" id="search-docs" class="search-input" placeholder="搜索工具...">
  70. </div>
  71. <ul class="tool-list" id="tool-list">
  72. <li><p>正在加载文档列表...</p></li>
  73. </ul>
  74. </div>
  75. <div class="docs-content">
  76. <!-- Docs Section -->
  77. <div class="container docs-container">
  78. <div class="section-header">
  79. <h2>FeHelper 文档中心</h2>
  80. <p>详细了解每个工具的使用方法和技巧</p>
  81. </div>
  82. </div>
  83. <div id="doc-container">
  84. <div class="loader">
  85. <div class="loader-spinner"></div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <!-- Footer -->
  91. <footer class="footer">
  92. <div class="container">
  93. <div class="footer-content">
  94. <div class="footer-main">
  95. <div class="footer-logo">
  96. <img src="static/img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
  97. <span>FeHelper</span>
  98. </div>
  99. <p>专为前端开发者打造的超级助手</p>
  100. <div class="social-links">
  101. <a href="https://github.com/zxlie/FeHelper" target="_blank">
  102. <i class="fab fa-github"></i>
  103. </a>
  104. <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">
  105. <i class="fas fa-envelope"></i>
  106. </a>
  107. </div>
  108. </div>
  109. <div class="footer-links">
  110. <div class="link-group">
  111. <h4>产品</h4>
  112. <a href="index.html#features">功能特性</a>
  113. <a href="index.html#tools">工具箱</a>
  114. <a href="index.html#download">下载安装</a>
  115. </div>
  116. <div class="link-group">
  117. <h4>开发者</h4>
  118. <a href="https://github.com/zxlie/FeHelper" target="_blank">GitHub</a>
  119. <a href="https://github.com/zxlie/FeHelper/issues" target="_blank">问题反馈</a>
  120. <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">联系我们</a>
  121. </div>
  122. <div class="link-group">
  123. <h4>支持</h4>
  124. <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" target="_blank">Chrome Store</a>
  125. <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" target="_blank">Edge Add-ons</a>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="footer-bottom">
  130. <p>&copy; 2024 FeHelper. Open source under MIT license.</p>
  131. <p>Made with ❤️ for frontend developers</p>
  132. <p class="footer-icp">
  133. <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14006329号-1</a> |
  134. <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14006329号-2</a>
  135. </p>
  136. </div>
  137. </div>
  138. </footer>
  139. <script src="static/js/script.js"></script>
  140. <script src="static/js/docs.js"></script>
  141. </body>
  142. </html>