index.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  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. </script>
  76. <!-- Put them above docsify.min.js -->
  77. <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  78. <!-- code render-->
  79. <script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-bash.js"></script>
  80. <script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-python.js"></script>
  81. <script src="//cdn.jsdelivr.net/npm/docsify-pagination@latest/dist/docsify-pagination.min.js"></script>
  82. <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
  83. <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
  84. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
  85. <script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
  86. <!-- CDN files for docsify-katex -->
  87. <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  88. <!-- 字数统计 -->
  89. <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
  90. <!-- 语言切换脚本 -->
  91. <script>
  92. function switchLanguage() {
  93. const currentHash = window.location.hash;
  94. const langBtn = document.getElementById('langBtn');
  95. // 检测当前语言
  96. if (currentHash.includes('/en/')) {
  97. // 从英文切换到中文 (移除 /en/ 前缀)
  98. let newHash = currentHash.replace('/en/', '/');
  99. // 将英文文件名转换为中文文件名
  100. newHash = newHash.replace('/README_EN.md', '/README.md');
  101. newHash = newHash.replace('/Preface.md', '/前言.md');
  102. // 将 Chapter*.md 转换为 第*章 *.md (需要根据实际文件名映射)
  103. // 这里简化处理,直接跳转到首页
  104. if (newHash.includes('Chapter')) {
  105. newHash = '#/';
  106. }
  107. window.location.hash = newHash || '#/';
  108. langBtn.textContent = 'English';
  109. // 更新分页按钮文本
  110. window.$docsify.pagination.previousText = '上一章节';
  111. window.$docsify.pagination.nextText = '下一章节';
  112. } else {
  113. // 从中文切换到英文 (添加 /en/ 前缀)
  114. let newHash;
  115. if (currentHash === '' || currentHash === '#/' || currentHash === '#') {
  116. // 首页
  117. newHash = '#/en/README.md';
  118. } else {
  119. // 其他页面,添加 /en/ 前缀
  120. const path = currentHash.replace('#/', '');
  121. // 将中文文件名转换为英文文件名
  122. let enPath = path.replace('README.md', 'README_EN.md');
  123. enPath = enPath.replace('前言.md', 'Preface.md');
  124. // 将 第*章 *.md 转换为 Chapter*.md (需要根据实际文件名映射)
  125. // 这里简化处理,直接跳转到英文首页
  126. if (enPath.includes('第') && enPath.includes('章')) {
  127. enPath = 'README_EN.md';
  128. }
  129. newHash = '#/en/' + enPath;
  130. }
  131. window.location.hash = newHash;
  132. langBtn.textContent = '中文';
  133. // 更新分页按钮文本
  134. window.$docsify.pagination.previousText = 'Previous';
  135. window.$docsify.pagination.nextText = 'Next';
  136. }
  137. // 重新加载页面以应用新的 sidebar
  138. window.location.reload();
  139. }
  140. // 页面加载时设置按钮文本
  141. window.addEventListener('load', function() {
  142. const currentHash = window.location.hash;
  143. const langBtn = document.getElementById('langBtn');
  144. if (currentHash.includes('/en/')) {
  145. langBtn.textContent = '中文';
  146. } else {
  147. langBtn.textContent = 'English';
  148. }
  149. });
  150. </script>
  151. </body>
  152. </html>