Доброго времени суток, дорогие друзья! Сегодня у нас 2 часть нашего путешествия в мир сайтостроения. Мы разберем основные части сайта MODx, на которых строится все остальное – это Шаблоны и Чанки.

Шаблон – это базовая составляющая сайта на MODx Revo. С помощью нее вы выбираете визуальное оформление страниц и какие-либо технические составляющие.

Чанки – это куски HTML-кода, по сути, маленькие шаблончики, необходимые для разделения составляющих страниц.

Итак, начнем. Вы можете посмотреть данный урок на видео, либо прочитать в этой статье.

Шаблон, который мы используем в уроках, вы можете скачать по этой ссылке.

Начнем с того, что выделим те части на шаблонах, которые у нас встречаются практически на каждой странице. У нас это хедер, футер и сайдбар (на страницах блога):

Чанки и шаблоны

Чанки и шаблоны

Чанки и шаблоны

Теперь нам необходимо создать чанки с кодом данных элементов в системе MODx, делается это следующим образом:

  1. Открываем вкладку “Элементы”
  2. Нажимаем “Новый чанк” или плюсик в разделе чанки
  3. Далее мы вносим имя чанка и код чанка
  4. Нажимаем сохранить.

Последовательность действий отражена на скриншоте:

Чанки и шаблоны

Выровнять код в поле “код чанка” можно сочетанием клавиш shift+tab. Итак, нам нужно создать 4 чанка с именами meta, header, footer, sidebar. Чанк meta нужен для быстрого внесения изменений в метатегах и его часть между тегами <head></head>. Приведу коды чанков:

  1. meta
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Piccolo Theme</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="[ [++site_url] ]">
    <!-- CSS
    ================================================== -->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/prettyPhoto.css" />
    <link rel="stylesheet" href="css/flexslider.css" />
    <link rel="stylesheet" href="css/custom-styles.css">

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" href="css/style-ie.css"/>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

    Тег base с атрибутом href нужен для того, чтобы браузер брал файлы css, js и изображения относительно корня сайта, а не относительно расположения страницы. [ [++site_url] ] - это тег, который возвращает, url сайта.

  2. header
    <div class="row header"><!-- Begin Header -->

    <!-- Logo
    ================================================== -->
    <div class="span5 logo">
    <a href="index.htm"><img src="img/piccolo-logo.png" alt="" /></a>
    <h5>Big Things... Small Packages</h5>
    </div>

    <!-- Main Navigation
    ================================================== -->
    <div class="span7 navigation">
    <div class="navbar hidden-phone">

    <ul class="nav">
    <li class="dropdown active">
    <a class="dropdown-toggle" data-toggle="dropdown" href="index.htm">Home <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="index.htm">Full Page</a></li>
    <li><a href="index-gallery.htm">Gallery Only</a></li>
    <li><a href="index-slider.htm">Slider Only</a></li>
    </ul>
    </li>
    <li><a href="features.htm">Features</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="page-full-width.htm">Pages <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="page-full-width.htm">Full Width</a></li>
    <li><a href="page-right-sidebar.htm">Right Sidebar</a></li>
    <li><a href="page-left-sidebar.htm">Left Sidebar</a></li>
    <li><a href="page-double-sidebar.htm">Double Sidebar</a></li>
    </ul>
    </li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="gallery-4col.htm">Gallery <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="gallery-3col.htm">Gallery 3 Column</a></li>
    <li><a href="gallery-4col.htm">Gallery 4 Column</a></li>
    <li><a href="gallery-6col.htm">Gallery 6 Column</a></li>
    <li><a href="gallery-4col-circle.htm">Gallery 4 Round</a></li>
    <li><a href="gallery-single.htm">Gallery Single</a></li>
    </ul>
    </li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="blog-style1.htm">Blog <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="blog-style1.htm">Blog Style 1</a></li>
    <li><a href="blog-style2.htm">Blog Style 2</a></li>
    <li><a href="blog-style3.htm">Blog Style 3</a></li>
    <li><a href="blog-style4.htm">Blog Style 4</a></li>
    <li><a href="blog-single.htm">Blog Single</a></li>
    </ul>
    </li>
    <li><a href="page-contact.htm">Contact</a></li>
    </ul>

    </div>

    <!-- Mobile Nav
    ================================================== -->
    <form action="#" id="mobile-nav" class="visible-phone">
    <div class="mobile-nav-select">
    <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Navigate...</option>
    <option value="index.htm">Home</option>
    <option value="index.htm">- Full Page</option>
    <option value="index-gallery.htm">- Gallery Only</option>
    <option value="index-slider.htm">- Slider Only</option>
    <option value="features.htm">Features</option>
    <option value="page-full-width.htm">Pages</option>
    <option value="page-full-width.htm">- Full Width</option>
    <option value="page-right-sidebar.htm">- Right Sidebar</option>
    <option value="page-left-sidebar.htm">- Left Sidebar</option>
    <option value="page-double-sidebar.htm">- Double Sidebar</option>
    <option value="gallery-4col.htm">Gallery</option>
    <option value="gallery-3col.htm">- 3 Column</option>
    <option value="gallery-4col.htm">- 4 Column</option>
    <option value="gallery-6col.htm">- 6 Column</option>
    <option value="gallery-4col-circle.htm">- Gallery 4 Col Round</option>
    <option value="gallery-single.htm">- Gallery Single</option>
    <option value="blog-style1.htm">Blog</option>
    <option value="blog-style1.htm">- Blog Style 1</option>
    <option value="blog-style2.htm">- Blog Style 2</option>
    <option value="blog-style3.htm">- Blog Style 3</option>
    <option value="blog-style4.htm">- Blog Style 4</option>
    <option value="blog-single.htm">- Blog Single</option>
    <option value="page-contact.htm">Contact</option>
    </select>
    </div>
    </form>

    </div>

    </div><!-- End Header -->
  3. footer
    <div class="footer-container"><!-- Begin Footer -->
    <div class="container">
    <div class="row footer-row">
    <div class="span3 footer-col">
    <h5>About Us</h5>
    <img src="img/piccolo-footer-logo.png" alt="Piccolo" /><br /><br />
    <address>
    <strong>Design Team</strong><br />
    123 Main St, Suite 500<br />
    New York, NY 12345<br />
    </address>
    <ul class="social-icons">
    <li><a href="#" class="social-icon facebook"></a></li>
    <li><a href="#" class="social-icon twitter"></a></li>
    <li><a href="#" class="social-icon dribble"></a></li>
    <li><a href="#" class="social-icon rss"></a></li>
    <li><a href="#" class="social-icon forrst"></a></li>
    </ul>
    </div>
    <div class="span3 footer-col">
    <h5>Latest Tweets</h5>
    <ul>
    <li><a href="#">@room122</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li><a href="#">@room122</a> In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Morbi blandit ultricies ultrices.</li>
    <li><a href="#">@room122</a> Vivamus nec lectus sed orci molestie molestie. Etiam mattis neque eu orci rutrum aliquam.</li>
    </ul>
    </div>
    <div class="span3 footer-col">
    <h5>Latest Posts</h5>
    <ul class="post-list">
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Consectetur adipiscing elit est lacus gravida</a></li>
    <li><a href="#">Lectus sed orci molestie molestie etiam</a></li>
    <li><a href="#">Mattis consectetur adipiscing elit est lacus</a></li>
    <li><a href="#">Cras rutrum, massa non blandit convallis est</a></li>
    </ul>
    </div>
    <div class="span3 footer-col">
    <h5>Flickr Photos</h5>
    <ul class="img-feed">
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    <li><a href="#"><img src="img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
    </ul>
    </div>
    </div>

    <div class="row"><!-- Begin Sub Footer -->
    <div class="span12 footer-col footer-sub">
    <div class="row no-margin">
    <div class="span6"><span class="left">Copyright 2012 Piccolo Theme. All rights reserved.</span></div>
    <div class="span6">
    <span class="right">
    <a href="#">Home</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">Features</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">Gallery</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">Blog</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">Contact</a>
    </span>
    </div>
    </div>
    </div>
    </div><!-- End Sub Footer -->

    </div>
    </div><!-- End Footer -->
  4. sidebar
     
    

    <div class="span4 sidebar">

    <!--Search-->
    <section>
    <div class="input-append">
    <form action="#">
    <input id="appendedInputButton" size="16" type="text" placeholder="Search"><button class="btn" type="button"><i class="icon-search"></i></button>
    </form>
    </div>
    </section>

    <!--Categories-->
    <h5 class="title-bg">Categories</h5>
    <ul class="post-category-list">
    <li><a href="#"><i class="icon-plus-sign"></i>Design</a></li>
    <li><a href="#"><i class="icon-plus-sign"></i>Illustration</a></li>
    <li><a href="#"><i class="icon-plus-sign"></i>Tutorials</a></li>
    <li><a href="#"><i class="icon-plus-sign"></i>News</a></li>
    </ul>

    <!--Popular Posts-->
    <h5 class="title-bg">Popular Posts</h5>
    <ul class="popular-posts">
    <li>
    <a href="#"><img src="img/gallery/gallery-img-2-thumb.jpg" alt="Popular Post"></a>
    <h6><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></h6>
    <em>Posted on 09/01/15</em>
    </li>
    <li>
    <a href="#"><img src="img/gallery/gallery-img-2-thumb.jpg" alt="Popular Post"></a>
    <h6><a href="#">Nulla iaculis mattis lorem, quis gravida nunc iaculis</a></h6>
    <em>Posted on 09/01/15</em>
    <li>
    <a href="#"><img src="img/gallery/gallery-img-2-thumb.jpg" alt="Popular Post"></a>
    <h6><a href="#">Vivamus tincidunt sem eu magna varius elementum maecenas felis</a></h6>
    <em>Posted on 09/01/15</em>
    </li>
    </ul>

    <!--Tabbed Content-->
    <h5 class="title-bg">More Info</h5>
    <ul class="nav nav-tabs">
    <li class="active"><a href="#comments" data-toggle="tab">Comments</a></li>
    <li><a href="#tweets" data-toggle="tab">Tweets</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    </ul>

    <div class="tab-content">
    <div class="tab-pane active" id="comments">
    <ul>
    <li><i class="icon-comment"></i>admin on <a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><i class="icon-comment"></i>admin on <a href="#">Consectetur adipiscing elit</a></li>
    <li><i class="icon-comment"></i>admin on <a href="#">Ipsum dolor sit amet consectetur</a></li>
    <li><i class="icon-comment"></i>admin on <a href="#">Aadipiscing elit varius elementum</a></li>
    <li><i class="icon-comment"></i>admin on <a href="#">ulla iaculis mattis lorem</a></li>
    </ul>
    </div>
    <div class="tab-pane" id="tweets">
    <ul>
    <li><a href="#"><i class="icon-share-alt"></i>@room122</a> Vivamus tincidunt sem eu magna varius elementum. Maecenas felis tellus, fermentum vitae laoreet vitae, volutpat et urna.</li>
    <li><a href="#"> <i class="icon-share-alt"></i>@room122</a> Nulla faucibus ligula eget ante varius ac euismod odio placerat.</li>
    <li><a href="#"> <i class="icon-share-alt"></i>@room122</a> Pellentesque iaculis lacinia leo. Donec suscipit, lectus et hendrerit posuere, dui nisi porta risus, eget adipiscing</li>
    <li><a href="#"> <i class="icon-share-alt"></i>@room122</a> Vivamus augue nulla, vestibulum ac ultrices posuere, vehicula ac arcu.</li>
    <li><a href="#"> <i class="icon-share-alt"></i>@room122</a> Sed ac neque nec leo condimentum rhoncus. Nunc dapibus odio et lacus.</li>
    </ul>
    </div>
    <div class="tab-pane" id="about">
    <p>Enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</p>

    Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
    </div>
    </div>

    <!--Video Widget-->
    <h5 class="title-bg">Video Widget</h5>
    <iframe src="http://player.vimeo.com/video/24496773" width="370" height="208"></iframe>
    </div>

Итак, мы создали чанки. Теперь нам необходимо создать шаблоны. Делаем все аналогично чанкам, только вместо "Новый чанк" нажимаем "Новый шаблон", а в коде, созданный нами чанки заменяем на [ [$header] ], [ [$footer] ], [ [$sidebar] ] и [ [$meta] ] (убрав пробелы).

У нас дожно получиться несколько шаблонов:

  1. Главная
  2. Контакты
  3. Статья
  4. Блог (категория)
  5. Возможности
  6. Текстовая страница
  7. Галерея (категория)
  8. Галерея (статья)

На этом наш урок закончен. Более подробную версию смотрите в видео. Подписывайтесь на канал и ставьте палец вверх! До следующего урока!