mirror of
https://github.com/facebook/docusaurus.git
synced 2025-12-31 23:54:25 +00:00
138 lines
166 KiB
HTML
138 lines
166 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/plugin-methods/lifecycle-apis" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.2.1">
|
||
<title data-rh="true">Lifecycle APIs | Docusaurus</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://docusaurus.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="fr"><meta data-rh="true" property="og:locale:alternate" content="pt_BR"><meta data-rh="true" property="og:locale:alternate" content="ko"><meta data-rh="true" property="og:locale:alternate" content="zh_CN"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Lifecycle APIs | Docusaurus"><meta data-rh="true" name="description" content="During the build, plugins are loaded in parallel to fetch their own contents and render them to routes. Plugins may also configure webpack or post-process the generated files."><meta data-rh="true" property="og:description" content="During the build, plugins are loaded in parallel to fetch their own contents and render them to routes. Plugins may also configure webpack or post-process the generated files."><link data-rh="true" rel="icon" href="/img/docusaurus.ico"><link data-rh="true" rel="canonical" href="https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis" hreflang="en"><link data-rh="true" rel="alternate" href="https://docusaurus.io/fr/docs/api/plugin-methods/lifecycle-apis" hreflang="fr"><link data-rh="true" rel="alternate" href="https://docusaurus.io/pt-BR/docs/api/plugin-methods/lifecycle-apis" hreflang="pt-BR"><link data-rh="true" rel="alternate" href="https://docusaurus.io/ko/docs/api/plugin-methods/lifecycle-apis" hreflang="ko"><link data-rh="true" rel="alternate" href="https://docusaurus.io/zh-CN/docs/api/plugin-methods/lifecycle-apis" hreflang="zh-CN"><link data-rh="true" rel="alternate" href="https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://X1Z85QJPUV-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/blog/feed.json" title="Docusaurus JSON Feed">
|
||
|
||
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E5CR2Q1NRE"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-E5CR2Q1NRE",{})</script>
|
||
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" title="Docusaurus" href="/opensearch.xml">
|
||
<link rel="alternate" type="application/rss+xml" href="/changelog/rss.xml" title="Docusaurus changelog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/changelog/atom.xml" title="Docusaurus changelog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/changelog/feed.json" title="Docusaurus changelog JSON Feed">
|
||
|
||
|
||
|
||
<link rel="icon" href="/img/docusaurus.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="rgb(37, 194, 160)">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#000">
|
||
<link rel="apple-touch-icon" href="/img/docusaurus.png">
|
||
<link rel="mask-icon" href="/img/docusaurus.png" color="rgb(62, 204, 94)">
|
||
<meta name="msapplication-TileImage" content="/img/docusaurus.png">
|
||
<meta name="msapplication-TileColor" content="#000">
|
||
|
||
|
||
|
||
<link rel="alternate" type="application/rss+xml" href="/tests/blog/rss.xml" title="Docusaurus Tests Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/tests/blog/atom.xml" title="Docusaurus Tests Blog Atom Feed">
|
||
<link rel="alternate" type="application/json" href="/tests/blog/feed.json" title="Docusaurus Tests Blog JSON Feed">
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/katex/katex.min.css"><link rel="stylesheet" href="/assets/css/styles.76313542.css">
|
||
<script src="/assets/js/runtime~main.e1b4125a.js" defer="defer"></script>
|
||
<script src="/assets/js/main.5c3bbcf1.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_UHvc" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_cTOO" role="banner"><div class="announcementBarPlaceholder_Lqfg"></div><div class="content_ttnW announcementBarContent_PjqA">🎉️ <b><a target="_blank" href="https://docusaurus.io/blog/releases/3.2">Docusaurus v3.2</a> is out!</b> 🥳️</div><button type="button" aria-label="Close" class="clean-btn close closeButton_nmpN announcementBarClose_UFLi"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_uAgx"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"></div><b class="navbar__title text--truncate">Docusaurus</b></a><a class="navbar__item navbar__link" href="/docs">Docs</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/cli">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/community/support">Community</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs">Canary 🚧</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/api/plugin-methods/lifecycle-apis">Canary 🚧</a></li><li><hr class="dropdown-separator"></li><li class="dropdown-archived-versions"><b>Archived versions</b></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.3.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.3.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.2.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.2.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.1.0" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.1.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://docusaurus-archive-october-2023.netlify.app/docs/2.0.1" target="_blank" rel="noopener noreferrer" class="dropdown__link">2.0.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://v1.docusaurus.io" target="_blank" rel="noopener noreferrer" class="dropdown__link">1.x.x<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><hr class="dropdown-separator"></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_tqOs"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/docs/api/plugin-methods/lifecycle-apis" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/fr/docs/api/plugin-methods/lifecycle-apis" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="fr">Français</a></li><li><a href="/pt-BR/docs/api/plugin-methods/lifecycle-apis" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="pt-BR">Português (Brasil)</a></li><li><a href="/ko/docs/api/plugin-methods/lifecycle-apis" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ko">한국어</a></li><li><a href="/zh-CN/docs/api/plugin-methods/lifecycle-apis" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="zh-CN">中文（中国）</a></li><li><hr style="margin: 0.3rem 0;"></li><li><a href="https://github.com/facebook/docusaurus/issues/3526" target="_blank" rel="noopener noreferrer" class="dropdown__link">Help Us Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="toggle_bT41 colorModeToggle_UolE"><button class="clean-btn toggleButton_x9TT toggleButtonDisabled_Dj8q" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_dnYY"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_OBbf"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_dDCC"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_PEsc"><div class="docsWrapper_lLmf"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_PuQw" type="button"></button><div class="docRoot_kBZ6"><aside class="theme-doc-sidebar-container docSidebarContainer_S51O"><div class="sidebarViewport_K3q9"><div class="sidebar_vtcw sidebarWithHideableNavbar_tZ9s"><a tabindex="-1" class="sidebarLogo_UK0N" href="/"><img src="/img/docusaurus.svg" alt="" class="themedComponent_bJGS themedComponent--light_LEkC" height="32" width="32"><img src="/img/docusaurus_keytar.svg" alt="" class="themedComponent_bJGS themedComponent--dark_jnGk" height="32" width="32"><b>Docusaurus</b></a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_rWGR menuWithAnnouncementBar_Pf08"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/cli">CLI</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/docusaurus-core">Client API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/api/docusaurus-config">docusaurus.config.js</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/docs/api/plugin-methods">Plugin method references</a><button aria-label="Collapse sidebar category 'Plugin method references'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/api/plugin-methods/lifecycle-apis">Lifecycle APIs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api/plugin-methods/extend-infrastructure">Extending infrastructure</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api/plugin-methods/i18n-lifecycles">I18n lifecycles</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api/plugin-methods/static-methods">Static methods</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/api/plugins">Plugins</a><button aria-label="Expand sidebar category 'Plugins'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/docs/api/themes">Themes</a><button aria-label="Expand sidebar category 'Themes'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/api/misc/create-docusaurus">Miscellaneous</a></div></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PUyN"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_DI0B"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_EfwR"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_n6xZ"><div class="docItemContainer_RhpI"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Wvrh" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_uaSn"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/docs/api/plugin-methods"><span itemprop="name">Plugin method references</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Lifecycle APIs</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_BEWm theme-doc-toc-mobile tocMobile_NSfz"><button type="button" class="clean-btn tocCollapsibleButton_IbtT">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Lifecycle APIs</h1>
|
||
<p>During the build, plugins are loaded in parallel to fetch their own contents and render them to routes. Plugins may also configure webpack or post-process the generated files.</p>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="loadContent"><code>async loadContent()</code><a href="#loadContent" class="hash-link" aria-label="Direct link to loadContent" title="Direct link to loadContent"></a></h2>
|
||
<p>Plugins should use this lifecycle to fetch from data sources (filesystem, remote API, headless CMS, etc.) or do some server processing. The return value is the content it needs.</p>
|
||
<p>For example, this plugin below returns a random integer between 1 and 10 as content.</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">loadContent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">1</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">+</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:#116329">Math</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">floor</span><span class="token punctuation" style="color:#393A34">(</span><span class="token known-class-name class-name" style="color:#116329">Math</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">random</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">*</span><span class="token plain"> </span><span class="token number" style="color:#005CC5">10</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="contentLoaded"><code>async contentLoaded({content, actions})</code><a href="#contentLoaded" class="hash-link" aria-label="Direct link to contentLoaded" title="Direct link to contentLoaded"></a></h2>
|
||
<p>The data that was loaded in <code>loadContent</code> will be consumed in <code>contentLoaded</code>. It can be rendered to routes, registered as global data, etc.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="content"><code>content</code><a href="#content" class="hash-link" aria-label="Direct link to content" title="Direct link to content"></a></h3>
|
||
<p><code>contentLoaded</code> will be called <em>after</em> <code>loadContent</code> is done. The return value of <code>loadContent()</code> will be passed to <code>contentLoaded</code> as <code>content</code>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="actions"><code>actions</code><a href="#actions" class="hash-link" aria-label="Direct link to actions" title="Direct link to actions"></a></h3>
|
||
<p><code>actions</code> contain three functions:</p>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="addRoute"><code>addRoute(config: RouteConfig): void</code><a href="#addRoute" class="hash-link" aria-label="Direct link to addRoute" title="Direct link to addRoute"></a></h4>
|
||
<p>Create a route to add to the website.</p>
|
||
<div class="language-ts codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-ts codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">RouteConfig</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * With leading slash. Trailing slash will be normalized by config.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> path</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Component used to render this route, a path that the bundler can `require`.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> component</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Props. Each entry should be `[propName]: pathToPropModule` (created with</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * `createData`)</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> modules</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> RouteModules</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * The route context will wrap the `component`. Use `useRouteContext` to</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * retrieve what's declared here. Note that all custom route context declared</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * here will be namespaced under </span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment keyword" style="color:#CF222E;font-style:italic">@link</span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> RouteContext.data</span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">}</span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> context</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> RouteModules</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Nested routes config, useful for "layout routes" having subroutes.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> routes</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> RouteConfig</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * React router config option: `exact` routes would not match subroutes.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> exact</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * React router config option: `strict` routes are sensitive to the presence</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * of a trailing slash.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> strict</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Used to sort routes.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Higher-priority routes will be matched first.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> priority</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Optional route metadata</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> metadata</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> RouteMetadata</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Extra props; will be available on the client side.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">propName</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">]</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">unknown</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Plugin authors can assign extra metadata to the created routes</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * It is only available on the Node.js side, and not sent to the browser</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Optional: plugin authors are encouraged but not required to provide it</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Some plugins might use this data to provide additional features.</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * This is the case of the sitemap plugin to provide support for "lastmod".</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * See also: https://github.com/facebook/docusaurus/pull/9954</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">RouteMetadata</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * The source code file path that led to the creation of the current route</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * In official content plugins, this is usually a Markdown or React file</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * This path is expected to be relative to the site directory</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> sourceFilePath</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * The last updated date of this route</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * This is generally read from the Git history of the sourceFilePath</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * but can also be provided through other means (usually front matter)</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> *</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * This has notably been introduced for adding "lastmod" support to the</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * sitemap plugin, see https://github.com/facebook/docusaurus/pull/9954</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> lastUpdatedAt</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">number</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">RouteModules</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">module</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">]</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> Module </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> RouteModules </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> RouteModules</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Module</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> path</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> __import</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> query</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> ParsedUrlQueryInput</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="createData"><code>createData(name: string, data: any): Promise<string></code><a href="#createData" class="hash-link" aria-label="Direct link to createData" title="Direct link to createData"></a></h4>
|
||
<p>A declarative callback to create static data (generally JSON or string) which can later be provided to your routes as props. Takes the file name and data to be stored, and returns the actual data file's path.</p>
|
||
<p>For example, this plugin below creates a <code>/friends</code> page which displays <code>Your friends are: Yangshun, Sebastien</code>:</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">website/src/components/Friends.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">FriendsComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter" style="color:#953800">friends</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Your friends are </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">friends</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">','</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-friends-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">friendsPlugin</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-friends-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">contentLoaded</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter" style="color:#953800">content</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> actions</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">createData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> addRoute</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> actions</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Create friends.json</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> friends </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#C6105F">'Yangshun'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'Sebastien'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> friendsJsonPath </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">createData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#C6105F">'friends.json'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token known-class-name class-name" style="color:#116329">JSON</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">stringify</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">friends</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Add the '/friends' routes, and ensure it receives the friends props</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">addRoute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">path</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'/friends'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">component</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@site/src/components/Friends.js'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">modules</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// propName -> JSON file path</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">friends</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> friendsJsonPath</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">exact</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token boolean" style="color:#005CC5">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h4 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="setGlobalData"><code>setGlobalData(data: any): void</code><a href="#setGlobalData" class="hash-link" aria-label="Direct link to setGlobalData" title="Direct link to setGlobalData"></a></h4>
|
||
<p>This function permits one to create some global plugin data that can be read from any page, including the pages created by other plugins, and your theme layout.</p>
|
||
<p>This data becomes accessible to your client-side/theme code through the <a href="/docs/docusaurus-core#useGlobalData"><code>useGlobalData</code></a> and <a href="/docs/docusaurus-core#usePluginData"><code>usePluginData</code></a> hooks.</p>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_Knsx"><p>Global data is... global: its size affects the loading time of all pages of your site, so try to keep it small. Prefer <code>createData</code> and page-specific data whenever possible.</p></div></div>
|
||
<p>For example, this plugin below creates a <code>/friends</code> page which displays <code>Your friends are: Yangshun, Sebastien</code>:</p>
|
||
<div class="language-jsx codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">website/src/components/Friends.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-jsx codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'react'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports">usePluginData</span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">from</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@docusaurus/useGlobalData'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:#8250DF">FriendsComponent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">friends</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">usePluginData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'docusaurus-friends-plugin'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain-text">Your friends are </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">friends</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">','</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#22863A">div</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-friends-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">friendsPlugin</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-friends-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">contentLoaded</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter" style="color:#953800">content</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> actions</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">setGlobalData</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> addRoute</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> actions</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Create friends global data</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">setGlobalData</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">friends</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#C6105F">'Yangshun'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'Sebastien'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Add the '/friends' routes</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">addRoute</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">path</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'/friends'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">component</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'@site/src/components/Friends.js'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">exact</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token boolean" style="color:#005CC5">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="configureWebpack"><code>configureWebpack(config, isServer, utils, content)</code><a href="#configureWebpack" class="hash-link" aria-label="Direct link to configureWebpack" title="Direct link to configureWebpack"></a></h2>
|
||
<p>Modifies the internal webpack config. If the return value is a JavaScript object, it will be merged into the final config using <a href="https://github.com/survivejs/webpack-merge" target="_blank" rel="noopener noreferrer"><code>webpack-merge</code></a>. If it is a function, it will be called and receive <code>config</code> as the first argument and an <code>isServer</code> flag as the second argument.</p>
|
||
<div class="theme-admonition theme-admonition-warning admonition_o5H7 alert alert--warning"><div class="admonitionHeading_FzoX"><span class="admonitionIcon_rXq6"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_Knsx"><p>The API of <code>configureWebpack</code> will be modified in the future to accept an object (<code>configureWebpack({config, isServer, utils, content})</code>)</p></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="config"><code>config</code><a href="#config" class="hash-link" aria-label="Direct link to config" title="Direct link to config"></a></h3>
|
||
<p><code>configureWebpack</code> is called with <code>config</code> generated according to client/server build. You may treat this as the base config to be merged with.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="isServer"><code>isServer</code><a href="#isServer" class="hash-link" aria-label="Direct link to isServer" title="Direct link to isServer"></a></h3>
|
||
<p><code>configureWebpack</code> will be called both in server build and in client build. The server build receives <code>true</code> and the client build receives <code>false</code> as <code>isServer</code>.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="utils"><code>utils</code><a href="#utils" class="hash-link" aria-label="Direct link to utils" title="Direct link to utils"></a></h3>
|
||
<p><code>configureWebpack</code> also receives an util object:</p>
|
||
<ul>
|
||
<li><code>getStyleLoaders(isServer: boolean, cssOptions: {[key: string]: any}): Loader[]</code></li>
|
||
<li><code>getJSLoader(isServer: boolean, cacheOptions?: {}): Loader | null</code></li>
|
||
</ul>
|
||
<p>You may use them to return your webpack configuration conditionally.</p>
|
||
<p>For example, this plugin below modify the webpack config to transpile <code>.foo</code> files.</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'custom-docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">configureWebpack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">config</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> isServer</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> utils</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">getJSLoader</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> utils</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">module</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">rules</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">test</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token regex regex-source language-regex special-escape escape" style="color:#36acaa">\.</span><span class="token regex regex-source language-regex" style="color:#36acaa">foo</span><span class="token regex regex-source language-regex anchor function" style="color:#8250DF">$</span><span class="token regex regex-delimiter" style="color:#36acaa">/</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">use</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#8250DF">getJSLoader</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">isServer</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'my-custom-webpack-loader'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="content-1"><code>content</code><a href="#content-1" class="hash-link" aria-label="Direct link to content-1" title="Direct link to content-1"></a></h3>
|
||
<p><code>configureWebpack</code> will be called both with the content loaded by the plugin.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="merge-strategy">Merge strategy<a href="#merge-strategy" class="hash-link" aria-label="Direct link to Merge strategy" title="Direct link to Merge strategy"></a></h3>
|
||
<p>We merge the Webpack configuration parts of plugins into the global Webpack config using <a href="https://github.com/survivejs/webpack-merge" target="_blank" rel="noopener noreferrer">webpack-merge</a>.</p>
|
||
<p>It is possible to specify the merge strategy. For example, if you want a webpack rule to be prepended instead of appended:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'custom-docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">configureWebpack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">config</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> isServer</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> utils</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">mergeStrategy</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token string-property property" style="color:#005CC5">'module.rules'</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'prepend'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">module</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">rules</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">myRuleToPrepend</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Read the <a href="https://github.com/survivejs/webpack-merge#merging-with-strategies" target="_blank" rel="noopener noreferrer">webpack-merge strategy doc</a> for more details.</p>
|
||
<h3 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="configuring-dev-server">Configuring dev server<a href="#configuring-dev-server" class="hash-link" aria-label="Direct link to Configuring dev server" title="Direct link to Configuring dev server"></a></h3>
|
||
<p>The dev server can be configured through returning a <code>devServer</code> field.</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'custom-docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">configureWebpack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">config</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> isServer</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> utils</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">devServer</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">open</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'/docs'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Opens localhost:3000/docs instead of localhost:3000/</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="configurePostCss"><code>configurePostCss(options)</code><a href="#configurePostCss" class="hash-link" aria-label="Direct link to configurePostCss" title="Direct link to configurePostCss"></a></h2>
|
||
<p>Modifies <a href="https://webpack.js.org/loaders/postcss-loader/#postcssoptions" target="_blank" rel="noopener noreferrer"><code>postcssOptions</code> of <code>postcss-loader</code></a> during the generation of the client bundle.</p>
|
||
<p>Should return the mutated <code>postcssOptions</code>.</p>
|
||
<p>By default, <code>postcssOptions</code> looks like this:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> postcssOptions </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">ident</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'postcss'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">plugins</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'autoprefixer'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Example:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">configurePostCss</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">postcssOptions</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Appends new PostCSS plugin.</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> postcssOptions</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">plugins</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">push</span><span class="token punctuation" style="color:#393A34">(</span><span class="token function" style="color:#8250DF">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#C6105F">'postcss-import'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> postcssOptions</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="postBuild"><code>postBuild(props)</code><a href="#postBuild" class="hash-link" aria-label="Direct link to postBuild" title="Direct link to postBuild"></a></h2>
|
||
<p>Called when a (production) build finishes.</p>
|
||
<div class="language-ts codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-ts codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">Props</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> siteDir</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> generatedFilesDir</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> siteConfig</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> DocusaurusConfig</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> outDir</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> baseUrl</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> headTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> preBodyTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> postBodyTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> routesPaths</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> plugins</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> Plugin</span><span class="token operator" style="color:#D73A49"><</span><span class="token builtin">any</span><span class="token operator" style="color:#D73A49">></span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> content</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> Content</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Example:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">postBuild</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter" style="color:#953800">siteConfig </span><span class="token parameter operator" style="color:#D73A49">=</span><span class="token parameter" style="color:#953800"> </span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> routesPaths </span><span class="token parameter operator" style="color:#D73A49">=</span><span class="token parameter" style="color:#953800"> </span><span class="token parameter punctuation" style="color:#393A34">[</span><span class="token parameter punctuation" style="color:#393A34">]</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> outDir</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#6B6B6B;font-style:italic">// Print out to console all the rendered routes.</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> routesPaths</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">map</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">route</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name" style="color:#116329">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#8250DF">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">route</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="injectHtmlTags"><code>injectHtmlTags({content})</code><a href="#injectHtmlTags" class="hash-link" aria-label="Direct link to injectHtmlTags" title="Direct link to injectHtmlTags"></a></h2>
|
||
<p>Inject head and/or body HTML tags to Docusaurus generated HTML.</p>
|
||
<p><code>injectHtmlTags</code> will be called both with the content loaded by the plugin.</p>
|
||
<div class="language-ts codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-ts codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">injectHtmlTags</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> headTags</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> HtmlTags</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> preBodyTags</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> HtmlTags</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> postBodyTags</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> HtmlTags</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">HtmlTags</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> HtmlTagObject </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> HtmlTagObject</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#CF222E">type</span><span class="token plain"> </span><span class="token class-name" style="color:#116329">HtmlTagObject</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * Attributes of the HTML tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * E.g. `</span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">'disabled': true, 'value': 'demo', 'rel': 'preconnect'</span><span class="token doc-comment comment punctuation" style="color:#393A34;font-style:italic">}</span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">`</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> attributes</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">attributeName</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">]</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">|</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * The tag name e.g. `div`, `script`, `link`, `meta`</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> tagName</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> * The inner HTML</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#6B6B6B;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> innerHTML</span><span class="token operator" style="color:#D73A49">?</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Example:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">docusaurus-plugin/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'docusaurus-plugin'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#8250DF">loadContent</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#D73A49">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token literal-property property" style="color:#005CC5">remoteHeadTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">await</span><span class="token plain"> </span><span class="token function" style="color:#8250DF">fetchHeadTagsFromAPI</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">injectHtmlTags</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter" style="color:#953800">content</span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">headTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">tagName</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'link'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">attributes</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">rel</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'preconnect'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">href</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'https://www.github.com'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token spread operator" style="color:#D73A49">...</span><span class="token plain">content</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">remoteHeadTags</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">preBodyTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">tagName</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'script'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">attributes</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">charset</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'utf-8'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">src</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'/noflash.js'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">postBodyTags</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token template-string string" style="color:#C6105F"><div> This is post body </div></span><span class="token template-string template-punctuation string" style="color:#C6105F">`</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
|
||
<p>Tags will be added as follows:</p>
|
||
<ul>
|
||
<li><code>headTags</code> will be inserted before the closing <code></head></code> tag after scripts added by config.</li>
|
||
<li><code>preBodyTags</code> will be inserted after the opening <code><body></code> tag before any child elements.</li>
|
||
<li><code>postBodyTags</code> will be inserted before the closing <code></body></code> tag after all child elements.</li>
|
||
</ul>
|
||
<h2 class="anchor anchorWithHideOnScrollNavbar_SSbb" id="getClientModules"><code>getClientModules()</code><a href="#getClientModules" class="hash-link" aria-label="Direct link to getClientModules" title="Direct link to getClientModules"></a></h2>
|
||
<p>Returns an array of paths to the <a href="/docs/advanced/client#client-modules">client modules</a> that are to be imported into the client bundle.</p>
|
||
<p>As an example, to make your theme load a <code>customCss</code> or <code>customJs</code> file path from <code>options</code> passed in by the user:</p>
|
||
<div class="language-js codeBlockContainer_jDV4 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_bdru">my-theme/src/index.js</div><div class="codeBlockContent_vx7S"><pre tabindex="0" class="prism-code language-js codeBlock_Gebt thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_FJaf"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#CF222E">export</span><span class="token plain"> </span><span class="token keyword module" style="color:#CF222E">default</span><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter" style="color:#953800">context</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter" style="color:#953800"> options</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#CF222E">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">customCss</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> customJs</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#D73A49">=</span><span class="token plain"> options </span><span class="token operator" style="color:#D73A49">||</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#005CC5">name</span><span class="token operator" style="color:#D73A49">:</span><span class="token plain"> </span><span class="token string" style="color:#C6105F">'name-of-my-theme'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#8250DF">getClientModules</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#CF222E">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">customCss</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> customJs</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><div class="buttonGroup_cUGO"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_OqsO" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_PgCn"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_bsQG"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugin-methods/lifecycle-apis.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_IMw_" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_OHCJ"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2024-03-20T10:47:44.000Z" itemprop="dateModified">Mar 20, 2024</time></b> by <b>Sébastien Lorber</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/api/plugin-methods"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Plugin Method References</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/api/plugin-methods/extend-infrastructure"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Extending infrastructure</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_RLlU thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#loadContent" class="table-of-contents__link toc-highlight"><code>async loadContent()</code></a></li><li><a href="#contentLoaded" class="table-of-contents__link toc-highlight"><code>async contentLoaded({content, actions})</code></a><ul><li><a href="#content" class="table-of-contents__link toc-highlight"><code>content</code></a></li><li><a href="#actions" class="table-of-contents__link toc-highlight"><code>actions</code></a><ul><li><a href="#addRoute" class="table-of-contents__link toc-highlight"><code>addRoute(config: RouteConfig): void</code></a></li><li><a href="#createData" class="table-of-contents__link toc-highlight"><code>createData(name: string, data: any): Promise<string></code></a></li><li><a href="#setGlobalData" class="table-of-contents__link toc-highlight"><code>setGlobalData(data: any): void</code></a></li></ul></li></ul></li><li><a href="#configureWebpack" class="table-of-contents__link toc-highlight"><code>configureWebpack(config, isServer, utils, content)</code></a><ul><li><a href="#config" class="table-of-contents__link toc-highlight"><code>config</code></a></li><li><a href="#isServer" class="table-of-contents__link toc-highlight"><code>isServer</code></a></li><li><a href="#utils" class="table-of-contents__link toc-highlight"><code>utils</code></a></li><li><a href="#content-1" class="table-of-contents__link toc-highlight"><code>content</code></a></li><li><a href="#merge-strategy" class="table-of-contents__link toc-highlight">Merge strategy</a></li><li><a href="#configuring-dev-server" class="table-of-contents__link toc-highlight">Configuring dev server</a></li></ul></li><li><a href="#configurePostCss" class="table-of-contents__link toc-highlight"><code>configurePostCss(options)</code></a></li><li><a href="#postBuild" class="table-of-contents__link toc-highlight"><code>postBuild(props)</code></a></li><li><a href="#injectHtmlTags" class="table-of-contents__link toc-highlight"><code>injectHtmlTags({content})</code></a></li><li><a href="#getClientModules" class="table-of-contents__link toc-highlight"><code>getClientModules()</code></a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migration">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/feature-requests">Feature Requests</a></li><li class="footer__item"><a href="https://discordapp.com/invite/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/community/support">Help</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" href="/changelog">Changelog</a></li><li class="footer__item"><a href="https://github.com/facebook/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item">
|
||
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
|
||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51">
|
||
</a>
|
||
</li><li class="footer__item">
|
||
<a href="https://argos-ci.com" target="_blank" rel="noreferrer noopener" aria-label="Covered by Argos">
|
||
<img src="https://argos-ci.com/badge.svg" alt="Covered by Argos" width="133" height="20">
|
||
</a>
|
||
</li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cookie Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_Rdzz"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.fb.com" rel="noopener noreferrer" class="footerLogoLink_CiM_"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--light_LEkC"><img src="/img/meta_opensource_logo_negative.svg" alt="Meta Open Source Logo" class="footer__logo themedComponent_bJGS themedComponent--dark_jnGk"></a></div><div class="footer__copyright">Copyright © 2024 Meta Platforms, Inc. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |