docs.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. </head>
  21. <body>
  22. <!-- Navigation -->
  23. <nav class="navbar">
  24. <div class="nav-container">
  25. <div class="nav-logo">
  26. <img src="static/img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
  27. <span>FeHelper</span>
  28. </div>
  29. <ul class="nav-menu">
  30. <li><a href="index.html#features">功能特性</a></li>
  31. <li><a href="index.html#tools">工具箱</a></li>
  32. <li><a href="docs.html">文档中心</a></li>
  33. <li><a href="index.html#about">关于我们</a></li>
  34. <li><a href="index.html#download">立即下载</a></li>
  35. <li><a href="https://github.com/zxlie/FeHelper" class="github-link" target="_blank">
  36. <i class="fab fa-github"></i> GitHub
  37. </a></li>
  38. </ul>
  39. <div class="nav-toggle">
  40. <span></span>
  41. <span></span>
  42. <span></span>
  43. </div>
  44. </div>
  45. </nav>
  46. <!-- 添加缺失的侧边栏切换按钮 -->
  47. <button id="sidebar-toggle" class="sidebar-toggle">
  48. <i class="fas fa-bars"></i>
  49. </button>
  50. <!-- 添加返回顶部按钮 -->
  51. <button id="back-to-top" class="back-to-top">
  52. <i class="fas fa-arrow-up"></i>
  53. </button>
  54. <div class="docs-container">
  55. <div class="docs-sidebar">
  56. <div class="sidebar-header">
  57. <h2>工具文档</h2>
  58. </div>
  59. <div class="sidebar-search">
  60. <input type="text" id="search-docs" class="search-input" placeholder="搜索工具...">
  61. </div>
  62. <ul class="tool-list" id="tool-list">
  63. <li><p>正在加载文档列表...</p></li>
  64. </ul>
  65. </div>
  66. <div class="docs-content">
  67. <!-- Docs Section -->
  68. <div class="container" style="margin-top: 2rem;">
  69. <div class="section-header">
  70. <h2>FeHelper 文档中心</h2>
  71. <p>详细了解每个工具的使用方法和技巧</p>
  72. </div>
  73. </div>
  74. <div id="doc-container">
  75. <div class="loader">
  76. <div class="loader-spinner"></div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <!-- Footer -->
  82. <footer class="footer">
  83. <div class="container">
  84. <div class="footer-content">
  85. <div class="footer-main">
  86. <div class="footer-logo">
  87. <img src="static/img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
  88. <span>FeHelper</span>
  89. </div>
  90. <p>专为前端开发者打造的超级助手</p>
  91. <div class="social-links">
  92. <a href="https://github.com/zxlie/FeHelper" target="_blank">
  93. <i class="fab fa-github"></i>
  94. </a>
  95. <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">
  96. <i class="fas fa-envelope"></i>
  97. </a>
  98. </div>
  99. </div>
  100. <div class="footer-links">
  101. <div class="link-group">
  102. <h4>产品</h4>
  103. <a href="index.html#features">功能特性</a>
  104. <a href="index.html#tools">工具箱</a>
  105. <a href="index.html#download">下载安装</a>
  106. </div>
  107. <div class="link-group">
  108. <h4>开发者</h4>
  109. <a href="https://github.com/zxlie/FeHelper" target="_blank">GitHub</a>
  110. <a href="https://github.com/zxlie/FeHelper/issues" target="_blank">问题反馈</a>
  111. <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">联系我们</a>
  112. </div>
  113. <div class="link-group">
  114. <h4>支持</h4>
  115. <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" target="_blank">Chrome Store</a>
  116. <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" target="_blank">Edge Add-ons</a>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="footer-bottom">
  121. <p>&copy; 2024 FeHelper. Open source under MIT license.</p>
  122. <p>Made with ❤️ for frontend developers</p>
  123. </div>
  124. </div>
  125. </footer>
  126. <script src="static/js/script.js"></script>
  127. <script src="static/js/docs.js"></script>
  128. </body>
  129. </html>