index.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>四维时代帮助文档</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7. <meta name="description" content="Description" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  9. <!-- <link rel="stylesheet" href="./libs/npm/docsify@4/lib/themes/vue.css"> -->
  10. <link rel="stylesheet" href="./libs/npm/docsify-themeable@0/dist/css/theme-simple.css" />
  11. <link rel="stylesheet" href="./libs/doc.css" />
  12. <link rel="stylesheet" href="./libs/codemirror/codemirror.css" />
  13. <script src="./libs/codemirror/codemirror.js"></script>
  14. <script src="./libs/codemirror/mode/xml/xml.js"></script>
  15. <script src="./libs/codemirror/mode/javascript/javascript.js"></script>
  16. <script src="./libs/codemirror/mode/css/css.js"></script>
  17. <script src="./libs/codemirror/mode/htmlmixed/htmlmixed.js"></script>
  18. <script src="./libs/codemirror/addon/edit/matchbrackets.js"></script>
  19. </head>
  20. <body>
  21. <nav></nav>
  22. <div id="app"></div>
  23. <script>
  24. window.$docsify = {
  25. //repo: 'https://github.com/4Dage-Developer/4dage-sdk',
  26. name: '4DKanKan SDK Docs',
  27. coverpage: ['/', '/zh-cn/'],
  28. loadSidebar: true,
  29. loadNavbar: '_navbar.md',
  30. subMaxLevel: 4,
  31. mergeNavbar: true,
  32. onlyCover: false,
  33. search: 'auto',
  34. search: {
  35. maxAge: 86400000,
  36. paths: '/',
  37. placeholder: '搜索',
  38. noData: 'No Results',
  39. },
  40. markdown: {
  41. renderer: {
  42. code: function (code, lang) {
  43. if (/^\s*\/\*\s*online-demo\s*\*\//.test(code)) {
  44. if (code) {
  45. code = code.replace(/^\s*\/\*\s*online-demo\s*\*\//, '')
  46. }
  47. return `
  48. <div class="kankan-online-demo">
  49. <iframe class="kankan-online-demo-iframe"></iframe>
  50. <div class="kankan-online-demo-code">
  51. <div class="kankan-online-demo-codebar">
  52. <span>源代码编辑器</span>
  53. <div>
  54. <div data-copy>复制</div>
  55. <div data-run>运行</div>
  56. <div style="display:none">还原</div>
  57. </div>
  58. </div>
  59. <textarea class="kankan-online-demo-editor">${code}</textarea>
  60. </div>
  61. </div>
  62. `
  63. }
  64. return this.origin.code.apply(this, arguments)
  65. },
  66. },
  67. },
  68. plugins: [
  69. function (hook, vm) {
  70. hook.init(function () {
  71. // 初始化完成后调用,只调用一次,没有参数。
  72. // window.$docsify.markdown = window.$docsify.markdown || {}
  73. // window.$docsify.markdown.renderer = window.$docsify.markdown.renderer || {}
  74. // window.$docsify.markdown.renderer.code = exec(window.$docsify.markdown.renderer.code)
  75. })
  76. hook.beforeEach(function (content) {
  77. // 每次开始解析 Markdown 内容时调用
  78. return content
  79. })
  80. hook.afterEach(function (html, next) {
  81. // 解析成 html 后调用。
  82. // beforeEach 和 afterEach 支持处理异步逻辑
  83. // ...
  84. // 异步处理完成后调用 next(html) 返回结果
  85. next(html)
  86. var demos = document.querySelectorAll('.kankan-online-demo')
  87. if (demos) {
  88. demos.forEach(el => {
  89. var iframe = el.querySelector('iframe')
  90. var editor = CodeMirror.fromTextArea(el.querySelector('textarea'), {
  91. lineNumbers: true,
  92. mode: 'text/html',
  93. matchBrackets: true,
  94. })
  95. editor.lineAtHeight(0)
  96. var iframeDoc = iframe.contentDocument || iframe.contentWindow.document
  97. iframeDoc.open()
  98. iframeDoc.write(editor.getValue())
  99. iframeDoc.close()
  100. el.querySelector('[data-run]').addEventListener(
  101. 'click',
  102. (function (iframe, editor) {
  103. return function () {
  104. var doc = iframe.contentDocument || iframe.contentWindow.document
  105. doc.open()
  106. doc.write(editor.getValue())
  107. doc.close()
  108. }
  109. })(iframe, editor)
  110. )
  111. el.querySelector('[data-copy]').addEventListener(
  112. 'click',
  113. (function (iframe, editor) {
  114. return function () {
  115. navigator.clipboard.writeText(editor.getValue());
  116. alert('复制成功')
  117. }
  118. })(iframe, editor)
  119. )
  120. })
  121. }
  122. })
  123. hook.doneEach(function () {
  124. // 每次路由切换时数据全部加载完成后调用,没有参数。
  125. // ...
  126. if (document.querySelectorAll('.kankan-online-demo').length) {
  127. document.querySelector('section.content').classList.add('full')
  128. } else {
  129. document.querySelector('section.content').classList.remove('full')
  130. }
  131. })
  132. hook.mounted(function () {
  133. // 初始化并第一次加载完成数据后调用,只触发一次,没有参数。
  134. })
  135. hook.ready(function () {
  136. // 初始化并第一次加载完成数据后调用,没有参数。
  137. })
  138. },
  139. ],
  140. }
  141. </script>
  142. <!-- Docsify v4 -->
  143. <script src="./libs/example/sync.js"></script>
  144. <script src="./libs/npm/docsify.min.js"></script>
  145. <script src="./libs/npm/docsify/lib/plugins/emoji.min.js"></script>
  146. <script src="./libs/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  147. <script src="./libs/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
  148. <script src="./libs/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
  149. <script src="./libs/npm/prismjs@1/components/prism-bash.min.js"></script>
  150. <script src="./libs/npm/docsify/lib/plugins/search.min.js"></script>
  151. <script src="./libs/npm/docsify/lib/plugins/external-script.min.js"></script>
  152. </body>
  153. </html>