mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-12 00:27:21 +02:00
16 lines
No EOL
8.4 KiB
HTML
16 lines
No EOL
8.4 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Custom Pages · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta property="og:title" content="Custom Pages · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/index.html"/><meta property="og:description" content="## Customizing Your Home Page"/><meta name="robots" content="noindex"/><link rel="shortcut icon" href="/img/favicon.png"/><link rel="stylesheet" href="/css/main.css"/><script async="" defer="" src="https://buttons.github.io/buttons.js"></script></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img src="/img/docusaurus.svg"/><h2>Docusaurus</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/docs/installation.html" target="_self">Docs</a></li><li><a href="/en/help.html" target="_self">Help</a></li><li><a href="https://github.com/facebookexperimental/docusaurus" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html#content">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-preparation.html#content">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-creation.html#content">Creating your site</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/docs/custom-pages.html#content">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/navigation.html#content">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/blog.html#content">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/translation.html#content">Translations</a></li><li class="navListItem"><a class="navItem" href="/docs/search.html#content">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/versioning.html#content">Versioning</a></li></ul></div><div class="navGroup navGroupActive"><h3>API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/commands.html#content">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/api-pages.html#content">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/site-config.html#content">siteConfig.js</a></li><li class="navListItem"><a class="navItem" href="/docs/doc-markdown.html#content">Markdown Features</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-custom-pages.md" target="_blank">Edit this Doc</a><h1>Custom Pages</h1></header><article><div><h2><a class="anchor" name="customizing-your-home-page"></a>Customizing Your Home Page <a class="hash-link" href="#customizing-your-home-page">#</a></h2><p>The easiest way to get started customizing your home page is to use the <a href="/docs/site-creation.html" target="">examples generated previously</a>. You can start your local server and go to <code>http://localhost:3000</code> to see what the example home page looks like. From there, edit the <code>website/pages/en/index.js</code> file and its various components to use the images and text you want for your project.</p><h2><a class="anchor" name="adding-other-custom-pages"></a>Adding Other Custom Pages <a class="hash-link" href="#adding-other-custom-pages">#</a></h2><p>Docusaurus provides some simple example pages (<code>index.js</code>, <code>users.js</code>, <code>help.js</code>), but of course you're also free to write your own pages however you want. It is strongly suggested that you at least have an index page, but none of the pages are mandatory to include. More information on how to use the provided components or include your own can be found <a href="/docs/api-pages.html" target="">here</a>. Information on how to link to your different pages in the header navigation bar can be found <a href="/docs/navigation.html" target="">here</a>.</p><h2><a class="anchor" name="customizing-your-site-footer"></a>Customizing Your Site Footer <a class="hash-link" href="#customizing-your-site-footer">#</a></h2><p>Starting from the example <code>core/Footer.js</code> file you <a href="/docs/site-creation.html" target="">generated before</a>, edit the footer to include any links to pages on your site or elsewhere that you wish to have. </p><p>The example provided has three columns with a footer image on the left and Facebook's open source logo and copyright at the bottom. If your project is not a Facebook open source project, remove the logo and copyright. Otherwise, feel free to get creative with your footer and make it look however you'd like!</p><p>Some suggestions for links you may want to provide: documentation, API, Twitter, Discord, Facebook groups, Stack Overflow, GitHub, etc.</p><p>Your footer will automatically get applied to all pages on your site, including docs and blog posts. The sole exception to this is any static html pages you include.</p><p>If you don't want a footer for your site, change the <code>render</code> function of <code>core/Footer.js</code> to return <code>null</code>. e.g.,</p><pre class="prism language-jsx"><span class="token keyword">const</span> React <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"react"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">Footer</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> Footer<span class="token punctuation">;</span></pre></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="site-creation.html#content">← Previous</a><a class="docs-next button" href="navigation.html#content">Next →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
|
||
/docs/installation.html">Getting Started</a></div><div><h5>Community</h5><a href="/en/users.html">User Showcase</a></div><div><h5>More</h5><a href="https://github.com/facebookexperimental/docusaurus">GitHub</a><a class="github-button" href="https://github.com/facebookexperimental/docusaurus" data-icon="octicon-star" data-count-href="/facebookexperimental/docusaurus/stargazers" data-count-api="/repos/facebookexperimental/docusaurus#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div></body></html> |