@modern-js/module-tools-docs 2.59.0 → 2.60.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/doc_build/404.html +17 -0
- package/doc_build/api/config/build-config.html +1217 -0
- package/doc_build/api/config/build-preset.html +211 -0
- package/doc_build/api/config/dev.html +63 -0
- package/doc_build/api/config/plugins.html +54 -0
- package/doc_build/api/index.html +17 -0
- package/doc_build/api/plugin-api/plugin-hooks.html +395 -0
- package/doc_build/components/faq-build-exception.html +17 -0
- package/doc_build/components/faq-build-other.html +17 -0
- package/doc_build/components/faq-build-product.html +17 -0
- package/doc_build/components/faq-storybook.html +17 -0
- package/doc_build/components/publish-emo.html +17 -0
- package/doc_build/components/register-esbuild-plugin.html +27 -0
- package/doc_build/components/release-module-doc.html +17 -0
- package/doc_build/en/api/config/build-config.html +1220 -0
- package/doc_build/en/api/config/build-preset.html +206 -0
- package/doc_build/en/api/config/dev.html +63 -0
- package/doc_build/en/api/config/plugins.html +54 -0
- package/doc_build/en/api/index.html +17 -0
- package/doc_build/en/api/plugin-api/plugin-hooks.html +399 -0
- package/doc_build/en/components/faq-build-exception.html +17 -0
- package/doc_build/en/components/faq-build-other.html +17 -0
- package/doc_build/en/components/faq-build-product.html +17 -0
- package/doc_build/en/components/faq-storybook.html +17 -0
- package/doc_build/en/components/publish-emo.html +17 -0
- package/doc_build/en/components/register-esbuild-plugin.html +27 -0
- package/doc_build/en/components/release-module-doc.html +17 -0
- package/doc_build/en/guide/advance/asset.html +58 -0
- package/doc_build/en/guide/advance/build-umd.html +166 -0
- package/doc_build/en/guide/advance/copy.html +208 -0
- package/doc_build/en/guide/advance/external-dependency.html +62 -0
- package/doc_build/en/guide/advance/in-depth-about-build.html +302 -0
- package/doc_build/en/guide/advance/in-depth-about-dev-command.html +68 -0
- package/doc_build/en/guide/basic/before-getting-started.html +139 -0
- package/doc_build/en/guide/basic/command-preview.html +131 -0
- package/doc_build/en/guide/basic/modify-output-product.html +133 -0
- package/doc_build/en/guide/basic/publish-your-project.html +100 -0
- package/doc_build/en/guide/basic/use-micro-generator.html +54 -0
- package/doc_build/en/guide/basic/use-module-doc.html +397 -0
- package/doc_build/en/guide/basic/using-storybook.html +168 -0
- package/doc_build/en/guide/best-practices/components.html +198 -0
- package/doc_build/en/guide/best-practices/use-tailwindcss.html +243 -0
- package/doc_build/en/guide/faq/basic.html +23 -0
- package/doc_build/en/guide/faq/build.html +237 -0
- package/doc_build/en/guide/faq/index.html +23 -0
- package/doc_build/en/guide/faq/storybook.html +85 -0
- package/doc_build/en/guide/intro/getting-started.html +92 -0
- package/doc_build/en/guide/intro/welcome.html +27 -0
- package/doc_build/en/guide/intro/why-module-engineering-solution.html +25 -0
- package/doc_build/en/index.html +17 -0
- package/doc_build/en/plugins/guide/getting-started.html +70 -0
- package/doc_build/en/plugins/guide/plugin-object.html +74 -0
- package/doc_build/en/plugins/guide/setup-function.html +96 -0
- package/doc_build/en/plugins/official-list/overview.html +26 -0
- package/doc_build/en/plugins/official-list/plugin-babel.html +65 -0
- package/doc_build/en/plugins/official-list/plugin-banner.html +91 -0
- package/doc_build/en/plugins/official-list/plugin-import.html +111 -0
- package/doc_build/en/plugins/official-list/plugin-node-polyfill.html +128 -0
- package/doc_build/en/plugins/official-list/plugin-polyfill.html +72 -0
- package/doc_build/en/plugins/official-list/plugin-vue.html +66 -0
- package/doc_build/guide/advance/asset.html +55 -0
- package/doc_build/guide/advance/build-umd.html +170 -0
- package/doc_build/guide/advance/copy.html +208 -0
- package/doc_build/guide/advance/external-dependency.html +61 -0
- package/doc_build/guide/advance/in-depth-about-build.html +300 -0
- package/doc_build/guide/advance/in-depth-about-dev-command.html +68 -0
- package/doc_build/guide/basic/before-getting-started.html +139 -0
- package/doc_build/guide/basic/command-preview.html +131 -0
- package/doc_build/guide/basic/modify-output-product.html +134 -0
- package/doc_build/guide/basic/publish-your-project.html +99 -0
- package/doc_build/guide/basic/use-micro-generator.html +54 -0
- package/doc_build/guide/basic/use-module-doc.html +395 -0
- package/doc_build/guide/basic/using-storybook.html +177 -0
- package/doc_build/guide/best-practices/components.html +198 -0
- package/doc_build/guide/best-practices/use-tailwindcss.html +243 -0
- package/doc_build/guide/faq/basic.html +23 -0
- package/doc_build/guide/faq/build.html +234 -0
- package/doc_build/guide/faq/index.html +23 -0
- package/doc_build/guide/faq/storybook.html +85 -0
- package/doc_build/guide/intro/getting-started.html +89 -0
- package/doc_build/guide/intro/welcome.html +27 -0
- package/doc_build/guide/intro/why-module-engineering-solution.html +25 -0
- package/doc_build/index.html +17 -0
- package/doc_build/plugins/guide/getting-started.html +70 -0
- package/doc_build/plugins/guide/plugin-object.html +74 -0
- package/doc_build/plugins/guide/setup-function.html +95 -0
- package/doc_build/plugins/official-list/overview.html +26 -0
- package/doc_build/plugins/official-list/plugin-babel.html +64 -0
- package/doc_build/plugins/official-list/plugin-banner.html +94 -0
- package/doc_build/plugins/official-list/plugin-import.html +112 -0
- package/doc_build/plugins/official-list/plugin-node-polyfill.html +128 -0
- package/doc_build/plugins/official-list/plugin-polyfill.html +71 -0
- package/doc_build/plugins/official-list/plugin-vue.html +66 -0
- package/doc_build/static/css/styles.0b88df3a.css +1 -0
- package/doc_build/static/js/490.a066dbc0.js +6 -0
- package/doc_build/static/js/490.a066dbc0.js.LICENSE.txt +35 -0
- package/doc_build/static/js/async/1095.4ca5fdf0.js +1 -0
- package/doc_build/static/js/async/1148.ff6a84ca.js +1 -0
- package/doc_build/static/js/async/1306.8bc84d6b.js +1 -0
- package/doc_build/static/js/async/1507.fed31a58.js +1 -0
- package/doc_build/static/js/async/1527.4c6e53e2.js +1 -0
- package/doc_build/static/js/async/1657.d0d95d59.js +1 -0
- package/doc_build/static/js/async/1801.5d49a2fe.js +1 -0
- package/doc_build/static/js/async/1941.0b3cceee.js +1 -0
- package/doc_build/static/js/async/213.db8a0492.js +1 -0
- package/doc_build/static/js/async/2131.5dfdffa9.js +1 -0
- package/doc_build/static/js/async/2140.848412d7.js +1 -0
- package/doc_build/static/js/async/2206.f6b802b2.js +1 -0
- package/doc_build/static/js/async/2300.cba0106e.js +1 -0
- package/doc_build/static/js/async/2347.a480682f.js +1 -0
- package/doc_build/static/js/async/2365.daed0a9c.js +1 -0
- package/doc_build/static/js/async/2561.2e43400c.js +1 -0
- package/doc_build/static/js/async/2579.f7c71e6b.js +1 -0
- package/doc_build/static/js/async/2671.c711355f.js +1 -0
- package/doc_build/static/js/async/2704.561dadd9.js +1 -0
- package/doc_build/static/js/async/2712.5ffea5ba.js +1 -0
- package/doc_build/static/js/async/3023.5bef6325.js +1 -0
- package/doc_build/static/js/async/3039.3982622e.js +1 -0
- package/doc_build/static/js/async/3097.b043b3aa.js +1 -0
- package/doc_build/static/js/async/3213.df408a99.js +1 -0
- package/doc_build/static/js/async/3235.0c4d2c9b.js +1 -0
- package/doc_build/static/js/async/336.8387125c.js +1 -0
- package/doc_build/static/js/async/3493.5133deaa.js +1 -0
- package/doc_build/static/js/async/351.de7824af.js +1 -0
- package/doc_build/static/js/async/3597.cf46a69b.js +1 -0
- package/doc_build/static/js/async/36.eee0e8fe.js +1 -0
- package/doc_build/static/js/async/3628.726e3f10.js +1 -0
- package/doc_build/static/js/async/3724.bcc90bb4.js +1 -0
- package/doc_build/static/js/async/3761.949f5838.js +1 -0
- package/doc_build/static/js/async/4061.84ac839b.js +1 -0
- package/doc_build/static/js/async/4064.104b71cd.js +1 -0
- package/doc_build/static/js/async/4206.133ffe9e.js +1 -0
- package/doc_build/static/js/async/443.b519ce6b.js +1 -0
- package/doc_build/static/js/async/4501.c647ab73.js +1 -0
- package/doc_build/static/js/async/453.7358c1fd.js +1 -0
- package/doc_build/static/js/async/461.2d6ea16c.js +1 -0
- package/doc_build/static/js/async/4615.c4e5b749.js +1 -0
- package/doc_build/static/js/async/4655.bbe27e7b.js +1 -0
- package/doc_build/static/js/async/4812.ebd3f4cb.js +1 -0
- package/doc_build/static/js/async/4904.de72a299.js +1 -0
- package/doc_build/static/js/async/5105.28347c4d.js +1 -0
- package/doc_build/static/js/async/5453.87dcea50.js +1 -0
- package/doc_build/static/js/async/5455.9e038fda.js +1 -0
- package/doc_build/static/js/async/5493.3644c7b8.js +1 -0
- package/doc_build/static/js/async/5495.50aacc7e.js +1 -0
- package/doc_build/static/js/async/5555.40dabd12.js +1 -0
- package/doc_build/static/js/async/5558.073d18d0.js +1 -0
- package/doc_build/static/js/async/5844.b3a9d57a.js +1 -0
- package/doc_build/static/js/async/588.6de9811a.js +1 -0
- package/doc_build/static/js/async/5889.41a786b6.js +1 -0
- package/doc_build/static/js/async/5892.b0db6657.js +1 -0
- package/doc_build/static/js/async/5995.209e2925.js +1 -0
- package/doc_build/static/js/async/6046.963bbf59.js +1 -0
- package/doc_build/static/js/async/6308.6363792d.js +1 -0
- package/doc_build/static/js/async/6576.a753babb.js +1 -0
- package/doc_build/static/js/async/6615.154a2810.js +1 -0
- package/doc_build/static/js/async/6858.e2452605.js +1 -0
- package/doc_build/static/js/async/6975.be4ba201.js +1 -0
- package/doc_build/static/js/async/7080.1c684c7d.js +1 -0
- package/doc_build/static/js/async/7220.1c4ee8bb.js +1 -0
- package/doc_build/static/js/async/7406.b2acec42.js +1 -0
- package/doc_build/static/js/async/7521.ca744786.js +1 -0
- package/doc_build/static/js/async/7535.f50f0fd1.js +1 -0
- package/doc_build/static/js/async/7584.c3b673fd.js +1 -0
- package/doc_build/static/js/async/7600.03d9da89.js +1 -0
- package/doc_build/static/js/async/7663.86b79735.js +1 -0
- package/doc_build/static/js/async/769.2bc1c7b7.js +1 -0
- package/doc_build/static/js/async/7715.1bfe887f.js +1 -0
- package/doc_build/static/js/async/7837.5667c422.js +1 -0
- package/doc_build/static/js/async/8040.1cfb21ff.js +1 -0
- package/doc_build/static/js/async/8085.f9f71860.js +1 -0
- package/doc_build/static/js/async/8098.beeb77f3.js +1 -0
- package/doc_build/static/js/async/8134.068074a0.js +1 -0
- package/doc_build/static/js/async/8158.2834ced1.js +1 -0
- package/doc_build/static/js/async/8214.2fdfe2fe.js +1 -0
- package/doc_build/static/js/async/8233.24111213.js +1 -0
- package/doc_build/static/js/async/8451.5328c0c7.js +1 -0
- package/doc_build/static/js/async/8689.f8447ca1.js +1 -0
- package/doc_build/static/js/async/8694.077556c4.js +1 -0
- package/doc_build/static/js/async/8713.91395601.js +1 -0
- package/doc_build/static/js/async/8750.0f6872b3.js +1 -0
- package/doc_build/static/js/async/8802.463e3040.js +1 -0
- package/doc_build/static/js/async/9100.066e1017.js +1 -0
- package/doc_build/static/js/async/9250.8fb41a47.js +1 -0
- package/doc_build/static/js/async/9524.bb257861.js +1 -0
- package/doc_build/static/js/async/9611.b2543acb.js +1 -0
- package/doc_build/static/js/async/964.b00f3e9f.js +1 -0
- package/doc_build/static/js/async/9740.b27e6629.js +1 -0
- package/doc_build/static/js/index.6a5d779d.js +1 -0
- package/doc_build/static/js/lib-react.a93218f7.js +2 -0
- package/doc_build/static/js/lib-react.a93218f7.js.LICENSE.txt +39 -0
- package/doc_build/static/js/lib-router.f8d11890.js +2 -0
- package/doc_build/static/js/lib-router.f8d11890.js.LICENSE.txt +32 -0
- package/doc_build/static/js/styles.3f5a6140.js +1 -0
- package/doc_build/static/search_index.en.f19ea64b.json +1 -0
- package/doc_build/static/search_index.zh.e818eee4.json +1 -0
- package/doc_build/test-result.png +0 -0
- package/doc_build/why-module-solution.png +0 -0
- package/docs/en/api/config/dev.md +2 -2
- package/docs/en/guide/basic/command-preview.md +0 -16
- package/docs/en/guide/intro/welcome.md +0 -1
- package/docs/zh/api/config/dev.md +2 -2
- package/docs/zh/guide/basic/command-preview.md +0 -16
- package/docs/zh/guide/basic/using-storybook.mdx +1 -1
- package/docs/zh/guide/intro/welcome.md +0 -1
- package/package.json +4 -4
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<meta name="generator" content="Rspress v1.31.0">
|
|
9
|
+
<title data-rh="true">开发模块文档 - Modern.js Module</title><meta data-rh="true" name="description" content="模块工程解决方案"/>
|
|
10
|
+
<script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer src="/module-tools/static/js/styles.3f5a6140.js"></script><script defer src="/module-tools/static/js/lib-react.a93218f7.js"></script><script defer src="/module-tools/static/js/lib-router.f8d11890.js"></script><script defer src="/module-tools/static/js/490.a066dbc0.js"></script><script defer src="/module-tools/static/js/index.6a5d779d.js"></script><link href="/module-tools/static/css/styles.0b88df3a.css" rel="stylesheet"></head>
|
|
11
|
+
|
|
12
|
+
<body >
|
|
13
|
+
<div id="root"><div><div class="navContainer_f6cde rspress-nav px-6 " style="position:sticky"><div class="container_f6cde flex justify-between items-center h-full"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_f6cde"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_6e282"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_6e282">Search Docs</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_6e282"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_f6cde flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="rspress-nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium flex" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="rspress-nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--rp-shadow-3);z-index:100;border:1px solid var(--rp-c-divider-light);border-radius:var(--rp-radius-large);background:var(--rp-c-bg)"><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/basic/use-module-doc.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5.2.3.2.8-.1 1.1-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2zM9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2z"></path></svg></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_f6cde"><div class="navScreen_457e8 " id="navScreen"><div class="container_457e8"><div class="navMenu_457e8"><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde activeItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">指南</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">API</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735 cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="rspress-nav-menu-item singleItem_f6cde text-sm font-medium mx-1.5 px-3 py-2 flex items-center">插件</div></a></div><div class="navMenuItem_457e8 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8">v2.60.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_03735 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_457e8 flex justify-center"></div><div class="flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_457e8 relative"><button class="button_457e8"><span class="buttonSpan_457e8"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_457e8 "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_457e8"><div><div class="p-1 text-center"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_03735 cursor-pointer" target="" href="/module-tools/en/guide/basic/use-module-doc.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_93d67 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_93d67"><svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" navHamburger_e7b06 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_edeb4 pt-0"><div class="rspress-sidebar-menu"><button class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button class="flex-center ml-auto"><span class="text-sm">目录</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button></div><aside class="sidebar_71eca rspress-sidebar "><div class="navTitleMask_71eca"><div class="navBarTitle_f6cde"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Modern.js Module</span></a></div></div><div class="rspress-scrollbar sidebarContent_71eca"><nav class="pb-2"><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">介绍</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>欢迎使用</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/why-module-engineering-solution.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>为什么需要 Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/intro/getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>快速开始</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">基础使用</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/before-getting-started.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开始之前</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/command-preview.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>CLI 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/modify-output-product.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>修改输出产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/use-micro-generator.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用微生成器</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/use-module-doc.html"><div class="menuItemActive_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开发模块文档</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/using-storybook.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Storybook</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/basic/publish-your-project.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>版本管理与发布</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">进阶指南</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-build.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>深入理解构建</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/in-depth-about-dev-command.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>深入理解 dev 命令</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/copy.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Copy 工具</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/external-dependency.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>处理三方依赖</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/build-umd.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>构建 umd 产物</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/advance/asset.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>处理静态资源</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">最佳实践</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/best-practices/components.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>开发组件</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/best-practices/use-tailwindcss.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>使用 Tailwind CSS</span></div></a></div></div></div></section><section class="mt-0.5 block" style="margin-left:0"><div class="flex justify-between items-center menuItem_71eca" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">常见问题</span></h2><div class="collapseContainer_71eca p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/basic.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>通用类问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/build.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>构建相关问题</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/guide/faq/storybook.html"><div class="menuItem_71eca mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>Storybook 相关问题</span></div></a></div></div></div></section></nav></div></aside><div class="content_edeb4 rspress-doc-container flex flex-shrink-0 mx-auto"><div class="w-full flex-1"><div><div class="rspress-doc"><!--$--><h1 id="开发模块文档" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">开发模块文档<a class="link_3b154 header-anchor" aria-hidden="true" href="#开发模块文档">#</a></h1>
|
|
14
|
+
<p class="my-4 leading-7">本章介绍如何为模块项目快速搭建一个静态文档站点。</p>
|
|
15
|
+
<h2 id="开始之前" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">开始之前<a class="link_3b154 header-anchor" aria-hidden="true" href="#开始之前">#</a></h2>
|
|
16
|
+
<h3 id="为什么我们需要为模块搭建一个文档站点" class="mt-10 mb-2 leading-7 text-xl title_3b154">为什么我们需要为模块搭建一个文档站点<a class="link_3b154 header-anchor" aria-hidden="true" href="#为什么我们需要为模块搭建一个文档站点">#</a></h3>
|
|
17
|
+
<ol class="list-decimal pl-5 my-4 leading-7">
|
|
18
|
+
<li class="[&:not(:first-child)]:mt-2">文档站点可以帮助我们更好地组织文档的结构。</li>
|
|
19
|
+
<li class="[&:not(:first-child)]:mt-2">文档站点具有更好的表现形式，例如可以在页面中执行函数，渲染组件等。</li>
|
|
20
|
+
<li class="[&:not(:first-child)]:mt-2">可以更好地利用 AI 搜索的能力。</li>
|
|
21
|
+
</ol>
|
|
22
|
+
<h3 id="前置准备" class="mt-10 mb-2 leading-7 text-xl title_3b154">前置准备<a class="link_3b154 header-anchor" aria-hidden="true" href="#前置准备">#</a></h3>
|
|
23
|
+
<ol class="list-decimal pl-5 my-4 leading-7">
|
|
24
|
+
<li class="[&:not(:first-child)]:mt-2">通过<a class="link_03735 link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/guide/basic/use-micro-generator.html">微生成器</a>开启文档功能。</li>
|
|
25
|
+
<li class="[&:not(:first-child)]:mt-2">阅读<a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/start/introduction.html" class="link_03735 link_3b154 inline-link_3b154">Rspress 介绍</a>。</li>
|
|
26
|
+
</ol>
|
|
27
|
+
<p class="my-4 leading-7">完成准备工作之后，接下来我们会基于 Rspress 为模块项目搭建一个文档站点。</p>
|
|
28
|
+
<h2 id="站点基本结构" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">站点基本结构<a class="link_3b154 header-anchor" aria-hidden="true" href="#站点基本结构">#</a></h2>
|
|
29
|
+
<p class="my-4 leading-7">站点整体布局由三部分组成：导航栏、侧边栏以及正文部分，其中正文还包括了 TOC(Table of contents found at the beginning of a book or document)。</p>
|
|
30
|
+
<p class="my-4 leading-7">Rspress 使用的是<a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/basic/conventional-route.html" class="link_03735 link_3b154 inline-link_3b154">文件系统路由</a>，模块文档基于此实现了侧边栏的自动生成。
|
|
31
|
+
例如，如果你有以下的文件结构：</p>
|
|
32
|
+
<div class="language-bash"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-bash" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>docs
|
|
33
|
+
</span></span><span style="display:block;padding:0 1.25rem">├── foo
|
|
34
|
+
</span><span style="display:block;padding:0 1.25rem">│ └── bar.md
|
|
35
|
+
</span><span style="display:block;padding:0 1.25rem">│ └── index.md
|
|
36
|
+
</span><span style="display:block;padding:0 1.25rem">└── foo.md
|
|
37
|
+
</span><span style="display:block;padding:0 1.25rem">└── index.md</span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
38
|
+
<p class="my-4 leading-7">那么 <code>foo/bar.md</code> 的路由路径会是 <code>/foo/bar</code>，<code>foo.md</code> 的路由路径会是 <code>/foo</code>，<code>index.md</code> 的路由路径会是 <code>/</code>。</p>
|
|
39
|
+
<p class="my-4 leading-7">具体映射规则如下：</p>
|
|
40
|
+
<table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider">
|
|
41
|
+
<thead>
|
|
42
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
43
|
+
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">文件路径</th>
|
|
44
|
+
<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">路由路径</th>
|
|
45
|
+
</tr>
|
|
46
|
+
</thead>
|
|
47
|
+
<tbody>
|
|
48
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
49
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>index.md</code></td>
|
|
50
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/</code></td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
53
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo.md</code></td>
|
|
54
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo</code></td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
57
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/index.md</code></td>
|
|
58
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/</code></td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
61
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/bar.md</code></td>
|
|
62
|
+
<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/bar</code></td>
|
|
63
|
+
</tr>
|
|
64
|
+
</tbody>
|
|
65
|
+
</table>
|
|
66
|
+
<p class="my-4 leading-7">与上述文件路径和路由路径依次对应的侧边栏如下所示：</p>
|
|
67
|
+
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rpauheh7nulwbm/edenx-module/docs-blog/autosidebar.png"/>
|
|
68
|
+
<h3 id="配置侧边栏" class="mt-10 mb-2 leading-7 text-xl title_3b154">配置侧边栏<a class="link_3b154 header-anchor" aria-hidden="true" href="#配置侧边栏">#</a></h3>
|
|
69
|
+
<p class="my-4 leading-7">如上图所示，模块文档已经为文件系统路由自动生成了侧边栏，其中侧边栏每一栏的文本是由文件的一级标题或者目录名决定。
|
|
70
|
+
如果你需要自定义侧边栏，请使用 <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/basic/auto-nav-sidebar.html" class="link_03735 link_3b154 inline-link_3b154">_meta.json</a> 或者直接配置 <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/api/config/config-theme.html#sidebar" class="link_03735 link_3b154 inline-link_3b154">sidebar</a>。</p>
|
|
71
|
+
<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">如果你的文档目录结构是符合国际化的，例如：</p>
|
|
72
|
+
<div class="language-bash"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-bash" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>docs
|
|
73
|
+
</span></span><span style="display:block;padding:0 1.25rem">├── en
|
|
74
|
+
</span><span style="display:block;padding:0 1.25rem">│ ├── button.mdx
|
|
75
|
+
</span><span style="display:block;padding:0 1.25rem">│ ├── index.mdx
|
|
76
|
+
</span><span style="display:block;padding:0 1.25rem">└── zh
|
|
77
|
+
</span><span style="display:block;padding:0 1.25rem"> ├── button.mdx
|
|
78
|
+
</span><span style="display:block;padding:0 1.25rem"> ├── index.mdx</span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
79
|
+
<p class="my-4 leading-7">你需要按照<a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/default-theme/i18n.html" class="link_03735 link_3b154 inline-link_3b154">国际化</a>章节，同时配置 <code>lang</code> 和 <code>locales</code>，否则模块自动生成的侧边栏不会处理 <code>zh</code> 和 <code>en</code> 这两个目录。
|
|
80
|
+
</p></div></div>
|
|
81
|
+
<h2 id="编写文档" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">编写文档<a class="link_3b154 header-anchor" aria-hidden="true" href="#编写文档">#</a></h2>
|
|
82
|
+
<p class="my-4 leading-7">接下来我们可以专注于文档内容的编写了。除了最基本的编写 markdown 以外，你可能还需要了解以下进阶内容：</p>
|
|
83
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
84
|
+
<li class="[&:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/basic/use-mdx.html" class="link_03735 link_3b154 inline-link_3b154">使用 MDX</a></li>
|
|
85
|
+
<li class="[&:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/basic/static-assets.html" class="link_03735 link_3b154 inline-link_3b154">使用静态资源</a></li>
|
|
86
|
+
</ul>
|
|
87
|
+
<h2 id="组件预览" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">组件预览<a class="link_3b154 header-anchor" aria-hidden="true" href="#组件预览">#</a></h2>
|
|
88
|
+
<p class="my-4 leading-7">模块文档为组件库提供了预览能力，<code>jsx</code>和<code>tsx</code>的代码块里的内容将会被解析为 React 组件。</p>
|
|
89
|
+
<h3 id="示例" class="mt-10 mb-2 leading-7 text-xl title_3b154">示例<a class="link_3b154 header-anchor" aria-hidden="true" href="#示例">#</a></h3>
|
|
90
|
+
<p class="my-4 leading-7">假设我们的项目名是<code>demo</code>，并导出了一个 Button 组件。</p>
|
|
91
|
+
<ol class="list-decimal pl-5 my-4 leading-7">
|
|
92
|
+
<li class="[&:not(:first-child)]:mt-2">首先新增 <code>docs/Button.mdx</code> 文件：</li>
|
|
93
|
+
</ol>
|
|
94
|
+
<div class="language-mdx"><div class="rspress-code-title">Button.mdx</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span># Button
|
|
95
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
96
|
+
</span><span style="display:block;padding:0 1.25rem">## 基本用法
|
|
97
|
+
</span><span style="display:block;padding:0 1.25rem">
|
|
98
|
+
</span><span style="display:block;padding:0 1.25rem">按钮分为： 小、中、大四种尺寸
|
|
99
|
+
</span><span style="display:block;padding:0 1.25rem">
|
|
100
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">tsx
|
|
101
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">import React from 'react';
|
|
102
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">import { Button } from 'demo';
|
|
103
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">
|
|
104
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">export default () => {
|
|
105
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string"> return <Button size="large">点我</Button>;
|
|
106
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">};
|
|
107
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)"></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
108
|
+
<ol start="2" class="list-decimal pl-5 my-4 leading-7">
|
|
109
|
+
<li class="[&:not(:first-child)]:mt-2">在<code>tsconfig.json</code>里配置别名，将包名指向当前项目目录，使得文档开发者和用户使用组件方式一致：</li>
|
|
110
|
+
</ol>
|
|
111
|
+
<div class="language-json"><div class="rspress-code-title">tsconfig.json</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-json" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
112
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">"compilerOptions"</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
113
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">"paths"</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
114
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">"demo"</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">"."</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
|
|
115
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
|
116
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
|
117
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
118
|
+
<ol start="3" class="list-decimal pl-5 my-4 leading-7">
|
|
119
|
+
<li class="[&:not(:first-child)]:mt-2">在 <code>.gitignore</code> 文件下添加 <code>doc_build/</code>，文档产物将会生成在此目录下：</li>
|
|
120
|
+
</ol>
|
|
121
|
+
<div class="language-bash"><div class="rspress-code-title">.gitignore</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-bash" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>doc_build/</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
122
|
+
<p class="my-4 leading-7">恭喜你，已经完成了一个组件文档的编写，执行<code>pnpm run dev</code>看看效果吧，记得先构建一下组件库，确保组件产物存在。</p>
|
|
123
|
+
<h3 id="移动端预览" class="mt-10 mb-2 leading-7 text-xl title_3b154">移动端预览<a class="link_3b154 header-anchor" aria-hidden="true" href="#移动端预览">#</a></h3>
|
|
124
|
+
<p class="my-4 leading-7">同时，我们也支持了移动端预览的方式，即使用 iframe 渲染移动端组件，并可以通过 <code>iframePosition</code> 设置 iframe 的位置，支持扫码预览以及新页面打开。</p>
|
|
125
|
+
<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/module-tools'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
126
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginDoc </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/plugin-rspress'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
127
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
128
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
129
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
|
|
130
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
131
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginDoc</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
132
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
|
|
133
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * 选择预览方式
|
|
134
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @default internal
|
|
135
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
|
|
136
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> previewMode</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'iframe'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
137
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
|
|
138
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * 设置 iframe 的位置
|
|
139
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @default 'follow'
|
|
140
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
|
|
141
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> iframePosition</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'fixed'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
142
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
143
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
144
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
145
|
+
<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">如果只想要改变某一个 <code>jsx</code> 和 <code>tsx</code> 代码块的预览方式，可以使用不同的修饰符进行标识：</p>
|
|
146
|
+
<div class="language-mdx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">jsx pure
|
|
147
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// 这里的内容不会被渲染
|
|
148
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)"></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span>
|
|
149
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
150
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">jsx internal
|
|
151
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// 内置在文档内容里渲染
|
|
152
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)"></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span>
|
|
153
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
154
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">jsx iframe
|
|
155
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// 使用 iframe 渲染
|
|
156
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token template-string" style="color:var(--code-token-string)"></span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
157
|
+
</div></div>
|
|
158
|
+
<h3 id="使用外部-demo" class="mt-10 mb-2 leading-7 text-xl title_3b154">使用外部 demo<a class="link_3b154 header-anchor" aria-hidden="true" href="#使用外部-demo">#</a></h3>
|
|
159
|
+
<p class="my-4 leading-7">如果我们的 demo 非常复杂，那么建议单独编写 demo，然后在 MDX 中使用 <code>code</code> 标签：</p>
|
|
160
|
+
<div class="language-mdx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)"><</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">src</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-string-expression)">/path/demo.tsx</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-punctuation)">></span><span class="token" style="color:var(--code-token-punctuation)"></</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-punctuation)">></span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
161
|
+
<p class="my-4 leading-7">这同样支持单独设置代码块的预览方式，例如：</p>
|
|
162
|
+
<div class="language-mdx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)"><</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">src</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-string-expression)">/path/demo.tsx</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">previewMode</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-string-expression)">iframe</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-punctuation)">></span><span class="token" style="color:var(--code-token-punctuation)"></</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-punctuation)">></span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
163
|
+
<h2 id="使用内置组件" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">使用内置组件<a class="link_3b154 header-anchor" aria-hidden="true" href="#使用内置组件">#</a></h2>
|
|
164
|
+
<p class="my-4 leading-7">插件内部实现了一部分内置组件，以便于你可以更轻松地开发模块文档。</p>
|
|
165
|
+
<h3 id="api" class="mt-10 mb-2 leading-7 text-xl title_3b154">API<a class="link_3b154 header-anchor" aria-hidden="true" href="#api">#</a></h3>
|
|
166
|
+
<p class="my-4 leading-7">展示模块的 API 内容</p>
|
|
167
|
+
<h4 id="解析文件" class="mt-8 leading-6 text-lg title_3b154">解析文件<a class="link_3b154 header-anchor" aria-hidden="true" href="#解析文件">#</a></h4>
|
|
168
|
+
<p class="my-4 leading-7">在使用 API 组件之前，首先我们需要指定解析的文件：</p>
|
|
169
|
+
<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/module-tools'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
170
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginDoc </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/plugin-rspress'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
171
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
172
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
173
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
|
|
174
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
175
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginDoc</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
176
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> entries</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
177
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> Button</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'./src/button.tsx'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
178
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
179
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> apiParseTool</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'react-docgen-typescript'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
180
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
181
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
182
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
183
|
+
<h4 id="内容生成" class="mt-8 leading-6 text-lg title_3b154">内容生成<a class="link_3b154 header-anchor" aria-hidden="true" href="#内容生成">#</a></h4>
|
|
184
|
+
<p class="my-4 leading-7">接下来我们了解一下根据解析的文件会生成什么样的 markdown 内容。</p>
|
|
185
|
+
<p class="my-4 leading-7">内容可以通过 <a target="_blank" rel="noopener noreferrer" href="https://github.com/styleguidist/react-docgen-typescript" class="link_03735 link_3b154 inline-link_3b154">react-docgen-typescript</a> 或者 <a target="_blank" rel="noopener noreferrer" href="https://github.com/documentationjs/documentation" class="link_03735 link_3b154 inline-link_3b154">documentation</a> 两个不同的工具生成：</p>
|
|
186
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
187
|
+
<li class="[&:not(:first-child)]:mt-2"><code>react-docgen-typescript</code>针对于组件库场景，仅会解析 props 生成表格。</li>
|
|
188
|
+
</ul>
|
|
189
|
+
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">ButtonProps</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
190
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
|
|
191
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * Whether to disable the button
|
|
192
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
|
|
193
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> disabled</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">boolean</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
194
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/**
|
|
195
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * Type of Button
|
|
196
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @default 'default'
|
|
197
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
|
|
198
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> size</span><span class="token operator">?</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'mini'</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">'small'</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">'default'</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">'large'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
199
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
200
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">Button</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>props</span><span class="token operator">?</span><span class="token operator">:</span><span> ButtonProps</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
201
|
+
<p class="my-4 leading-7">上面是一个标准写法，其中 <code>ButtonProps</code> 将被提取至表格中， <code>Button</code> 作为表格的标题。如果使用默认导出，文件名将作为表格标题。</p>
|
|
202
|
+
<p class="my-4 leading-7">需要注意的是，export 导出事先定义的特性将不会被解析。</p>
|
|
203
|
+
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">A</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
204
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
205
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token" style="color:var(--code-token-constant)">A</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// wrong</span><span>
|
|
206
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-constant)">A</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// wrong</span><span>
|
|
207
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token function-variable" style="color:var(--code-token-function)">B</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// right</span><span>
|
|
208
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token operator">=></span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span> </span><span class="token" style="color:var(--code-token-comment)">// right</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
209
|
+
<p class="my-4 leading-7">生成的内容如下：</p>
|
|
210
|
+
<div class="language-mdx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span>### ButtonTest
|
|
211
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
212
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token operator">|</span><span> 属性 </span><span class="token operator">|</span><span> 说明 </span><span class="token operator">|</span><span> 类型 </span><span class="token operator">|</span><span> 默认值 </span><span class="token operator">|</span><span>
|
|
213
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token operator">|</span><span> </span><span class="token operator">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">:</span><span> </span><span class="token operator">|</span><span> </span><span class="token operator">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">:</span><span> </span><span class="token operator">|</span><span> </span><span class="token operator">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">:</span><span> </span><span class="token operator">|</span><span> </span><span class="token operator">:</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span><span class="token operator">:</span><span> </span><span class="token operator">|</span><span>
|
|
214
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token operator">|</span><span> disabled </span><span class="token operator">|</span><span> Whether to disable the button </span><span class="token operator">|</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">boolean</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span> </span><span class="token operator">|</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">-</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span> </span><span class="token operator">|</span><span>
|
|
215
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token operator">|</span><span> size </span><span class="token operator">|</span><span> Type </span><span class="token" style="color:var(--code-token-keyword)">of</span><span> Button </span><span class="token operator">|</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">"mini" \| "small" \| "default" \| "large"</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span> </span><span class="token operator">|</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string" style="color:var(--code-token-string)">'default'</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span> </span><span class="token operator">|</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
216
|
+
<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">如果 Props 里使用了 React 的类型，你需要在 tsconfig.json 里添加 types ，否则会解析不到 React 命名空间下的类型。</p>
|
|
217
|
+
<div class="language-json"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-json" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
218
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">"compilerOptions"</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
219
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">"types"</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span class="token" style="color:var(--code-token-string)">"react"</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
|
|
220
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
|
|
221
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
222
|
+
<p class="my-4 leading-7">更好的方式是直接引用类型，例如</p>
|
|
223
|
+
<div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> </span><span class="token" style="color:var(--code-token-constant)">FC</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'react'</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
224
|
+
</div></div>
|
|
225
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
226
|
+
<li class="[&:not(:first-child)]:mt-2"><code>documentation</code>适用于工具库场景，用来解析 JSDoc 注释。</li>
|
|
227
|
+
</ul>
|
|
228
|
+
<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/**
|
|
229
|
+
</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * Greet function that returns a greeting message.
|
|
230
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @param {string} name - The name of the person to greet.
|
|
231
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @param {string} [greeting='Hello'] - The greeting to use.
|
|
232
|
+
</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @returns {string} The greeting message.
|
|
233
|
+
</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
|
|
234
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">greet</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>name</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> greeting </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-string)">'Hello'</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
235
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token template-string interpolation interpolation-punctuation" style="color:var(--code-token-punctuation)">${</span><span class="token template-string interpolation">greeting</span><span class="token template-string interpolation interpolation-punctuation" style="color:var(--code-token-punctuation)">}</span><span class="token template-string" style="color:var(--code-token-string)">, </span><span class="token template-string interpolation interpolation-punctuation" style="color:var(--code-token-punctuation)">${</span><span class="token template-string interpolation">name</span><span class="token template-string interpolation interpolation-punctuation" style="color:var(--code-token-punctuation)">}</span><span class="token template-string" style="color:var(--code-token-string)">!</span><span class="token template-string template-punctuation" style="color:var(--code-token-string)">`</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
236
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
237
|
+
<p class="my-4 leading-7">上面是一个带有 JSDoc 注释的 greet 函数。生成的内容如下：</p>
|
|
238
|
+
<div class="language-md"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-md" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"><!-- Generated by documentation.js. Update this documentation by updating the source code. --></span><span>
|
|
239
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
240
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation);font-weight:bold">##</span><span class="token" style="color:#EBCB8B;font-weight:bold"> greet</span><span>
|
|
241
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
242
|
+
</span><span style="display:block;padding:0 1.25rem">Greet function that returns a greeting message.
|
|
243
|
+
</span><span style="display:block;padding:0 1.25rem">
|
|
244
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation);font-weight:bold">###</span><span class="token" style="color:#EBCB8B;font-weight:bold"> Parameters</span><span>
|
|
245
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
246
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token list" style="color:var(--code-token-punctuation)">-</span><span> </span><span class="token code-snippet code" style="color:var(--code-token-keyword)">`name`</span><span> </span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span class="token content url" style="font-weight:bold">[</span><span class="token content url" style="font-weight:bold">string</span><span class="token content url" style="font-weight:bold">][</span><span class="token content url" style="font-weight:bold;color:var(--code-token-variable)">1</span><span class="token content url" style="font-weight:bold">]</span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span> The name of the person to greet.
|
|
247
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token list" style="color:var(--code-token-punctuation)">-</span><span> </span><span class="token code-snippet code" style="color:var(--code-token-keyword)">`greeting`</span><span> </span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span class="token content url" style="font-weight:bold">[</span><span class="token content url" style="font-weight:bold">string</span><span class="token content url" style="font-weight:bold">][</span><span class="token content url" style="font-weight:bold;color:var(--code-token-variable)">1</span><span class="token content url" style="font-weight:bold">]</span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span> The greeting to use. (optional, default </span><span class="token code-snippet code" style="color:var(--code-token-keyword)">`'Hello'`</span><span>)
|
|
248
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
249
|
+
</span><span style="display:block;padding:0 1.25rem"><span>Returns </span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span class="token content url" style="font-weight:bold">[</span><span class="token content url" style="font-weight:bold">string</span><span class="token content url" style="font-weight:bold">][</span><span class="token content url" style="font-weight:bold;color:var(--code-token-variable)">1</span><span class="token content url" style="font-weight:bold">]</span><span class="token" style="font-weight:bold;color:var(--code-token-punctuation)">**</span><span> The greeting message.
|
|
250
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
251
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token url-reference url" style="color:var(--code-token-punctuation)">[</span><span class="token url-reference url" style="color:var(--code-token-variable)">1</span><span class="token url-reference url" style="color:var(--code-token-punctuation)">]</span><span class="token url-reference url" style="color:var(--code-token-punctuation)">:</span><span class="token url-reference url"> https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
252
|
+
<h4 id="组件使用" class="mt-8 leading-6 text-lg title_3b154">组件使用<a class="link_3b154 header-anchor" aria-hidden="true" href="#组件使用">#</a></h4>
|
|
253
|
+
<p class="my-4 leading-7">接下来，你便可以在文档里使用我们的内置 API 组件了，将<code>key</code>值传入<code>moduleName</code>属性里</p>
|
|
254
|
+
<div class="language-mdx"><div class="rspress-code-title">Button.mdx</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-mdx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span># Button
|
|
255
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
256
|
+
</span><span style="display:block;padding:0 1.25rem"><span>## </span><span class="token" style="color:var(--code-token-constant)">API</span><span>
|
|
257
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
258
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)"><</span><span class="token class-name" style="color:var(--code-token-function)">API</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">moduleName</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-string-expression)">Button</span><span class="token" style="color:var(--code-token-punctuation)">"</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">/></span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
259
|
+
<h3 id="overview" class="mt-10 mb-2 leading-7 text-xl title_3b154">Overview<a class="link_3b154 header-anchor" aria-hidden="true" href="#overview">#</a></h3>
|
|
260
|
+
<p class="my-4 leading-7">展示模块列表，可以放在首页用来展示所有模块。</p>
|
|
261
|
+
<p class="my-4 leading-7">Overview 组件只有一个 list 属性，接收一个对象数组，下面是对象的属性</p>
|
|
262
|
+
<table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider">
|
|
263
|
+
<thead>
|
|
264
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
265
|
+
<th align="center" class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">属性</th>
|
|
266
|
+
<th align="center" class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th>
|
|
267
|
+
<th align="center" class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">类型</th>
|
|
268
|
+
<th align="center" class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th>
|
|
269
|
+
</tr>
|
|
270
|
+
</thead>
|
|
271
|
+
<tbody>
|
|
272
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
273
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">icon</td>
|
|
274
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">图标</td>
|
|
275
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">React.ReactNode</td>
|
|
276
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
|
|
277
|
+
</tr>
|
|
278
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
279
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">text</td>
|
|
280
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">文本(<strong class="font-semibold">必填</strong>)</td>
|
|
281
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">string</td>
|
|
282
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
|
|
283
|
+
</tr>
|
|
284
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
285
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">link</td>
|
|
286
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">链接(<strong class="font-semibold">必填</strong>)</td>
|
|
287
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">string</td>
|
|
288
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
|
|
289
|
+
</tr>
|
|
290
|
+
<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
|
|
291
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">arrow</td>
|
|
292
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">是否展示箭头</td>
|
|
293
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">boolean</td>
|
|
294
|
+
<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td>
|
|
295
|
+
</tr>
|
|
296
|
+
</tbody>
|
|
297
|
+
</table>
|
|
298
|
+
<h2 id="插件配置" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">插件配置<a class="link_3b154 header-anchor" aria-hidden="true" href="#插件配置">#</a></h2>
|
|
299
|
+
<h3 id="apiparsetool" class="mt-10 mb-2 leading-7 text-xl title_3b154">apiParseTool<a class="link_3b154 header-anchor" aria-hidden="true" href="#apiparsetool">#</a></h3>
|
|
300
|
+
<p class="my-4 leading-7">API 解析工具</p>
|
|
301
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
302
|
+
<li class="[&:not(:first-child)]:mt-2">类型：<code>'react-docgen-typescript' | 'documentation'</code></li>
|
|
303
|
+
<li class="[&:not(:first-child)]:mt-2">默认值：<code>'react-docgen-typescript'</code></li>
|
|
304
|
+
</ul>
|
|
305
|
+
<h3 id="doc" class="mt-10 mb-2 leading-7 text-xl title_3b154">doc<a class="link_3b154 header-anchor" aria-hidden="true" href="#doc">#</a></h3>
|
|
306
|
+
<p class="my-4 leading-7"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/api/index.html" class="link_03735 link_3b154 inline-link_3b154">文档框架配置</a></p>
|
|
307
|
+
<h3 id="entries" class="mt-10 mb-2 leading-7 text-xl title_3b154">entries<a class="link_3b154 header-anchor" aria-hidden="true" href="#entries">#</a></h3>
|
|
308
|
+
<p class="my-4 leading-7">自动生成文档的模块名称及相对路径</p>
|
|
309
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
310
|
+
<li class="[&:not(:first-child)]:mt-2">类型：<code>Entries | ToolEntries</code></li>
|
|
311
|
+
<li class="[&:not(:first-child)]:mt-2">默认值：<code>{}</code></li>
|
|
312
|
+
</ul>
|
|
313
|
+
<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">Entries</span><span> </span><span class="token operator">=</span><span> Record</span><span class="token operator"><</span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> </span><span class="token" style="color:var(--code-token-symbol)">string</span><span class="token operator">></span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
314
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">ToolEntries</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
315
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> documentation</span><span class="token operator">:</span><span> Entries</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
316
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">'react-docgen-typescript'</span><span class="token operator">:</span><span> Entries</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
317
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
318
|
+
<p class="my-4 leading-7">Entries 同时支持针对不同的文件使用不同的解析工具：</p>
|
|
319
|
+
<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/module-tools'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
320
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginDoc </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/plugin-rspress'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
321
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
322
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
323
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
|
|
324
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
325
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginDoc</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
326
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> entries</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
327
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> documentation</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
328
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> Add</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'./src/utils/add.ts'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
329
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
330
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token string-property" style="color:var(--code-token-parameter)">'react-docgen-typescript'</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
331
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> Button</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-string)">'./src/components/button.tsx'</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
332
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
333
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
334
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
335
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
336
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
337
|
+
<h3 id="iframeposition" class="mt-10 mb-2 leading-7 text-xl title_3b154">iframePosition<a class="link_3b154 header-anchor" aria-hidden="true" href="#iframeposition">#</a></h3>
|
|
338
|
+
<p class="my-4 leading-7">iframe 所处页面位置</p>
|
|
339
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
340
|
+
<li class="[&:not(:first-child)]:mt-2">类型：<code>'follow' | 'fixed'</code></li>
|
|
341
|
+
<li class="[&:not(:first-child)]:mt-2">默认值: <code>'follow'</code></li>
|
|
342
|
+
</ul>
|
|
343
|
+
<p class="my-4 leading-7"><code>follow</code>时，每一个代码块都会有一个 iframe 展示其渲染视图。
|
|
344
|
+
<code>fixed</code>时，iframe 将会固定在页面右侧，展示当前页面所有代码块的视图。</p>
|
|
345
|
+
<h3 id="parsetooloptions" class="mt-10 mb-2 leading-7 text-xl title_3b154">parseToolOptions<a class="link_3b154 header-anchor" aria-hidden="true" href="#parsetooloptions">#</a></h3>
|
|
346
|
+
<p class="my-4 leading-7">API 解析工具的参数</p>
|
|
347
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
348
|
+
<li class="[&:not(:first-child)]:mt-2">类型：<code>ParseToolOptions</code></li>
|
|
349
|
+
<li class="[&:not(:first-child)]:mt-2">默认值：<code>{}</code></li>
|
|
350
|
+
</ul>
|
|
351
|
+
<div class="language-ts"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">type</span><span> </span><span class="token class-name">ParseToolOptions</span><span> </span><span class="token operator">=</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
352
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// https://github.com/styleguidist/react-docgen-typescript#options</span><span>
|
|
353
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-string)">'react-docgen-typescript'</span><span class="token operator">?</span><span class="token operator">:</span><span> ParserOptions</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
354
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// https://github.com/documentationjs/documentation/blob/master/docs/NODE_API.md#parameters-1</span><span>
|
|
355
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> documentation</span><span class="token operator">?</span><span class="token operator">:</span><span> DocumentationArgs</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
356
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div>
|
|
357
|
+
<h3 id="previewmode" class="mt-10 mb-2 leading-7 text-xl title_3b154">previewMode<a class="link_3b154 header-anchor" aria-hidden="true" href="#previewmode">#</a></h3>
|
|
358
|
+
<p class="my-4 leading-7">代码块预览方式。</p>
|
|
359
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
360
|
+
<li class="[&:not(:first-child)]:mt-2">类型：<code>'internal' | 'iframe'</code></li>
|
|
361
|
+
<li class="[&:not(:first-child)]:mt-2">默认值: <code>'internal'</code></li>
|
|
362
|
+
</ul>
|
|
363
|
+
<p class="my-4 leading-7"><code>internal</code>时，代码块内容将会直接渲染在页面中，反之将会通过 iframe 加载。</p>
|
|
364
|
+
<h3 id="deprecated-languages" class="mt-10 mb-2 leading-7 text-xl title_3b154">deprecated: languages<a class="link_3b154 header-anchor" aria-hidden="true" href="#deprecated-languages">#</a></h3>
|
|
365
|
+
<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">从 2.44.0 版本开始，请参考 <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/default-theme/i18n.html" class="link_03735 link_3b154 inline-link_3b154">国际化</a> 章节来实现多语言。
|
|
366
|
+
</p></div></div>
|
|
367
|
+
<h3 id="deprecated-usemodulesidebar" class="mt-10 mb-2 leading-7 text-xl title_3b154">deprecated: useModuleSidebar<a class="link_3b154 header-anchor" aria-hidden="true" href="#deprecated-usemodulesidebar">#</a></h3>
|
|
368
|
+
<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">从 2.44.0 版本开始，内部实现了嗅探机制，请直接使用 <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/guide/basic/auto-nav-sidebar.html" class="link_03735 link_3b154 inline-link_3b154">_meta.json</a>
|
|
369
|
+
或者直接配置 <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/zh/api/config/config-theme.html#sidebar" class="link_03735 link_3b154 inline-link_3b154">sidebar</a> 来实现自定义侧边栏。
|
|
370
|
+
</p></div></div>
|
|
371
|
+
<h2 id="命令行" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">命令行<a class="link_3b154 header-anchor" aria-hidden="true" href="#命令行">#</a></h2>
|
|
372
|
+
<ul class="list-disc pl-5 my-4 leading-7">
|
|
373
|
+
<li class="[&:not(:first-child)]:mt-2"><code>modern dev</code>: 启动文档站本地开发。</li>
|
|
374
|
+
<li class="[&:not(:first-child)]:mt-2"><code>modern build --platform</code>: 构建生产环境产物。</li>
|
|
375
|
+
</ul>
|
|
376
|
+
<h2 id="进阶指南" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">进阶指南<a class="link_3b154 header-anchor" aria-hidden="true" href="#进阶指南">#</a></h2>
|
|
377
|
+
<p class="my-4 leading-7">以上已经介绍完了开发模块文档的基本内容，但是这对于开发一个完整的文档站是不够的。查看<a target="_blank" rel="noopener noreferrer" href="https://rspress.dev" class="link_03735 link_3b154 inline-link_3b154">Rspress</a>以深入了解我们的文档框架。
|
|
378
|
+
你可以通过 <code>doc</code> 配置来修改文档框架配置。</p>
|
|
379
|
+
<div class="language-ts"><div class="rspress-code-title">modern.config.ts</div><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-ts" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> defineConfig </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/module-tools'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
380
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span> modulePluginDoc </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span> </span><span class="token" style="color:var(--code-token-keyword)">from</span><span> </span><span class="token" style="color:var(--code-token-string)">'@modern-js/plugin-rspress'</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
|
|
381
|
+
</span></span><span style="display:block;padding:0 1.25rem">
|
|
382
|
+
</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">export</span><span> </span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-function)">defineConfig</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
383
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> plugins</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>
|
|
384
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">moduleTools</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
385
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-function)">modulePluginDoc</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
386
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> doc</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
|
|
387
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">// 自定义文档站点配置</span><span>
|
|
388
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
389
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
390
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">]</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
|
|
391
|
+
</span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span class="token" style="color:var(--code-token-punctuation)">;</span></span></code></pre></div><div class="code-button-group_15153"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_15153"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_15153"><path fill="currentColor" d="M16 7H3V5h13v2M3 19h13v-2H3v2m19-7-4-3v2H3v2h15v2l4-3Z"></path></svg></button><button class="code-copy-button_15153" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_15153"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_15153"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9 13 24z"></path></svg></button></div></div></div><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/zh/guide/basic/use-module-doc.mdx" target="_blank" class="editLink_2a169">Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 cursor-pointer" target="" href="/module-tools/guide/basic/use-micro-generator.html"><span class="desc_9b9a7">上一页</span><span class="title_9b9a7">使用微生成器</span></a></div><div class="next_e7091 flex flex-col"><a class="link_03735 pager-link_9b9a7 next_9b9a7 cursor-pointer" target="" href="/module-tools/guide/basic/using-storybook.html"><span class="desc_9b9a7">下一页</span><span class="title_9b9a7">使用 Storybook</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="<lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#开始之前" title="开始之前" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">开始之前</span></a></li><li><a href="#为什么我们需要为模块搭建一个文档站点" title="为什么我们需要为模块搭建一个文档站点" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">为什么我们需要为模块搭建一个文档站点</span></a></li><li><a href="#前置准备" title="前置准备" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">前置准备</span></a></li><li><a href="#站点基本结构" title="站点基本结构" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">站点基本结构</span></a></li><li><a href="#配置侧边栏" title="配置侧边栏" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">配置侧边栏</span></a></li><li><a href="#编写文档" title="编写文档" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">编写文档</span></a></li><li><a href="#组件预览" title="组件预览" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">组件预览</span></a></li><li><a href="#示例" title="示例" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">示例</span></a></li><li><a href="#移动端预览" title="移动端预览" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">移动端预览</span></a></li><li><a href="#使用外部-demo" title="使用外部 demo" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">使用外部 demo</span></a></li><li><a href="#使用内置组件" title="使用内置组件" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">使用内置组件</span></a></li><li><a href="#api" title="API" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">API</span></a></li><li><a href="#解析文件" title="解析文件" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">解析文件</span></a></li><li><a href="#内容生成" title="内容生成" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">内容生成</span></a></li><li><a href="#组件使用" title="组件使用" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:24px;font-weight:semibold"><span class="aside-link-text block">组件使用</span></a></li><li><a href="#overview" title="Overview" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Overview</span></a></li><li><a href="#插件配置" title="插件配置" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">插件配置</span></a></li><li><a href="#apiparsetool" title="apiParseTool" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">apiParseTool</span></a></li><li><a href="#doc" title="doc" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">doc</span></a></li><li><a href="#entries" title="entries" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">entries</span></a></li><li><a href="#iframeposition" title="iframePosition" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">iframePosition</span></a></li><li><a href="#parsetooloptions" title="parseToolOptions" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">parseToolOptions</span></a></li><li><a href="#previewmode" title="previewMode" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">previewMode</span></a></li><li><a href="#deprecated-languages" title="deprecated: languages" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">deprecated: languages</span></a></li><li><a href="#deprecated-usemodulesidebar" title="deprecated: useModuleSidebar" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">deprecated: useModuleSidebar</span></a></li><li><a href="#命令行" title="命令行" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">命令行</span></a></li><li><a href="#进阶指南" title="进阶指南" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">进阶指南</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
|
|
392
|
+
<div id="search-container"></div>
|
|
393
|
+
</body>
|
|
394
|
+
|
|
395
|
+
</html>
|