docusaurus/docs/zh-CN/tutorial-create-pages.html
Website Deployment Script 8f1a6fbd6c Deploy website
Deploy website version based on be149e182f
2019-05-17 03:04:53 +00:00

168 lines
No EOL
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="zh-CN"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Create Pages · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="&lt;p&gt;In this section we will learn about creating two new types of pages in Docusaurus, a regular page and a documentation page.&lt;/p&gt;
"/><meta name="docsearch:version" content="1.9.0"/><meta name="docsearch:language" content="zh-CN"/><meta property="og:title" content="Create Pages · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="&lt;p&gt;In this section we will learn about creating two new types of pages in Docusaurus, a regular page and a documentation page.&lt;/p&gt;
"/><meta property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44373548-31', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/zh-CN"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/zh-CN/versions"><h3>1.9.0</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/zh-CN/installation" target="_self">文档</a></li><li class=""><a href="/docs/en/next/tutorial-setup" target="_self">Tutorial</a></li><li class=""><a href="/zh-CN/users" target="_self">用户</a></li><li class=""><a href="/blog/" target="_self">博客</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_self">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>简体中文</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/tutorial-create-pages">English</a></li><li><a href="/docs/es-ES/tutorial-create-pages">Español</a></li><li><a href="/docs/ro/tutorial-create-pages">Română</a></li><li><a href="/docs/tr/tutorial-create-pages">Türkçe</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">帮助我们翻译</a></li></ul></div></li><script>
const languagesMenuItem = document.getElementById("languages-menu");
const languagesDropDown = document.getElementById("languages-dropdown");
languagesMenuItem.addEventListener("click", function(event) {
event.preventDefault();
if (languagesDropDown.className == "hide") {
languagesDropDown.className = "visible";
} else {
languagesDropDown.className = "hide";
}
});
</script></span><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></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"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i></i><span>Tutorial</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Tutorial<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/zh-CN/tutorial-setup">Setting Up</a></li><li class="navListItem"><a class="navItem" href="/docs/zh-CN/tutorial-create-new-site">Create a New Site</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/zh-CN/tutorial-create-pages">Create Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/zh-CN/tutorial-publish-site">Publish the Site</a></li><li class="navListItem"><a class="navItem" href="/docs/zh-CN/tutorial-version">Add Versions</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://crowdin.com/project/docusaurus/zh-CN" target="_blank" rel="noreferrer noopener">Translate</a><h1 class="postHeaderTitle">Create Pages</h1></header><article><div><span><p>In this section we will learn about creating two new types of pages in Docusaurus, a regular page and a documentation page.</p>
<p><img alt="Docusaurus MacBook" src="/img/undraw_docusaurus_tree.svg" class="docImage" /></p>
<h2><a class="anchor" aria-hidden="true" id="creating-a-regular-page"></a><a href="#creating-a-regular-page" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating a Regular Page</h2>
<ol>
<li><p>Go into the <code>pages/en</code> directory and create a file called <code>hello-world.js</code> with the following contents:</p>
<p>const React = require('react');</p>
<p>const CompLibrary = require('../../core/CompLibrary.js');</p>
<p>const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;</p>
<p>function HelloWorld(props) {
return (
<div className="docMainWrapper wrapper">
<Container className="mainContainer documentContainer postContainer">
<h1>Hello World!</h1>
<p>This is my first page!</p>
</Container>
</div>
);
}</p>
<p>module.exports = HelloWorld;</p></li>
</ol>
<ol start="2">
<li>Go to <a href="http://localhost:3000/hello-world">http://localhost:3000/hello-world</a> and you should be able to see the new page.</li>
<li>Change the text within the <code>&lt;p&gt;...&lt;/p&gt;</code> to &quot;I'm at F8!&quot;. The browser should refresh automatically to reflect the changes.</li>
</ol>
<pre><code class="hljs css language-diff"><span class="hljs-deletion">- &lt;p&gt;This is my first page!&lt;/p&gt;</span>
<span class="hljs-addition">+ &lt;p&gt;I'm at F8!&lt;/p&gt;</span>
</code></pre>
<p>React is being used as a templating engine for rendering static markup. You can leverage on the expressability of React to build rich web content. Learn more about creating pages <a href="custom-pages">here</a>.</p>
<p><img alt="Docusaurus React" src="/img/undraw_docusaurus_react.svg" class="docImage" /></p>
<h2><a class="anchor" aria-hidden="true" id="create-a-documentation-page"></a><a href="#create-a-documentation-page" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Create a Documentation Page</h2>
<ol>
<li><p>Create a new file in the <code>docs</code> folder called <code>f8.md</code>.</p></li>
<li><p>Paste the following contents:</p>
<hr>
<p>id: f8
title: Hello F8</p>
<hr>
<p>Hello F8! I'm at the Docusaurus classroom session!</p>
<h2><a class="anchor" aria-hidden="true" id="using-docusaurus-to-create-open-source-websites"></a><a href="#using-docusaurus-to-create-open-source-websites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Docusaurus to Create Open Source Websites</h2>
<p>In this session, we learned how Docusaurus makes it really simple to create a website for open source project documentation and get hands on by creating a Docusaurus website.</p></li>
</ol>
<ol start="3">
<li>Go to <code>sidebars.json</code> and add <code>&quot;f8&quot;</code> after <code>&quot;doc1&quot;</code>. This ID should be the same one as in the Markdown file above.</li>
</ol>
<pre><code class="hljs css language-diff">{
"docs": {
"Docusaurus": [
"doc1",
<span class="hljs-addition">+ "f8"</span>
],
"First Category": ["doc2"],
"Second Category": ["doc3"]
},
"docs-other": {
"First Category": ["doc4", "doc5"]
}
}
</code></pre>
<ol start="4">
<li>Kill your web server (<kbd>Cmd</kbd> + <kbd>C</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>) and restart it (with <code>npm run start</code>) because a server restart is needed for sidebar changes.</li>
<li>Navigate to <a href="http://localhost:3000/docs/f8">http://localhost:3000/docs/f8</a>.</li>
</ol>
<p>You've created your first documentation page on Docusaurus! The <code>sidebars.json</code> is where you specify the order of your documentation pages and in the front matter of the Markdown file is where you provide metadata about that page.</p>
<p>Learn more about creating docs pages <a href="navigation">here</a>.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/zh-CN/tutorial-create-new-site"><span class="arrow-prev"></span><span>Create a New Site</span></a><a class="docs-next button" href="/docs/zh-CN/tutorial-publish-site"><span>Publish the Site</span><span class="arrow-next"></span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#creating-a-regular-page">Creating a Regular Page</a></li><li><a href="#create-a-documentation-page">Create a Documentation Page</a></li><li><a href="#using-docusaurus-to-create-open-source-websites">Using Docusaurus to Create Open Source Websites</a></li></ul></nav></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 class="footerSection"><h5>Docs</h5><a href="
/docs/zh-CN/installation">Getting Started</a><a href="
/docs/zh-CN/versioning">Versioning</a><a href="
/docs/zh-CN/translation">Localization</a><a href="
/docs/zh-CN/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/zh-CN/help">Help</a><a href="/zh-CN/users">User Showcase</a><a href="/zh-CN/about-slash">About</a></div><div class="footerSection"><h5>Social</h5><div class="social"><a class="github-button" href="https://github.com/facebook/Docusaurus" data-count-href="https://github.com/facebook/Docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Docusaurus</a></div><div class="social"><a href="https://twitter.com/docusaurus" class="twitter-follow-button">Follow @docusaurus</a></div><div class="social"><div class="fb-like" data-href="https://docusaurus.io" data-colorscheme="dark" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></section><a href="https://opensource.facebook.com/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright"><span>Copyright © 2019 Facebook Inc.</span> Landing images by <a href="https://undraw.co/">unDraw</a>.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'199138890728411',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
indexName: 'docusaurus',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["language:zh-CN","version:1.9.0"]}
});
</script></body></html>