npm - @modern-js/module-tools-docs - Versions diffs - 2.59.0 → 2.60.1 - Mend

@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.

Files changed (207) hide show

package/doc_build/en/guide/basic/use-module-doc.html ADDED Viewed

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="generator" content="Rspress v1.31.0">
+  <title data-rh="true">Developing Module documentation - Modern.js Module</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<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>
+<body >
+  <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/en" 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/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a><a class="link_03735  cursor-pointer" target="" href="/module-tools/en/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/en/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">Plugins</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>Changelog</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>Contributing</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="font-medium my-1"><a class="link_03735  cursor-pointer" target="" href="/module-tools/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>简体中文</span></div></div></a></div></div><div><div class="rounded-2xl my-1 flex" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></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/en/guide/intro/welcome.html"><div class="rspress-nav-menu-item singleItem_f6cde  text-sm font-medium mx-1.5 px-3 py-2 flex items-center">Guide</div></a></div><div class="navMenuItem_457e8 w-full"><a class="link_03735  cursor-pointer" target="" href="/module-tools/en/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/en/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">Plugins</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>Changelog</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>Contributing</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="py-1 font-medium"><a class="link_03735  cursor-pointer" target="" href="/module-tools/guide/basic/use-module-doc.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1 text-center"><span class="text-brand">English</span></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">ON THIS PAGE</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/en" 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">Introduction</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/en/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>Welcome to Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Why you need Modern.js Module</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Quick Start</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">Basic Guide</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/en/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>Before you start</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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 Commands</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Modify the output</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Using the Microgenerator</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Developing Module documentation</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Using Storybook</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Versioning and Publishing</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">Advanced Guide</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/en/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>In-depth understanding of build</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>In-depth understanding of the dev command</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Use the Copy Tools</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Handle third-party dependencies</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Build umd artifacts</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Handle static assets</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">Best practices</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/en/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>Developing Components</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Using 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">FAQ</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/en/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>General Questions</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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>Build FAQ</span></div></a></div><div><a class="link_03735 menuLink_71eca cursor-pointer" target="" href="/module-tools/en/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 FAQ</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="developing-module-documentation" class="text-3xl mb-10 leading-10 tracking-tight title_3b154">Developing Module documentation<a class="link_3b154 header-anchor" aria-hidden="true" href="#developing-module-documentation">#</a></h1>
+<p class="my-4 leading-7">This chapter describes how to quickly build a static documentation site for a module project.</p>
+<h2 id="before-we-start" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Before we start<a class="link_3b154 header-anchor" aria-hidden="true" href="#before-we-start">#</a></h2>
+<h3 id="why-we-need-to-build-a-documentation-site-for-a-module" class="mt-10 mb-2 leading-7 text-xl title_3b154">Why we need to build a documentation site for a module<a class="link_3b154 header-anchor" aria-hidden="true" href="#why-we-need-to-build-a-documentation-site-for-a-module">#</a></h3>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">a documentation site can help us to better organize the structure of the documentation.</li>
+<li class="[&amp;:not(:first-child)]:mt-2">the documentation site has better presentation, such as the ability to execute functions in the page, render components.</li>
+<li class="[&amp;:not(:first-child)]:mt-2">to make better use of AI search capabilities.</li>
+</ol>
+<h3 id="preliminary-preparation" class="mt-10 mb-2 leading-7 text-xl title_3b154">Preliminary preparation<a class="link_3b154 header-anchor" aria-hidden="true" href="#preliminary-preparation">#</a></h3>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Enable the documentation feature via <a class="link_03735  link_3b154 inline-link_3b154 cursor-pointer" target="" href="/module-tools/en/guide/basic/use-micro-generator.html">micro-generator</a>.</li>
+<li class="[&amp;:not(:first-child)]:mt-2">Read <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/start/introduction.html" class="link_03735  link_3b154 inline-link_3b154">Introduction to Rspress</a>.</li>
+</ol>
+<p class="my-4 leading-7">After finishing the preparation work, we will build a documentation site for the module project based on Rspress.</p>
+<h2 id="basic-site-structure" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Basic site structure<a class="link_3b154 header-anchor" aria-hidden="true" href="#basic-site-structure">#</a></h2>
+<p class="my-4 leading-7">The overall layout of the site consists of three parts: the navigation bar, the sidebar and the body part, which also includes the TOC (Table of contents found at the beginning of a book or document).</p>
+<p class="my-4 leading-7">The Rspress uses <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/basic/conventional-route.html" class="link_03735  link_3b154 inline-link_3b154">File System Routing</a>, on which the module documentation is based, to automate the generation of the sidebar.
+For example, if you have the following file structure:</p>
+<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
+</span></span><span style="display:block;padding:0 1.25rem">├── foo
+</span><span style="display:block;padding:0 1.25rem">│ └── bar.md
+</span><span style="display:block;padding:0 1.25rem">│ └── index.md
+</span><span style="display:block;padding:0 1.25rem">└── foo.md
+</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>
+<p class="my-4 leading-7">Then the routing path for <code>foo/bar.md</code> will be <code>/foo/bar</code>, the routing path for <code>foo.md</code> will be <code>/foo</code>, and the routing path for <code>index.md</code> will be <code>/</code>.</p>
+<p class="my-4 leading-7">The specific mapping rules are as follows:</p>
+<table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider">
+<thead>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">file-path</th>
+<th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">routing-path</th>
+</tr>
+</thead>
+<tbody>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>index.md</code></td>
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/</code></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo.md</code></td>
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo</code></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/index.md</code></td>
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/</code></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/bar.md</code></td>
+<td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>/foo/bar</code></td>
+</tr>
+</tbody>
+</table>
+<p class="my-4 leading-7">The sidebars corresponding in turn to the above file paths and routing paths are shown below:</p>
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rpauheh7nulwbm/edenx-module/docs-blog/autosidebar.png"/>
+<h3 id="configure-sidebar" class="mt-10 mb-2 leading-7 text-xl title_3b154">Configure sidebar<a class="link_3b154 header-anchor" aria-hidden="true" href="#configure-sidebar">#</a></h3>
+<p class="my-4 leading-7">As shown in the figure above, the module documentation has automatically generated sidebars for file system routing, where the text of each column of the sidebar is determined by the file&#x27;s first level title or directory name.
+If you need to customize the sidebar, please use <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/basic/auto-nav-sidebar.html" class="link_03735  link_3b154 inline-link_3b154">_meta.json</a> or configure <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/api/config/config-theme.html#sidebar" class="link_03735  link_3b154 inline-link_3b154">sidebar</a> directly.</p>
+<div class="rspress-directive info"><div class="rspress-directive-title">INFO</div><div class="rspress-directive-content"><p class="my-4 leading-7">If your document directory structure complies with internationalization, for example:</p>
+<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
+</span></span><span style="display:block;padding:0 1.25rem">├── en
+</span><span style="display:block;padding:0 1.25rem">│   ├── button.mdx
+</span><span style="display:block;padding:0 1.25rem">│   ├── index.mdx
+</span><span style="display:block;padding:0 1.25rem">└── zh
+</span><span style="display:block;padding:0 1.25rem">    ├── button.mdx
+</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>
+<p class="my-4 leading-7">You need to follow <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/default-theme/i18n.html" class="link_03735  link_3b154 inline-link_3b154">internationalization</a> guide and configure <code>lang</code> 和 <code>locales</code>,
+otherwise, the automatically generated sidebar of the module will not handle the <code>zh</code> and <code>en</code> directories.
+</p></div></div>
+<h2 id="writing-documentation" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Writing Documentation<a class="link_3b154 header-anchor" aria-hidden="true" href="#writing-documentation">#</a></h2>
+<p class="my-4 leading-7">Next, we can focus on writing the content of the document. In addition to the basic Markdown syntax, you may also need to understand the following advanced topics:</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/basic/use-mdx.html" class="link_03735  link_3b154 inline-link_3b154">Using MDX</a></li>
+<li class="[&amp;:not(:first-child)]:mt-2"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/basic/static-assets.html" class="link_03735  link_3b154 inline-link_3b154">Using Assets</a></li>
+</ul>
+<h2 id="component-preview" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Component preview<a class="link_3b154 header-anchor" aria-hidden="true" href="#component-preview">#</a></h2>
+<p class="my-4 leading-7">Module documentation provides preview capabilities for component libraries. The contents in code blocks written in jsx and tsx will be parsed as React components.</p>
+<h3 id="example" class="mt-10 mb-2 leading-7 text-xl title_3b154">Example<a class="link_3b154 header-anchor" aria-hidden="true" href="#example">#</a></h3>
+<p class="my-4 leading-7">Here is a complete example using the component preview feature:</p>
+<p class="my-4 leading-7">Assuming our project name is <code>demo</code> and we export a Button component.</p>
+<ol class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Add a new <code>docs/Button.mdx</code> file:</li>
+</ol>
+<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
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem">## Basic Usage
+</span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span>Buttons come </span><span class="token" style="color:var(--code-token-keyword)">in</span><span> four sizes</span><span class="token operator">:</span><span> small</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> medium</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> large
+</span></span><span style="display:block;padding:0 1.25rem">
+</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
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">import React from &#x27;react&#x27;;
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">import { Button } from &#x27;demo&#x27;;
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">export default () =&gt; {
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">  return &lt;Button size=&quot;large&quot;&gt;Click Me&lt;/Button&gt;;
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">};
+</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>
+<ol start="2" class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">In the <code>tsconfig.json</code>, configure aliases and point the package name to the current project directory, make the way document developers and users use components consistent:</li>
+</ol>
+<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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-parameter)">&quot;compilerOptions&quot;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-parameter)">&quot;paths&quot;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-parameter)">&quot;demo&quot;</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)">&quot;.&quot;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</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>
+<ol start="3" class="list-decimal pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">In the <code>.gitignore</code>, add <code>doc_build/</code>:</li>
+</ol>
+<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>
+<p class="my-4 leading-7">Congratulations, you have finished writing a component document, execute <code>pnpm run dev</code> to see the result, remember to build the component library first to make sure the component product exists.</p>
+<h3 id="mobile-preview" class="mt-10 mb-2 leading-7 text-xl title_3b154">Mobile Preview<a class="link_3b154 header-anchor" aria-hidden="true" href="#mobile-preview">#</a></h3>
+<p class="my-4 leading-7">Also, we support mobile preview mode, i.e. rendering mobile components using iframe, and set iframe position by <code>iframePosition</code>,
+support swipe preview and new page opening.</p>
+<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)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>
+</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)">&#x27;@modern-js/plugin-rspress&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+</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>
+</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>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-comment)">/**
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token">       * Select the preview method
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token">       * @default internal
+</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">       */</span><span>
+</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)">&#x27;iframe&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-comment)">/**
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token">       * Select iframe position
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token">       * @default &#x27;follow&#x27;
+</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">       */</span><span>
+</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)">&#x27;fixed&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</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>
+</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>
+</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 class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p class="my-4 leading-7">If you only want to change the way a particular <code>jsx</code> and <code>tsx</code> block is previewed, you can use a different modifier to identify it:</p>
+<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
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// The content here will not be rendered
+</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>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// Used to render components in documentation
+</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>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-string)" class="token template-string">// Used to render components in iframe
+</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>
+</div></div>
+<h3 id="using-external-demos" class="mt-10 mb-2 leading-7 text-xl title_3b154">Using external demos<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-external-demos">#</a></h3>
+<p class="my-4 leading-7">If our demo is very complex, then it is recommended to write the demo separately and then use the <code>code</code> tag in the mdx:</p>
+<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)">&lt;</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)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">/path/demo.tsx</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</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>
+<p class="my-4 leading-7">This also supports setting the preview method for each individual code block, for example:</p>
+<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)">&lt;</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)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">/path/demo.tsx</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</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)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">iframe</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token" style="color:var(--code-token-function)">code</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</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>
+<h2 id="using-built-in-components" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Using built-in components<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-built-in-components">#</a></h2>
+<p class="my-4 leading-7">The plugin implements some built-in components internally so that you can develop module documentation more easily.</p>
+<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>
+<p class="my-4 leading-7">Display the API content of the module.</p>
+<h4 id="parse-file" class="mt-8 leading-6 text-lg title_3b154">Parse file<a class="link_3b154 header-anchor" aria-hidden="true" href="#parse-file">#</a></h4>
+<p class="my-4 leading-7">Before we can use the API component, we first need to specify the files to parse:</p>
+<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)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</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)">&#x27;@modern-js/plugin-rspress&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+</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>
+</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>
+</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>
+</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>
+</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)">&#x27;./src/button.tsx&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</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>
+</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)">&#x27;react-docgen-typescript&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</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>
+</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>
+</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>
+<h4 id="content-generation" class="mt-8 leading-6 text-lg title_3b154">Content generation<a class="link_3b154 header-anchor" aria-hidden="true" href="#content-generation">#</a></h4>
+<p class="my-4 leading-7">Next, we&#x27;ll see what kind of markdown content is generated based on the parsed file.</p>
+<p class="my-4 leading-7">Content can be generated with two different tools, <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> or <a target="_blank" rel="noopener noreferrer" href="https://github.com/documentationjs/documentation" class="link_03735  link_3b154 inline-link_3b154">documentation</a>:</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><code>react-docgen-typescript</code> is targeted at component library scenarios and will only parse props to generate tables.</li>
+</ul>
+<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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-comment)">/**
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token">   * Whether to disable the button
+</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">   */</span><span>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-comment)">/* * Whether to disable the button */</span><span> disabled</span><span class="token operator">?</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>   </span><span class="token operator">*</span><span> Type </span><span class="token" style="color:var(--code-token-keyword)">of</span><span> Button
+</span></span><span style="display:block;padding:0 1.25rem"><span>   </span><span class="token operator">*</span><span> @</span><span class="token" style="color:var(--code-token-keyword)">default</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;default&#x27;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>   </span><span class="token operator">*</span><span class="token operator">/</span><span>
+</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)">&#x27;mini&#x27;</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;small&#x27;</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;default&#x27;</span><span> </span><span class="token operator">|</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;large&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</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>
+</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">=&gt;</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>
+<p class="my-4 leading-7">The above is a standard writeup where <code>ButtonProps</code> will be extracted into the table and <code>Button</code> will be the title of the table.
+If you use the default export, the filename will be used as the form title.</p>
+<p class="my-4 leading-7">Notice that export features declared elsewhere are not available.</p>
+<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">=&gt;</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><span style="display:block;padding:0 1.25rem">
+</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>
+</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>
+</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">=&gt;</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>
+</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">=&gt;</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>
+<p class="my-4 leading-7">The generated content is as follows:</p>
+<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
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token operator">|</span><span> property </span><span class="token operator">|</span><span>          description          </span><span class="token operator">|</span><span>                   type                   </span><span class="token operator">|</span><span>   </span><span class="token" style="color:var(--code-token-keyword)">default</span><span>   </span><span class="token operator">|</span><span>
+</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> </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>
+</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>
+</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)">&quot;mini&quot; \|&quot;small&quot; \|&quot;default&quot; \|&quot;large&quot;</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)">&#x27;default&#x27;</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>
+<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">If React types are used in Props, you need to add the types in tsconfig.json, otherwise the types will not be resolved under the React namespace.</p>
+<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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-parameter)">&quot;compilerOptions&quot;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>    </span><span class="token" style="color:var(--code-token-parameter)">&quot;types&quot;</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)">&quot;react&quot;</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</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>
+<p class="my-4 leading-7">The best way is that you import the type directly:</p>
+<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)">&#x27;react&#x27;</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>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><code>documentation</code> is used in tool library scenarios to parse JSDoc annotations.</li>
+</ul>
+<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)">/**
+</span></span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * Greet function that returns a greeting message.
+</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.
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @param {string} [greeting=&#x27;Hello&#x27;] - The greeting to use.
+</span><span style="display:block;padding:0 1.25rem;color:var(--code-token-comment)" class="token"> * @returns {string} The greeting message.
+</span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)"> */</span><span>
+</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)">&#x27;Hello&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</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>
+</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>
+<p class="my-4 leading-7">The above is a greet function with a JSDoc annotation. The generated content is as follows:</p>
+<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-punctuation)">&lt;</span><span class="token" style="color:var(--code-token-function)">!</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">--</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">Generated</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">by</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">documentation.js.</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">Update</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">this</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">documentation</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">by</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">updating</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">the</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">source</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">code.</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">--</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem">Greet function that returns a greeting message.
+</span><span style="display:block;padding:0 1.25rem">
+</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>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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.
+</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)">`&#x27;Hello&#x27;`</span><span>)
+</span></span><span style="display:block;padding:0 1.25rem">
+</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.
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+<h4 id="using-the-component" class="mt-8 leading-6 text-lg title_3b154">Using the component<a class="link_3b154 header-anchor" aria-hidden="true" href="#using-the-component">#</a></h4>
+<p class="my-4 leading-7">Next, you can use our built-in API components in your documentation by passing the <code>key</code> value into the <code>moduleName</code> property。</p>
+<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
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span>## </span><span class="token" style="color:var(--code-token-constant)">API</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">&lt;</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)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">Button</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">/&gt;</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>
+<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>
+<p class="my-4 leading-7">Displays a list of modules that can be placed on the front page to display all modules.</p>
+<p class="my-4 leading-7">The Overview component has only one list property, which receives an array of objects, and the following properties of the objects</p>
+<table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider">
+<thead>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<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">property</th>
+<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">description</th>
+<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">type</th>
+<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">default</th>
+</tr>
+</thead>
+<tbody>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">icon</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">icon</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">React.ReactNode</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">text</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">text(<strong class="font-semibold">required</strong>)</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">string</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">link</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">link(<strong class="font-semibold">required</strong>)</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">string</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"></td>
+</tr>
+<tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider">
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">arrow</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">whether to show arrows</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">boolean</td>
+<td align="center" class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>false</code></td>
+</tr>
+</tbody>
+</table>
+<h2 id="plugin-options" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Plugin options<a class="link_3b154 header-anchor" aria-hidden="true" href="#plugin-options">#</a></h2>
+<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>
+<p class="my-4 leading-7">API parse tool.</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Type:<code>&#x27;react-docgen-typescript&#x27; | &#x27;documentation&#x27;</code></li>
+<li class="[&amp;:not(:first-child)]:mt-2">Default: <code>&#x27;react-docgen-typescript&#x27;</code></li>
+</ul>
+<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>
+<p class="my-4 leading-7"><a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/api/index.html" class="link_03735  link_3b154 inline-link_3b154">Config</a>.</p>
+<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>
+<p class="my-4 leading-7">Module names and relative paths for automatically generated documents.</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Type:<code>Entries | ToolEntries</code></li>
+<li class="[&amp;:not(:first-child)]:mt-2">Default: <code>{}</code></li>
+</ul>
+<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">&lt;</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">&gt;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</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>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;react-docgen-typescript&#x27;</span><span class="token operator">:</span><span> Entries</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</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>
+<p class="my-4 leading-7">It also supports the use of different parsing tools for different files:</p>
+<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)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</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)">&#x27;@modern-js/plugin-rspress&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+</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>
+</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>
+</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>
+</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>
+</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>
+</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)">&#x27;./src/utils/add.ts&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token string-property" style="color:var(--code-token-parameter)">&#x27;react-docgen-typescript&#x27;</span><span class="token operator">:</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
+</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)">&#x27;./src/components/button.tsx&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span>
+</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>
+</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>
+</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>
+</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>
+</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>
+<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>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">类型：<code>&#x27;follow&#x27; | &#x27;fixed&#x27;</code></li>
+<li class="[&amp;:not(:first-child)]:mt-2">默认值: <code>&#x27;follow&#x27;</code></li>
+</ul>
+<p class="my-4 leading-7">When the value is <code>follow</code>, each code block will have an iframe showing its rendered view.
+When <code>fixed</code>, the iframe will be fixed to the right side of the page, showing the view of all the code blocks on the current page.</p>
+<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>
+<p class="my-4 leading-7">API parse tool options.</p>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Type:<code>ParseToolOptions</code></li>
+<li class="[&amp;:not(:first-child)]:mt-2">Default: <code>{}</code></li>
+</ul>
+<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>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>  </span><span class="token" style="color:var(--code-token-string)">&#x27;react-docgen-typescript&#x27;</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>
+</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>
+</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>
+</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>
+<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>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">Type:<code>&#x27;iframe&#x27; | &#x27;internal&#x27;</code></li>
+<li class="[&amp;:not(:first-child)]:mt-2">Default: <code>&#x27;internal&#x27;</code></li>
+</ul>
+<p class="my-4 leading-7">In case of <code>internal</code>, the component will be rendered directly in the page, otherwise it will be loaded through an iframe.</p>
+<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>
+<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">Starting from version 2.44.0, please refer to the <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/default-theme/i18n.html" class="link_03735  link_3b154 inline-link_3b154">Internationalization</a> section to implement multiple languages.
+</p></div></div>
+<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>
+<div class="rspress-directive warning"><div class="rspress-directive-title">WARNING</div><div class="rspress-directive-content"><p class="my-4 leading-7">Starting from version 2.44.0, a sniffing mechanism has been implemented internally, so please directly use <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/guide/basic/auto-nav-sidebar.html" class="link_03735  link_3b154 inline-link_3b154">_meta.json</a>
+or directly configure <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev/api/config/config-theme.html#sidebar" class="link_03735  link_3b154 inline-link_3b154">sidebar</a> to implement a custom sidebar.
+</p></div></div>
+<h2 id="scripts" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Scripts<a class="link_3b154 header-anchor" aria-hidden="true" href="#scripts">#</a></h2>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2"><code>modern dev</code>: Start dev server for doc site.</li>
+<li class="[&amp;:not(:first-child)]:mt-2"><code>modern build --platform</code>: Build doc site in production, by default output directories is <code>doc_build</code>.</li>
+</ul>
+<h2 id="advanced-guide" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_3b154">Advanced guide<a class="link_3b154 header-anchor" aria-hidden="true" href="#advanced-guide">#</a></h2>
+<p class="my-4 leading-7">The above has covered the basics of developing module documentation, but this is not enough for developing a complete documentation station. Check out the <a target="_blank" rel="noopener noreferrer" href="https://rspress.dev" class="link_03735  link_3b154 inline-link_3b154">Rspress</a> for an in-depth look at our documentation framework.
+You can modify the documentation framework configuration via the <code>doc</code> configuration.</p>
+<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)">&#x27;@modern-js/module-tools&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>
+</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)">&#x27;@modern-js/plugin-rspress&#x27;</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span>
+</span></span><span style="display:block;padding:0 1.25rem">
+</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>
+</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>
+</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>
+</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>
+</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>
+</span></span><span style="display:block;padding:0 1.25rem"><span>        </span><span class="token" style="color:var(--code-token-comment)">// Customize the documentation site configuration</span><span>
+</span></span><span style="display:block;padding:0 1.25rem"><span>      </span><span class="token" style="color:var(--code-token-punctuation)">}</span><span>
+</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>
+</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>
+</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/en/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/en/guide/basic/use-micro-generator.html"><span class="desc_9b9a7">Previous Page</span><span class="title_9b9a7">Using the Microgenerator</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/en/guide/basic/using-storybook.html"><span class="desc_9b9a7">Next page</span><span class="title_9b9a7">Using Storybook</span></a></div></div></footer></div></div></div><div class="aside-container_edeb4"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#before-we-start" title="Before we start" 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">Before we start</span></a></li><li><a href="#why-we-need-to-build-a-documentation-site-for-a-module" title="Why we need to build a documentation site for a module" 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">Why we need to build a documentation site for a module</span></a></li><li><a href="#preliminary-preparation" title="Preliminary preparation" 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">Preliminary preparation</span></a></li><li><a href="#basic-site-structure" title="Basic site structure" 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">Basic site structure</span></a></li><li><a href="#configure-sidebar" title="Configure sidebar" 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">Configure sidebar</span></a></li><li><a href="#writing-documentation" title="Writing Documentation" 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">Writing Documentation</span></a></li><li><a href="#component-preview" title="Component preview" 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">Component preview</span></a></li><li><a href="#example" title="Example" 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">Example</span></a></li><li><a href="#mobile-preview" title="Mobile Preview" 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">Mobile Preview</span></a></li><li><a href="#using-external-demos" title="Using external demos" 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">Using external demos</span></a></li><li><a href="#using-built-in-components" title="Using built-in components" 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">Using built-in components</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="#parse-file" title="Parse file" 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">Parse file</span></a></li><li><a href="#content-generation" title="Content generation" 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">Content generation</span></a></li><li><a href="#using-the-component" title="Using the component" 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">Using the component</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="#plugin-options" title="Plugin options" 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">Plugin options</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="#scripts" title="Scripts" 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">Scripts</span></a></li><li><a href="#advanced-guide" title="Advanced guide" 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">Advanced guide</span></a></li></ul></nav></div></div></div></div></div></div></div></section></div></div>
+  <div id="search-container"></div>
+</body>
+</html>