Интеграция дизайна в систему управления

CyberWarring · 8 окт 2012

В сегодняшнем уроке переходим к одному из самых интересных моментов в создании сайта на MODx, — к интеграции готового дизайна в систему
Надеюсь, что вы уже скачали http://rusfolder.com/33021597]Шаблон, о котором я упоминал .В архиве с шаблоном находятся следующие файлы и папки: папка css — в ней хранятся CSS стили будущего сайта; папка images — изображения, используемые для дизайна; index.html, blog.html, archives.html, style.html

В директории на локальном сервере c:/WebServers/home/blog/www/assets/templates/ создаем папку для нашего будущего шаблона, например, «blog» и в неё копируем содержимое архива с шаблоном. После этого авторизуемся в системе управления и отправляемся на вкладку Элементы → Управление элементами → Шаблоны, чтобы создавать новый шаблон в MODx Здесь уже создано два шаблона по умолчанию: MODxHost и Minimal Template. Вы можете удалить MODxHost. После удаления у нас останется единственный шаблон, который уже применен к единственному ресурсу, созданному в дереве MODx. Именно этот шаблон мы и будем редактировать под свои нужды.
Я думаю, что удобнее всего будет создать 2 шаблона. Один для главной страницы и страниц категорий, другой для внутренних страниц сайта.
Начнем с шаблона для страниц категорий. За его основу возьмем HTML разметку из скачанного файла index.html. Копируем содержимое этого файла и отправляемся редактировать шаблон Minimal Template, проследовав при этом по пути Элементы → Управление элементами → Шаблоны → Minimal Template.
Заполняем поля:
«Имя шаблона» вписываем, например — Категория.
«Описание» — Шаблон для главной страницы и страниц категорий.
«Код шаблона (HTML)» — вставляем HTML разметку, скопированную из файла index.html.

Сразу же необходимо поправить пути к файлам и изображениям, т.к. они изменились при интеграции в систему управления. Для этого находимо в поле «Код шаблона» внести изменения: находим все встречающиеся пути к файлам и изображениям и добавляем перед ними /assets/templates/blog/.
В итоге Вы должны заменить следующий код

Код:

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

на

[/code]<link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/blog/css/screen.css" />[/code]

т.е. изменить путь к CSS файлу.
И также необходимо найти и заменить все пути к изображениям. Для удобства можете воспользоваться поиском (Ctrl+F) по содержимому поля «Код шаблона», чтобы не пропустить ни один путь. Ищите конструкцию, в которой содержится

src="images

и везде где она встречается заменяйте её на

src="/assets/templates/blog/images

Когда все пути будут исправлены, можете сделать предпросмотр сайта (вкладка Сайт → Просмотр), чтобы убедиться, что шаблон отображается без ошибок.

Если шаблон выглядит как на рисунке выше, значит вы всё сделали правильно.
Теперь можно создать шаблон для внутренних страниц сайта.
Отправляемся на вкладку Элементы → Управление элементами → Шаблоны. Нажимаем на ссылку «Новый шаблон» и начинаем заполнять поля:
«Имя шаблона» вписываем, например — Внутренняя страница.
«Описание» — Шаблон внутренних страниц сайта
«Код шаблона (HTML)» — в это поле вставляем HTML разметку из шаблона «Категория», т.е. просто временно копируем сюда тот же самый код, в который только что вносили правки в шаблоне для категорий.

Двигаемся дальше. Сейчас я предлагаю проанализировать два только что созданных шаблона, и решить, какие куски HTML разметки должны быть в обоих шаблонах и вынести их в отдельные чанки. Делается это для того, чтобы в дальнейшем можно было редактировать при необходимости два шаблона одновременно из одного места.
Напомню: чанк в MODx — это кусок статичного HTML кода. Чанки удобно использовать в том случае, если у вас в различных шаблонах есть повторяющиеся части. В шаблоне чанк вызывается с помощью конструкции {{имя_чанка}}. Чтобы освежить память можете перечитать более подробный урок о разбиении на чанки из предыдущего курса.
И так, в наших шаблонах есть области, которые мы смело можем вынести в чанки: шапка сайта с навигацией и логотипом, правая колонка, футер. Этот процесс сводится к последовательности действий:

Вырезаем из шаблона определенные куски HTML кода

Создаем новый чанк, даем ему какое-нибудь понятное имя

Копируем в него вырезанную из шаблона часть разметки

На место в шаблоне, где находился ранее вырезанный текст, вставляем конструкцию вызова чанка вида {{имя_чанка}}

При создании чанков я вам рекомендую давать им осмысленные названия и не оставлять пустым поле «Описание», чтобы по прошествии времени было понятно для чего был создан тот или иной чанк и какая разметка в нем хранится. Также это будет полезно в том случае, если над проектом когда-нибудь будет работать другой человек.
В первую очередь вынесем содержимое тега <head> в чанк HEAD.
Код:
<head>
<title>CoolBlue</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/blog/css/screen.css" />
</head>
Затем блок с навигацией, логотипом и полем для поиска вынесем в чанк HEADER.
 
view sourceprint?
<div id="header-wrap">
<div id="header">
<a name="top"></a>
<h1 id="logo-text"><a href="index.html" title="">coolblue</a></h1>
    <p id="slogan">Just Another Styleshout CSS Template... </p>
    <div  id="nav">
        <ul>
        <li id="current"><a href="index.html">Home</a></li>
            <li><a href="style.html">Style Demo</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="archives.html">Archives</a></li>
            <li><a href="index.html">Support</a></li>
            <li><a href="index.html">About</a></li>
        </ul>
    </div>
  <p id="rss">
      <a href="index.html">Grab the RSS feed</a>
  </p>
  <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
        <label for="qsearch">Search:</label>
        <input class="tbox" id="qsearch" type="text" name="qsearch" value="Search..." title="Start typing and hit ENTER" />
        <button class="btn" title="Submit Search">Search</button>
      </fieldset>
  </form>
</div>
</div
Для шаблона «Категория» вынесем блок c основной колонкой сайта <div id="main"> в отдельный чанк MAIN.
В разметке имеются повторяющиеся блоки <div class="post">, предлагаю для наглядности оставить только один, а остальные пока убрать. В любом случае в дальнейшем этот блок будет генерироваться автоматически с помощью сниппета Ditto. В итоге в чанк MAIN пока придется поместить следующий код.
Код:
<div id="main">
02
        <div class="post">
03
            <div class="right">
04
                <h2><a href="index.html">Read Me First</a></h2>
05
              <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
06
                <div class="image-section">
07
                        <img src="/assets/templates/blog/images/img-post.jpg" alt="image post" height="200" width="500"/>
08
              </div>
09
              <p><strong>CoolBlue</strong> is a free, W3C-compliant, CSS-based website template
10
    </p>
11
              <p><a class="more" href="index.html">continue reading &raquo;</a></p>
12
            </div>
13
            <div class="left">
14
                <p class="dateinfo">JAN<span>31</span></p>
15
                <div class="post-meta">
16
                    <h4>Post Info</h4>
17
                        <ul>
18
                          <li class="user"><a href="#">Erwin</a></li>
19
                          <li class="time"><a href="#">12:30 PM</a></li>
20
                          <li class="comment"><a href="#">2 Comments</a></li>
21
                          <li class="permalink"><a href="#">Permalink</a></li>
22
                        </ul>
23
                        </div>
24
            </div>
25
    </div>
26
</div><br>
Т.к. содержимое основной колонки для внутренних страниц будет отличаться от содержимого на страницах категорий, то для шаблона «Внутренняя страница» этот же блок <div id="main"> вынесем в чанк с другим названием, например, MAIN-INSIDE.
Предлагаю сразу очистить содержимое этого блока от излишнего кода и оставить шаблон, на основе которого в дальнейшем будут отображаться все статьи на блоге. Итак, в чанк MAIN-INSIDE помещаем следующий код.
Код:
<div id="main">
2
            <h2><a href="index.html">Заголовок страницы</a></h2>         
3
 
4
</div>
Правую колонку блога <div id="sidebar"> вынесем в чанк SIDEBAR.
 
view sourceprint?
01
<div id="sidebar">
02
  <div class="about-me">
03
      <h3>About Me</h3>
04
      <p>
05
          <a href="index.html"><img src="/assets/templates/blog/images/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
06
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
07
            posuere nunc justo tempus leo <a href="index.html">Learn more...</a>
08
      </p>
09
  </div>
10
 
11
<div class="sidemenu">
12
  <h3>Sidebar Menu</h3>
13
      <ul>
14
          <li><a href="index.html">Home</a></li>
15
          <li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
16
          <li><a href="style.html">Style Demo</a></li>
17
          <li><a href="blog.html">Blog</a></li>
18
          <li><a href="archives.html">Archives</a></li>
19
        </ul>
20
</div>
21
<div class="sidemenu">
22
    <h3>Sponsors</h3>
23
        <ul>
24
          <li><a href="http://themeforest.net?ref=ealigam" title="Site Templates">Themeforest <br />
25
<span>Site Templates, Web &amp; CMS Themes.</span></a></li>
26
          <li><a href="http://www.4templates.com/?go=228858961" title="Website Templates">4Templates <br />
27
<span>Low Cost High-Quality Templates.</span></a></li>
28
        <li><a href="http://store.templatemonster.com?aff=ealigam" title="Web Templates">Templatemonster <br />
29
<span>Delivering the Best Templates on the Net!</span></a></li>
30
        <li><a href="http://graphicriver.net?ref=ealigam" title="Stock Graphics">Graphic River <br />
31
<span>Awesome Stock Graphics.</span></a></li>
32
        <li><a href="http://www.dreamhost.com/r.cgi?287326|sshout" title="Webhosting">Dreamhost <br />
33
<span>Premium Webhosting. Use the promocode <strong>sshout</strong> and save <strong>50 USD</strong>.</span></a> </li>
34
</ul>
35
</div>
36
  <div class="popular">
37
      <h3>Most Popular</h3>
38
        <ul>
39
            <li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
40
            <br /><span>Posted on December 22, 2010</span</li>
41
            <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
42
            <br /><span>Posted on December 20, 2010</span></li>
43
            <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
44
            <br /><span>Posted on December 15, 2010</span></li>
45
            <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
46
            <br /><span>Posted on December 14, 2010</span></li>
47
            <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
48
            <br /><span>Posted on December 12, 2010</span></li>
49
        </ul>
50
  </div>
51
</div>
Футер с колонками из ссылок, расположенный внизу страницы, вынесем в чанк FOOTER
Код:
<div id="footer-outer" class="clear">
002
<div id="footer-wrap">
003
    <div id="gallery" class="clear">
004
        <h3>Flickr Photos </h3>
005
        <p class="thumbs">
006
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
007
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
008
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
009
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
010
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
011
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
012
 
013
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
014
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
015
        <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
016
            <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
017
      </p>
018
    </div>
019
    <div class="col-a">
020
        <h3>Contact Info</h3>
021
        <p>
022
        <strong>Phone: </strong>+1234567<br/>
023
        <strong>Fax: </strong>+123456789
024
        </p>
025
        <p><strong>Address: </strong>123 Put Your Address Here</p>
026
        <p><strong>E-mail: </strong>[email protected]</p>
027
        <p>Want more info - go to our <a href="#">contact page</a></p>
028
      <h3>Updates</h3>
029
      <ul class="subscribe-stuff">
030
        <li><a title="RSS" href="index.html" rel="nofollow">
031
                <img alt="RSS" title="RSS" src="/assets/templates/blog/images/social_rss.png" /></a>
032
        </li>
033
        <li><a title="Facebook" href="index.html" rel="nofollow">
034
                <img alt="Facebook" title="Facebook" src="/assets/templates/blog/images/social_facebook.png" /></a>
035
 
036
            </li>
037
            <li><a title="Twitter" href="index.html" rel="nofollow">
038
                <img alt="Twitter" title="Twitter" src="/assets/templates/blog/images/social_twitter.png" /></a>
039
            </li>
040
            <li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
041
                <img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="/assets/templates/blog/images/social_email.png" /></a>
042
            </li>
043
      </ul>
044
      <p>Stay up to date. Subscribe via
045
        <a href="index">RSS</a>, <a href="index">Facebook</a>,
046
        <a href="index">Twitter</a> or <a href="index">Email</a>
047
        </p>
048
    </div>
049
    <div class="col-a">
050
    <h3>Site Links</h3>
051
        <div class="footer-list">
052
            <ul>
053
                <li><a href="index.html">Home</a></li>
054
                <li><a href="index.html">Style Demo</a></li>
055
                <li><a href="index.html">Blog</a></li>
056
                <li><a href="index.html">Archive</a></li>
057
                <li><a href="index.html">About</a></li>
058
                <li><a href="index.html">Template Info</a></li>
059
                <li><a href="index.html">Site Map</a></li>
060
            </ul>
061
        </div>
062
      <h3>Friends</h3>
063
        <div class="footer-list">
064
            <ul>
065
                <li><a href="index.html">consequat molestie</a></li>
066
                <li><a href="index.html">sem justo</a></li>
067
                <li><a href="index.html">semper</a></li>
068
                <li><a href="index.html">magna sed purus</a></li>
069
                <li><a href="index.html">tincidunt</a></li>
070
                <li><a href="index.html">consequat molestie</a></li>
071
                <li><a href="index.html">magna sed purus</a></li>
072
            </ul>
073
        </div>
074
    </div>
075
  <div class="col-a">
076
      <h3>Credits</h3>
077
      <div class="footer-list">
078
            <ul>
079
                <li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
080
                        110 Free Classy Social Media Icons by Jason LaRose
081
                    </a>
082
                </li>
083
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
084
                        Free Social Media Icons by WeFunction
085
                    </a>
086
                </li>
087
            <li><a href="http://www.famfamfam.com/lab/icons/">
088
                        Free Icons by FAMFAMFAM
089
                    </a>
090
                </li>
091
            </ul>
092
        </div>
093
      <h3>Recent Comments</h3>
094
      <div class="recent-comments">
095
        <ul>
096
            <li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> &#45; <cite>Erwin</cite></li>
097
 
098
            <li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> &#45; <cite>John Doe</cite></li>
099
 
100
            <li><a href="index.html" title="Comment on title">Type your comment here...</a><br />&#45; <cite>Naruto</cite></li>
101
 
102
            <li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> &#45; <cite>Shikamaru</cite></li>
103
 
104
        <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> &#45; <cite>ABCD</cite></li>
105
 
106
            </ul>
107
 
108
        </div>
109
 
110
 
111
  </div>
112
  <div class="col-b">
113
      <h3>Archives</h3>
114
      <div class="footer-list">
115
            <ul>
116
                <li><a href="index.html">January 2010</a></li>
117
                <li><a href="index.html">December 2009</a></li>
118
                <li><a href="index.html">November 2009</a></li>
119
                <li><a href="index.html">October 2009</a></li>
120
                <li><a href="index.html">September 2009</a></li>
121
            </ul>
122
        </div>
123
      <h3>Recent Bookmarks</h3>
124
      <div class="footer-list">
125
            <ul>
126
                <li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
127
                <li><a href="index.html">The Basics of CSS3</a></li>
128
 
129
                <li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
130
                <li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
131
                <li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
132
 
133
                <li><a href="index.html">The Principles of Great Design</a></li>
134
            </ul>
135
        </div>
136
    </div>
137
</div>
138
</div>
И в завершении вынесем строку с информацией о защите прав и разработчиках сайта в чанк FOOTER-LINE.
Код:
<div id="footer-bottom">
02
    <p class="bottom-left">
03
        &copy; 2010 <strong>Copyright Info</strong>&nbsp; &nbsp; &nbsp;
04
        Design by <a href="http://www.styleshout.com/">styleshout</a>
05
    </p>
06
    <p class="bottom-right">
07
        <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
08
      <a href="http://validator.w3.org/check/referer">XHTML</a>    |
09
        <a href="index.html">Home</a> |
10
        <a href="index.html">Sitemap</a> |
11
        <a href="index.html">RSS Feed</a> |
12
      <strong><a href="#top">Back to Top</a></strong>
13
  </p>
14
</div>
В итоге у вас должно получиться два шаблона, в которых вместо определенных логических блоков разметки помещен вызов соответствующих чанков.
Шаблон «Категория»
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{{HEAD}}
<body>
{{HEADER}}
  <div id="content-wrap" >
      <div id="content">
          {{MAIN}}
          {{SIDEBAR}}
      </div>
  </div>
   
{{FOOTER}}
{{FOOTER-LINE}}
</body>
</html>
Шаблон «Внутреняя страница»

Код этого шаблона будет такой же как и у шаблона «Категория» за исключением одного чанка: вместо чанка MAIN мы будем использовать вызов чанка MAIN-INSIDE.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{{HEAD}}
<body>
{{HEADER}}
      <div id="content-wrap" >
        <div id="content">
              {{MAIN-INSIDE}}
              {{SIDEBAR}}
        </div>
      </div>
       
{{FOOTER}}
{{FOOTER-LINE}}
</div>
</body>
</html>
Еще на этом шаге также предлагаю убрать атрибуты указвающие язык сайта xml:lang="en" lang="en" из тега <html>, чтобы получился следующий код

Код:

<html xmlns="http://www.w3.org/1999/xhtml">

\

Интеграция дизайна в систему управления

CyberWarring