{"id":216,"date":"2019-08-23T10:42:40","dateGmt":"2019-08-23T07:42:40","guid":{"rendered":"http://wordpress.loc/?p=216"},"modified":"2019-08-23T20:40:14","modifiedGmt":"2019-08-23T17:40:14","slug":"%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5","status":"publish","type":"post","link":"http://wordpress.loc/?p=216","title":"Использование","excerpt":"<p>Здесь мы постараемся объяснить как работает warjs. Для объяснения, в качестве наглядного примера, этот сайт сделан на warjs v0.2.12. Описание элементов сайта, которых вы могли не заметить Главная страница помимо главного материала, содержит список постов помещенных в карточки со стрелками и цифрами для перехода к разным частям списка постов. В этом списке содержатся все посты [&hellip;]</p>\n","excerptProtected":false,"content":"\n<p>Здесь мы постараемся объяснить как работает warjs.</p>\n\n\n\n<p>Для объяснения, в качестве наглядного примера, этот сайт сделан на warjs v0.2.12.</p>\n\n\n\n<details title=\"Спойлер\"><summary>Описание элементов сайта, которых вы могли не заметить</summary>\n Главная страница помимо главного материала, содержит\n список постов помещенных в карточки со стрелками и\n цифрами для перехода к разным частям списка постов. \n В этом списке содержатся все посты созданые вами.\n У сайта есть интерактивная шапка с ссылкой на главную страницу, которая \n содержит материал, помеченный в Вордпресс как Главная страница. \n А также шапка содержит иконку меню, в составе которого, содержатся \n страницы созданые в CMS. Меню расставлено в соответствии с соблюдением \n иерархии родителей и детей. В настоящий момент, поддерживается трех \n уровневая вложенность страниц.\n Под шапкой слева расположено меню категорий, которое располагает \n категории в соответствии с иерархией, которые допускают неограниченную \n вложенность.\n В центре, в самом верху, навигация по уже посещенным страницам. \n Посередине контент, подгружающийся &#171;реактивным образом&#187;.\n</details>\n\n\n\n<p>Подключаем модули по отдельности:</p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { WpNavbar } from 'warjs';\nimport { WpPost } from 'warjs';\nimport { WpMenu } from 'warjs';\nimport { WpHome } from 'warjs';\nimport { WpPage } from 'warjs';\nimport { WpCategories } from 'warjs';\nimport { WpCategory } from 'warjs';\nimport { WpBreadcrumbs } from 'warjs';</code></pre>\n\n\n\n<p>Или все одной строкой:</p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { WpNavbar, WpPost, ... // next components\n} from 'warjs';</code></pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Затем создаем класс <code>src/components/decorator.js </code>для компонента, и в методе render вызываем все представленные методы.</p><cite>Обратить внимание что такое расположение объектов в выводе на экран соответствует устройству сайта на сегодняшний день.</cite></blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>export default class Decorator extends React.Component {\n    constructor(props) {\n      super(props);\n      this.props = props\n    }\n    render() {\n      render() {\n    let classes = {list: 'list', menuHeader: 'menu-'}\n    return (\n      &lt;Router>\n        &lt;WpNavbar>\n          &lt;WpMenu />\n          &lt;Typography>\n            &lt;Link className={styles.navbar_link} to='/home/list:1'>Home&lt;/Link>\n          &lt;/Typography>\n        &lt;/WpNavbar>\n        &lt;WpBreadcrumbs />\n        &lt;Grid className={styles.grid_container} container spaces={8}>\n          &lt;Grid className={styles.subHeader} item xs={12} sm={3}>\n            &lt;WpCategories />\n          &lt;/Grid>\n          &lt;Grid item xs={12} sm={6}>\n            &lt;Route path='/home' component={WpHome} />\n            &lt;Route path='/post:id' component={WpPost} />\n            &lt;Route path='/page:id' component={WpPage} />\n            &lt;Route path='/category:id' component={WpCategory} />\n          &lt;/Grid>\n          &lt;Grid item sm={3}>&lt;/Grid>\n        &lt;/Grid>\n      {/* TODO &lt;EnhancedTable />*/}\n      &lt;/Router>\n    );\n    }\n}</code></pre>\n\n\n\n<p>Импортируем наш класс в <code>src/App.js</code>:</p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { Component } from 'react';\nimport { Decorator } from './components/decorator.js';\n\nexport default class App extends Component {\n  render () {\n    return (\n      &lt;Decorator />\n    );\n  }\n}\n</code></pre>\n\n\n\n<p>Как <a href=\"/post:230\">установить данные</a> читайте в статье.</p>\n","contentProtected":false,"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/216"}],"collection":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts"}],"about":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=216"}],"version-history":[{"count":26,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/216/revisions"}],"predecessor-version":[{"id":247,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/216/revisions/247"}],"wp:attachment":[{"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=216"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"error":0,"sticky":false,"format":"standard","tags":[],"categories":[18]}