index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Hello-Agents</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="description" content="Description">
  8. <meta name="viewport"
  9. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  10. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">
  11. <style>
  12. /* 语言切换按钮样式 */
  13. .lang-switch {
  14. position: fixed;
  15. top: 20px;
  16. right: 80px;
  17. z-index: 999;
  18. }
  19. .lang-switch button {
  20. background: #42b983;
  21. color: white;
  22. border: none;
  23. padding: 8px 16px;
  24. border-radius: 4px;
  25. cursor: pointer;
  26. font-size: 14px;
  27. transition: background 0.3s;
  28. }
  29. .lang-switch button:hover {
  30. background: #33a06f;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <!-- 语言切换按钮 -->
  36. <div class="lang-switch">
  37. <button id="langBtn" onclick="switchLanguage()">English</button>
  38. </div>
  39. <div id="app"></div>
  40. <script src="//cdn.jsdelivr.net/npm/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>
  41. <script>
  42. window.$docsify = {
  43. name: 'Hello-Agents',
  44. repo: 'https://github.com/datawhalechina/Hello-Agents',
  45. loadSidebar: true,
  46. auto2top: true,
  47. subMaxLevel: 3,
  48. relativePath: false,
  49. alias: {
  50. // 英文路径映射
  51. '/en/README.md': '/README_EN.md',
  52. '/en/Preface.md': '/Preface.md',
  53. '/en/_sidebar.md': '/_sidebar_en.md',
  54. '/en/chapter(\\d+)/Chapter(.*)': '/chapter$1/Chapter$2',
  55. // 默认中文侧边栏
  56. '/_sidebar.md': '/_sidebar.md'
  57. },
  58. pagination: {
  59. previousText: '上一章节',
  60. nextText: '下一章节',
  61. },
  62. count: {
  63. countable: true,
  64. fontsize: '0.9em',
  65. color: 'rgb(90,90,90)',
  66. language: 'chinese'
  67. },
  68. // 多语言配置
  69. fallbackLanguages: ['en'],
  70. nameLink: {
  71. '/en/': '#/en/',
  72. '/': '#/'
  73. },
  74. // 使用钩子动态处理侧边栏
  75. plugins: [
  76. function(hook, vm) {
  77. // 在每次路由变化时检查语言偏好
  78. hook.beforeEach(function(content) {
  79. const preferredLang = localStorage.getItem('preferredLanguage');
  80. const currentPath = vm.route.path;
  81. // 根据当前路径或语言偏好更新分页文本
  82. if (currentPath.includes('/en/') || preferredLang === 'en') {
  83. window.$docsify.pagination.previousText = 'Previous';
  84. window.$docsify.pagination.nextText = 'Next';
  85. } else {
  86. window.$docsify.pagination.previousText = '上一章节';
  87. window.$docsify.pagination.nextText = '下一章节';
  88. }
  89. return content;
  90. });
  91. }
  92. ]
  93. }
  94. </script>
  95. <!-- Put them above docsify.min.js -->
  96. <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  97. <!-- code render-->
  98. <script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-bash.js"></script>
  99. <script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-python.js"></script>
  100. <script src="//cdn.jsdelivr.net/npm/docsify-pagination@latest/dist/docsify-pagination.min.js"></script>
  101. <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
  102. <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
  103. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
  104. <script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
  105. <!-- CDN files for docsify-katex -->
  106. <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  107. <!-- 字数统计 -->
  108. <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
  109. <!-- 语言切换脚本 -->
  110. <script>
  111. // 章节文件名映射
  112. const chapterMapping = {
  113. // 中文 -> 英文
  114. 'zh2en': {
  115. 'README.md': 'README_EN.md',
  116. '前言.md': 'Preface.md',
  117. '第一章 初识智能体.md': 'Chapter1-Introduction-to-Agents.md',
  118. '第二章 智能体发展史.md': 'Chapter2-History-of-Agents.md',
  119. '第三章 大语言模型基础.md': 'Chapter3-Fundamentals-of-Large-Language-Models.md',
  120. '第四章 智能体经典范式构建.md': 'Chapter4-Building-Classic-Agent-Paradigms.md',
  121. '第五章 基于低代码平台的智能体搭建.md': 'Chapter5-Building-Agents-with-Low-Code-Platforms.md',
  122. '第六章 框架开发实践.md': 'Chapter6-Framework-Development-Practice.md',
  123. '第七章 构建你的Agent框架.md': 'Chapter7-Building-Your-Agent-Framework.md',
  124. '第八章 记忆与检索.md': 'Chapter8-Memory-and-Retrieval.md',
  125. '第九章 上下文工程.md': 'Chapter9-Context-Engineering.md',
  126. '第十章 智能体通信协议.md': 'Chapter10-Agent-Communication-Protocols.md',
  127. '第十一章 Agentic-RL.md': 'Chapter11-Agentic-RL.md',
  128. '第十二章 智能体性能评估.md': 'Chapter12-Agent-Performance-Evaluation.md',
  129. '第十三章 智能旅行助手.md': 'Chapter13-Intelligent-Travel-Assistant.md',
  130. '第十四章 自动化深度研究智能体.md': 'Chapter14-Automated-Deep-Research-Agent.md',
  131. '第十五章 构建赛博小镇.md': 'Chapter15-Building-Cyber-Town.md',
  132. '第十六章 毕业设计.md': 'Chapter16-Graduation-Project.md'
  133. },
  134. // 英文 -> 中文
  135. 'en2zh': {
  136. 'README_EN.md': 'README.md',
  137. 'Preface.md': '前言.md',
  138. 'Chapter1-Introduction-to-Agents.md': '第一章 初识智能体.md',
  139. 'Chapter2-History-of-Agents.md': '第二章 智能体发展史.md',
  140. 'Chapter3-Fundamentals-of-Large-Language-Models.md': '第三章 大语言模型基础.md',
  141. 'Chapter4-Building-Classic-Agent-Paradigms.md': '第四章 智能体经典范式构建.md',
  142. 'Chapter5-Building-Agents-with-Low-Code-Platforms.md': '第五章 基于低代码平台的智能体搭建.md',
  143. 'Chapter6-Framework-Development-Practice.md': '第六章 框架开发实践.md',
  144. 'Chapter7-Building-Your-Agent-Framework.md': '第七章 构建你的Agent框架.md',
  145. 'Chapter8-Memory-and-Retrieval.md': '第八章 记忆与检索.md',
  146. 'Chapter9-Context-Engineering.md': '第九章 上下文工程.md',
  147. 'Chapter10-Agent-Communication-Protocols.md': '第十章 智能体通信协议.md',
  148. 'Chapter11-Agentic-RL.md': '第十一章 Agentic-RL.md',
  149. 'Chapter12-Agent-Performance-Evaluation.md': '第十二章 智能体性能评估.md',
  150. 'Chapter13-Intelligent-Travel-Assistant.md': '第十三章 智能旅行助手.md',
  151. 'Chapter14-Automated-Deep-Research-Agent.md': '第十四章 自动化深度研究智能体.md',
  152. 'Chapter15-Building-Cyber-Town.md': '第十五章 构建赛博小镇.md',
  153. 'Chapter16-Graduation-Project.md': '第十六章 毕业设计.md'
  154. }
  155. };
  156. function switchLanguage() {
  157. const currentHash = window.location.hash;
  158. const langBtn = document.getElementById('langBtn');
  159. // 检测当前语言
  160. if (currentHash.includes('/en/')) {
  161. // 从英文切换到中文
  162. localStorage.setItem('preferredLanguage', 'zh');
  163. let newHash = currentHash.replace('#/', '').replace('en/', '');
  164. // 提取文件名
  165. const parts = newHash.split('/');
  166. const filename = parts[parts.length - 1];
  167. // 查找对应的中文文件名
  168. if (chapterMapping.en2zh[filename]) {
  169. parts[parts.length - 1] = chapterMapping.en2zh[filename];
  170. newHash = '#/' + parts.join('/');
  171. } else {
  172. newHash = '#/';
  173. }
  174. window.location.hash = newHash;
  175. langBtn.textContent = 'English';
  176. window.$docsify.pagination.previousText = '上一章节';
  177. window.$docsify.pagination.nextText = '下一章节';
  178. } else {
  179. // 从中文切换到英文
  180. localStorage.setItem('preferredLanguage', 'en');
  181. let path = currentHash.replace('#/', '');
  182. if (path === '' || path === '/') {
  183. // 首页
  184. window.location.hash = '#/en/README_EN.md';
  185. } else {
  186. // 提取文件名
  187. const parts = path.split('/');
  188. const filename = parts[parts.length - 1];
  189. // 查找对应的英文文件名
  190. if (chapterMapping.zh2en[filename]) {
  191. parts[parts.length - 1] = chapterMapping.zh2en[filename];
  192. window.location.hash = '#/en/' + parts.join('/');
  193. } else {
  194. window.location.hash = '#/en/README_EN.md';
  195. }
  196. }
  197. langBtn.textContent = '中文';
  198. window.$docsify.pagination.previousText = 'Previous';
  199. window.$docsify.pagination.nextText = 'Next';
  200. }
  201. // 重新加载页面以应用新的 sidebar
  202. window.location.reload();
  203. }
  204. // 页面加载时设置按钮文本和检查语言偏好
  205. window.addEventListener('load', function() {
  206. const currentHash = window.location.hash;
  207. const langBtn = document.getElementById('langBtn');
  208. const preferredLang = localStorage.getItem('preferredLanguage');
  209. // 只有在用户明确设置了语言偏好后,才自动切换
  210. // 首次访问(没有偏好设置)时,默认显示中文版
  211. if (preferredLang) {
  212. // 如果用户有语言偏好,且当前 URL 不匹配偏好,则自动切换
  213. if (preferredLang === 'en' && !currentHash.includes('/en/')) {
  214. // 用户偏好英文,但当前是中文页面
  215. let path = currentHash.replace('#/', '');
  216. if (path === '' || path === '/') {
  217. window.location.hash = '#/en/README_EN.md';
  218. } else {
  219. const parts = path.split('/');
  220. const filename = parts[parts.length - 1];
  221. if (chapterMapping.zh2en[filename]) {
  222. parts[parts.length - 1] = chapterMapping.zh2en[filename];
  223. window.location.hash = '#/en/' + parts.join('/');
  224. }
  225. }
  226. } else if (preferredLang === 'zh' && currentHash.includes('/en/')) {
  227. // 用户偏好中文,但当前是英文页面
  228. let newHash = currentHash.replace('#/', '').replace('en/', '');
  229. const parts = newHash.split('/');
  230. const filename = parts[parts.length - 1];
  231. if (chapterMapping.en2zh[filename]) {
  232. parts[parts.length - 1] = chapterMapping.en2zh[filename];
  233. window.location.hash = '#/' + parts.join('/');
  234. }
  235. }
  236. }
  237. // 设置按钮文本
  238. if (currentHash.includes('/en/')) {
  239. langBtn.textContent = '中文';
  240. } else {
  241. langBtn.textContent = 'English';
  242. }
  243. });
  244. </script>
  245. </body>
  246. </html>