mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 07:37:19 +02:00
147 lines
No EOL
21 KiB
HTML
147 lines
No EOL
21 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Add Versions · Docusaurus</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="generator" content="Docusaurus"/><meta name="description" content="With an example site deployed, we can now try out one of the killer features of Docusaurus &mdash; versioned documentation. Versioned documentation helps to show relevant documentation for the current version of a tool and also hide unreleased documentation from users, reducing confusion. Documentation for older versions is also preserved and accessible to users of older versions of a tool even as the latest documentation changes."/><meta name="docsearch:version" content="1.14.6"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Add Versions · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="With an example site deployed, we can now try out one of the killer features of Docusaurus &mdash; versioned documentation. Versioned documentation helps to show relevant documentation for the current version of a tool and also hide unreleased documentation from users, reducing confusion. Documentation for older versions is also preserved and accessible to users of older versions of a tool even as the latest documentation changes."/><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><script src="/js/scrollSpy.js"></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="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/en/versions"><h3>1.14.6</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/en/1.14.6/installation" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/en/1.14.6/tutorial-setup" target="_self">Tutorial</a></li><li class=""><a href="/en/users" target="_self">Users</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_blank">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>English</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/fr/1.14.6/tutorial-version">Français</a></li><li><a href="/docs/ko/1.14.6/tutorial-version">한국어</a></li><li><a href="/docs/pt-BR/1.14.6/tutorial-version">Português (Brasil)</a></li><li><a href="/docs/ro/1.14.6/tutorial-version">Română</a></li><li><a href="/docs/ru/1.14.6/tutorial-version">Русский</a></li><li><a href="/docs/zh-CN/1.14.6/tutorial-version">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">Help Us Translate</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="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/en/1.14.6/tutorial-setup">Setting Up</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.14.6/tutorial-create-new-site">Create a New Site</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.14.6/tutorial-create-pages">Create Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.14.6/tutorial-publish-site">Publish the Site</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/en/1.14.6/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');
|
||
|
||
var headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
var el = event.target;
|
||
while(el !== headings){
|
||
if (el.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
break;
|
||
} else{
|
||
el = el.parentNode;
|
||
}
|
||
}
|
||
}, 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 docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/website-1.x/docs/tutorial-version.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Add Versions</h1></header><article><div><span><p>With an example site deployed, we can now try out one of the killer features of Docusaurus — versioned documentation. Versioned documentation helps to show relevant documentation for the current version of a tool and also hide unreleased documentation from users, reducing confusion. Documentation for older versions is also preserved and accessible to users of older versions of a tool even as the latest documentation changes.</p>
|
||
<p><img alt="Docusaurus process" src="/img/undraw_docusaurus_process.svg" class="docImage"/></p>
|
||
<h2><a class="anchor" aria-hidden="true" id="releasing-a-version"></a><a href="#releasing-a-version" 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>Releasing a Version</h2>
|
||
<p>Assume you are happy with the current state of the documentation and want to freeze it as the v1.0.0 docs. First you <code>cd</code> to the <code>website</code> directory and run the following command.</p>
|
||
<pre><code class="hljs css language-sh">npm run examples versions
|
||
</code></pre>
|
||
<p>That command generates a <code>versions.js</code> file, which will be used to list down all the versions of docs in the project.</p>
|
||
<p>Next, you run a command with the version you want to create, like <code>1.0.0</code>.</p>
|
||
<pre><code class="hljs css language-sh">npm run version 1.0.0
|
||
</code></pre>
|
||
<p>That command preserves a copy of all documents currently in the <code>docs</code> directory and makes them available as documentation for version 1.0.0. The <code>docs</code> directory is copied to the <code>website/versioned_docs/version-1.0.0</code> directory.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="current-version"></a><a href="#current-version" 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>Current Version</h3>
|
||
<p>Type <code>npm start</code> and you will see the version beside the title. Version 1.0.0, the number of your current version, shows at the URL <a href="http://localhost:3000/docusaurus-tutorial/docs/doc1">http://localhost:3000/docusaurus-tutorial/docs/doc1</a>.</p>
|
||
<p>Let's test out how versioning actually works. Open <code>docs/doc1.md</code> and change the first line of the body:</p>
|
||
<pre><code class="hljs css language-diff"><span class="hljs-comment">---</span>
|
||
id: doc1
|
||
title: Latin-ish
|
||
sidebar_label: Example Page
|
||
<span class="hljs-comment">---</span>
|
||
|
||
<span class="hljs-deletion">- Check the [documentation](https://docusaurus.io) for how to use Docusaurus.</span>
|
||
<span class="hljs-addition">+ This is the latest version of the docs.</span>
|
||
|
||
## Lorem
|
||
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies.
|
||
</code></pre>
|
||
<p>If you go to <a href="http://localhost:3000/docusaurus-tutorial/docs/doc1">http://localhost:3000/docusaurus-tutorial/docs/doc1</a> in your browser, realize that it's still showing the line before the change. That's because the version you're looking at is the 1.0.0 version, which has already been frozen in time. The document you changed is part of the next version.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="next-version"></a><a href="#next-version" 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>Next Version</h3>
|
||
<p>The latest version of the documents is viewed by adding <code>next</code> to the URL: <a href="http://localhost:3000/docusaurus-tutorial/docs/next/doc1">http://localhost:3000/docusaurus-tutorial/docs/next/doc1</a>. Now you can see the line change to "This is the latest version of the docs." Note that the version beside the title changes to "next" when you open that URL.</p>
|
||
<p>Click the version to open the versions page, which was created at <a href="http://localhost:3000/docusaurus-tutorial/versions">http://localhost:3000/docusaurus-tutorial/versions</a> with a list of the documentation versions. See that both <code>1.0.0</code> and <code>master</code> are listed there and they link to the respective versions of the documentation.</p>
|
||
<p>The master documents in the <code>docs</code> directory became version next when the <code>website/versioned_docs/version-1.0.0</code> directory was made for version 1.0.0.</p>
|
||
<h3><a class="anchor" aria-hidden="true" id="past-versions"></a><a href="#past-versions" 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>Past Versions</h3>
|
||
<p>Assume the documentation changed and needs an update. You can release another version, like <code>1.0.1</code>.</p>
|
||
<pre><code class="hljs css language-sh">npm run version 1.0.1
|
||
</code></pre>
|
||
<p>Version 1.0.0 remains available as a past version. You can view it by adding <code>1.0.0</code> to the URL, <a href="http://localhost:3000/docusaurus-tutorial/docs/1.0.0/doc1">http://localhost:3000/docusaurus-tutorial/docs/1.0.0/doc1</a>. Also, a link to version 1.0.0 appears on the versions page.</p>
|
||
<p>Go ahead and <a href="https://v1.docusaurus.io/docs/en/next/tutorial-publish-site">publish</a> your versioned site with the <code>publish-gh-pages</code> script!</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="wrap-up"></a><a href="#wrap-up" 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>Wrap Up</h2>
|
||
<p>That's all folks! In this short tutorial, you have experienced how easy it is to create a documentation website from scratch and make versions for them. There are many more things you can do with Docusaurus, such as adding a blog, search and translations. Check out the <a href="https://v1.docusaurus.io/docs/en/next/versioning">Guides</a> section for more.</p>
|
||
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 3/22/2021 by Sébastien Lorber</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/en/1.14.6/tutorial-publish-site"><span class="arrow-prev">← </span><span>Publish the Site</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#releasing-a-version">Releasing a Version</a><ul class="toc-headings"><li><a href="#current-version">Current Version</a></li><li><a href="#next-version">Next Version</a></li><li><a href="#past-versions">Past Versions</a></li></ul></li><li><a href="#wrap-up">Wrap Up</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/en/installation">Getting Started</a><a href="
|
||
/docs/en/versioning">Versioning</a><a href="
|
||
/docs/en/translation">Localization</a><a href="
|
||
/docs/en/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/en/help">Help</a><a href="/en/users">User Showcase</a><a href="/en/about-slash">About</a></div><div class="footerSection"><h5>Legal</h5><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noreferrer noopener">Privacy</a><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noreferrer noopener">Terms</a><a href="https://opensource.facebook.com/legal/data-policy/" target="_blank" rel="noreferrer noopener">Data Policy</a><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noreferrer noopener">Cookie Policy</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 © 2021 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:en","version:1.14.6"]}
|
||
});
|
||
</script></body></html> |