docusaurus/docs/ru/custom-pages.html
Website Deployment Script 46da6fa313 Deploy website
Deploy website version based on 984e2d4598
2020-06-30 01:22:37 +00:00

155 lines
No EOL
26 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="ru"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Custom Pages · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Вы можете добавить страницы на свой сайт, которые не являются частью стандартной документации или блога в формате markdown. Вы можете это сделать, добавив `.js` файлы в каталог `website/pages`. Эти файлы представляют собой компоненты [React](https://reactjs.org/), создаваемые с помощью метода `render()`, в котором указываются CSS классы и прочее."/><meta name="docsearch:version" content="1.14.4"/><meta name="docsearch:language" content="ru"/><meta property="og:title" content="Custom Pages · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/"/><meta property="og:description" content="Вы можете добавить страницы на свой сайт, которые не являются частью стандартной документации или блога в формате markdown. Вы можете это сделать, добавив `.js` файлы в каталог `website/pages`. Эти файлы представляют собой компоненты [React](https://reactjs.org/), создаваемые с помощью метода `render()`, в котором указываются CSS классы и прочее."/><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="/ru"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/ru/versions"><h3>1.14.4</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/ru/installation" target="_self">Документация</a></li><li class=""><a href="/docs/ru/tutorial-setup" target="_self">Руководство</a></li><li class=""><a href="/ru/users" target="_self">Пользователи</a></li><li class=""><a href="/blog/" target="_self">Блог</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"/>Русский</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/en/custom-pages">English</a></li><li><a href="/docs/fr/custom-pages">Français</a></li><li><a href="/docs/ko/custom-pages">한국어</a></li><li><a href="/docs/pt-BR/custom-pages">Português (Brasil)</a></li><li><a href="/docs/ro/custom-pages">Română</a></li><li><a href="/docs/zh-CN/custom-pages">简体中文</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="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>Руководство</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Начало работы<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/ru/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/site-preparation">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/site-creation">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/publishing">Publishing your site</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/docker">Docker</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Руководство<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/ru/adding-blog">Adding a Blog</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/ru/custom-pages">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/search">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/navigation">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/translation">Translations &amp; Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/versioning">Versioning</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">API<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/ru/commands">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/doc-markdown">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/api-pages">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/ru/site-config">siteConfig.js</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://crowdin.com/project/docusaurus/ru" target="_blank" rel="noreferrer noopener">Translate</a><h1 id="__docusaurus" class="postHeaderTitle">Custom Pages</h1></header><article><div><span><p>Вы можете добавить страницы на свой сайт, которые не являются частью стандартной документации или блога в формате markdown. Вы можете это сделать, добавив <code>.js</code> файлы в каталог <code>website/pages</code>. Эти файлы представляют собой компоненты <a href="https://reactjs.org/">React</a>, создаваемые с помощью метода <code>render()</code>, в котором указываются CSS классы и прочее.</p>
<h2><a class="anchor" aria-hidden="true" id="настройка-домашней-страницы"></a><a href="#настройка-домашней-страницы" 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>Настройка домашней страницы</h2>
<p>Простейший способ начать настройку домашней страницы - использовать образец сайта, который <a href="/docs/ru/site-creation">создастся</a> при запуске <a href="/docs/ru/installation">сценария инициализации Docusaurus</a>.</p>
<p>Вы можете <a href="/docs/ru/site-preparation#verifying-installation">запустить</a> свой локальный сервер и перейти по адресу <code>http://localhost:3000</code>, чтобы посмотреть, как выглядит образец домашней страницы. Затем измените файл <code>website/pages/en/index.js</code> и его компоненты, чтобы в дальнейшем использовать необходимые вам изображения и текст в вашем проекте.</p>
<h2><a class="anchor" aria-hidden="true" id="добавление-других-пользовательских-страниц"></a><a href="#добавление-других-пользовательских-страниц" 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>Добавление других пользовательских страниц</h2>
<p>Docusaurus provides some helpful example pages in the <code>website/pages/en</code> directory, including <code>index.js</code>, <code>users.js</code>, and <code>help.js</code>. Это хорошие примеры того, как создать пользовательскую страницу в Docusaurus.</p>
<pre><code class="hljs css language-bash">root-directory
├── docs
└── website
├── blog
├── core
│ └── Footer.js
├── package.json
├── pages
│ └── en
│ ├── help.js
│ ├── index.js
│ └── users.js
├── sidebars.json
├── siteConfig.js
└── static
</code></pre>
<p>You are also free to write your own pages. Настоятельно рекомендуется создать хотя бы главную, однако ни одна из представленных видов страниц не обязательна для добавления на сайт. Больше информации о том, как использовать представленные компоненты или включить свой собственный, вы можете найти <a href="/docs/ru/api-pages">здесь</a>. Информация о том, как создать ссылки на свои страницы в навигационном меню, может быть найдена <a href="/docs/ru/navigation">здесь</a>.</p>
<blockquote>
<p>Для того, чтобы ссылка на вашу страницу отобразилась в навигационном меню, вам необходимо изменить <code>siteConfig.js</code>, добавив в него элемент <code>headerLinks</code>. , например <code>{ page: 'about-slash', label: 'About/' }</code>,</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="добавление-статических-страниц"></a><a href="#добавление-статических-страниц" 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>Добавление статических страниц</h2>
<p>Также могут быть использованы статические <code>.html</code> файлы, но они не будут содержать шапку Docusaurus, футер или стили по-умолчанию. Эти файлы могут быть добавлены в каталог <code>static</code> так же, как и другие <a href="/docs/ru/api-pages#using-static-assets">статистические ресурсы</a>. Кроме того, они могут быть размещены в каталоге <code>pages</code> и будут включены &quot;как есть&quot; вместо обработки и отрисовки через React.</p>
<p>Если вы желаете использовать стили Docusaurus, вы можете получить доступ к ним по адресу <code>${baseUrl}css/main.css</code>. If you wish to use separate CSS for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the <code>siteConfig.separateCss</code> field in <code>siteConfig.js</code>.</p>
<blockquote>
<p>Вы можете указать <a href="/docs/ru/site-config#optional-fields">параметр конфигурации сайта <code>$wrapPagesHTML</code></a>, чтобы дополнить сырые фрагменты HTML стилями сайта Docusaurus, шапкой и футером.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="настройка-футера-вашего-сайта"></a><a href="#настройка-футера-вашего-сайта" 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>Настройка футера вашего сайта</h2>
<p>Начиная с примера файла <code>core/Footer.js</code>, <a href="/docs/ru/site-creation">созданного</a> при выполнении <a href="/docs/ru/installation">сценария инициализации Docusaurus</a>, измените футер, чтобы добавить какие-либо ссылки на страницы вашего сайта или других сайтов, на которые вы желаете указать.</p>
<p>В приведенном примере имеются три столбца с иконкой-значком слева, логотипом открытого исходного кода Facebook и ссылкой на авторские права снизу. Если ваш проект не является проектом Facebook с открытым исходным кодом, удалите логотип и ссылку на авторские права. В противном случае, не стесняйтесь эксперементировать с вашим футером и придать ему любой вид, какой только пожелаете!</p>
<p>Вот несколько предложений для ссылок, которые вы можете добавить: документация, API, Twitter, Discord, группы Facebook, Stack Overflow, GitHub и другое.</p>
<p>Ваш футер будет автоматически добавлен ко всем страницам на вашем сайте, включая документацию и сообщения блога. Единственным исключением являются любые статические HTML-страницы, которые вы подключаете.</p>
<p>Если вам на вашем сайте не нужен футер, изменить метод <code>render</code> в файле <code>core/Footer.js</code>, чтобы он возвращал <code>null</code>. Например:</p>
<pre><code class="hljs css 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>
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/ru/adding-blog"><span class="arrow-prev"></span><span>Добавление блога</span></a><a class="docs-next button" href="/docs/ru/search"><span>Включение поиска</span><span class="arrow-next"></span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#настройка-домашней-страницы">Настройка домашней страницы</a></li><li><a href="#добавление-других-пользовательских-страниц">Добавление других пользовательских страниц</a></li><li><a href="#добавление-статических-страниц">Добавление статических страниц</a></li><li><a href="#настройка-футера-вашего-сайта">Настройка футера вашего сайта</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/ru/installation">Getting Started</a><a href="
/docs/ru/versioning">Versioning</a><a href="
/docs/ru/translation">Localization</a><a href="
/docs/ru/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/ru/help">Help</a><a href="/ru/users">User Showcase</a><a href="/ru/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></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 © 2020 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:ru","version:1.14.4"]}
});
</script></body></html>