Создание блога на MODx. Урок 2 — Интеграция дизайна в систему управления

В сегодняшнем уроке переходим к одному из самых интересных моментов в создании сайта на MODx, — к интеграции готового дизайна в систему.

Надеюсь, что вы уже скачали архив с шаблоном, о котором я упоминал в прошлом уроке.

В архиве с шаблоном находятся следующие файлы и папки: папка css — в ней хранятся CSS стили будущего сайта; папка images — изображения, используемые для дизайна; index.html, blog.html, archives.html, style.html — пример 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" />

на  

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

т.е. изменить путь к CSS файлу. 

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

src="images

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

src="/assets/templates/blog/images

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

Предварительный просмотр сайта

Если шаблон выглядит как на рисунке выше, значит вы всё сделали правильно. 

Теперь можно создать шаблон для внутренних страниц сайта.

Отправляемся на вкладку Элементы → Управление элементами → Шаблоны. Нажимаем на ссылку «Новый шаблон» и начинаем заполнять поля:

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

Создание шаблона для внутренних страниц сайта

Двигаемся дальше. Сейчас я предлагаю проанализировать два только что созданных шаблона, и решить, какие куски HTML разметки должны быть в обоих шаблонах и вынести их в отдельные чанки. Делается это для того, чтобы в дальнейшем можно было редактировать при необходимости два шаблона одновременно из одного места.

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

И так, в наших шаблонах есть области, которые мы смело можем вынести в чанки: шапка сайта с навигацией и логотипом, правая колонка, футер. Этот процесс сводится к последовательности действий:

  1. Вырезаем из шаблона определенные куски HTML кода
  2. Создаем новый чанк, даем ему какое-нибудь понятное имя
  3. Копируем в него вырезанную из шаблона часть разметки
  4. На место в шаблоне, где находился ранее вырезанный текст, вставляем конструкцию вызова чанка вида {{имя_чанка}}

При создании чанков я вам рекомендую  давать им осмысленные названия и не оставлять пустым поле «Описание», чтобы по прошествии времени было понятно для чего был создан тот или иной чанк и какая разметка в нем хранится. Также это будет полезно в том случае, если над проектом когда-нибудь будет работать другой человек.

В первую очередь вынесем содержимое тега <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.

<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">
      	<div class="post">
      		<div class="right">
            	<h2><a href="index.html">Read Me First</a></h2>
               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
               	<div class="image-section">
              			<img src="/assets/templates/blog/images/img-post.jpg" alt="image post" height="200" width="500"/>
   	    	  </div>
               <p><strong>CoolBlue</strong> is a free, W3C-compliant, CSS-based website template
	</p>
               <p><a class="more" href="index.html">continue reading &raquo;</a></p>
            </div>
            <div class="left">
            	<p class="dateinfo">JAN<span>31</span></p>
               	<div class="post-meta">
                  	<h4>Post Info</h4>
                     	<ul>
                           <li class="user"><a href="#">Erwin</a></li>
                           <li class="time"><a href="#">12:30 PM</a></li>
                           <li class="comment"><a href="#">2 Comments</a></li>
                           <li class="permalink"><a href="#">Permalink</a></li>
                        </ul>
						</div>
            </div>
	</div>
</div>

Т.к. содержимое основной колонки для внутренних страниц будет отличаться от содержимого на страницах категорий, то для шаблона «Внутренняя страница»  этот же блок <div id="main"> вынесем в чанк с другим названием, например, MAIN-INSIDE.

Предлагаю сразу очистить содержимое этого блока от излишнего кода и оставить шаблон, на основе которого в дальнейшем будут отображаться все статьи на блоге. Итак, в чанк MAIN-INSIDE помещаем следующий код.

 <div id="main">
            <h2><a href="index.html">Заголовок страницы</a></h2>			

</div>

Правую колонку блога <div id="sidebar"> вынесем в чанк SIDEBAR.

<div id="sidebar">
   <div class="about-me">
      <h3>About Me</h3>
       <p>
           <a href="index.html"><img src="/assets/templates/blog/images/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
            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
            posuere nunc justo tempus leo <a href="index.html">Learn more...</a>
      </p>
  </div>

<div class="sidemenu">
   <h3>Sidebar Menu</h3>
       <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="index.html#TemplateInfo">TemplateInfo</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>
        </ul>
</div>
<div class="sidemenu">
     <h3>Sponsors</h3>
        <ul>
          <li><a href="http://themeforest.net?ref=ealigam" title="Site Templates">Themeforest <br />
<span>Site Templates, Web &amp; CMS Themes.</span></a></li>
          <li><a href="http://www.4templates.com/?go=228858961" title="Website Templates">4Templates <br />
<span>Low Cost High-Quality Templates.</span></a></li>
         <li><a href="http://store.templatemonster.com?aff=ealigam" title="Web Templates">Templatemonster <br />
<span>Delivering the Best Templates on the Net!</span></a></li>
         <li><a href="http://graphicriver.net?ref=ealigam" title="Stock Graphics">Graphic River <br />
<span>Awesome Stock Graphics.</span></a></li>
         <li><a href="http://www.dreamhost.com/r.cgi?287326|sshout" title="Webhosting">Dreamhost <br />
<span>Premium Webhosting. Use the promocode <strong>sshout</strong> and save <strong>50 USD</strong>.</span></a> </li>
</ul>
</div>
   <div class="popular">
      <h3>Most Popular</h3>
        <ul>
            <li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
            <br /><span>Posted on December 22, 2010</span</li>
            <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
            <br /><span>Posted on December 20, 2010</span></li>
            <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
            <br /><span>Posted on December 15, 2010</span></li>
            <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
            <br /><span>Posted on December 14, 2010</span></li>
            <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
            <br /><span>Posted on December 12, 2010</span></li>
        </ul>
   </div>
</div>

Футер с колонками из ссылок, расположенный внизу страницы, вынесем в чанк FOOTER.

<div id="footer-outer" class="clear">
<div id="footer-wrap">
	<div id="gallery" class="clear">
		<h3>Flickr Photos </h3>
		<p class="thumbs">
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>

			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
			<a href="index.html"><img src="/assets/templates/blog/images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
      </p>
    </div>
	 <div class="col-a">
		<h3>Contact Info</h3>
		<p>
		<strong>Phone: </strong>+1234567<br/>
		<strong>Fax: </strong>+123456789
		</p>
		<p><strong>Address: </strong>123 Put Your Address Here</p>
        <p><strong>E-mail: </strong>me@coolblue.com</p>
		<p>Want more info - go to our <a href="#">contact page</a></p>
      <h3>Updates</h3>
      <ul class="subscribe-stuff">
      	<li><a title="RSS" href="index.html" rel="nofollow">
				<img alt="RSS" title="RSS" src="/assets/templates/blog/images/social_rss.png" /></a>
		</li>
      	<li><a title="Facebook" href="index.html" rel="nofollow">
				<img alt="Facebook" title="Facebook" src="/assets/templates/blog/images/social_facebook.png" /></a>

			</li>
			<li><a title="Twitter" href="index.html" rel="nofollow">
				<img alt="Twitter" title="Twitter" src="/assets/templates/blog/images/social_twitter.png" /></a>
			</li>
			<li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
				<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>
			</li>
      </ul>
      <p>Stay up to date. Subscribe via
		<a href="index">RSS</a>, <a href="index">Facebook</a>,
		<a href="index">Twitter</a> or <a href="index">Email</a>
		</p>
	</div>
	<div class="col-a">
   	<h3>Site Links</h3>
		<div class="footer-list">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="index.html">Style Demo</a></li>
				<li><a href="index.html">Blog</a></li>
				<li><a href="index.html">Archive</a></li>
				<li><a href="index.html">About</a></li>
				<li><a href="index.html">Template Info</a></li>
				<li><a href="index.html">Site Map</a></li>
			</ul>
		</div>
      <h3>Friends</h3>
		<div class="footer-list">
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">magna sed purus</a></li>
			</ul>
		</div>
	</div>
   <div class="col-a">
      <h3>Credits</h3>
      <div class="footer-list">
			<ul>
				<li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
						110 Free Classy Social Media Icons by Jason LaRose
				    </a>
				</li>
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
						Free Social Media Icons by WeFunction
				    </a>
				</li>
            <li><a href="http://www.famfamfam.com/lab/icons/">
						Free Icons by FAMFAMFAM
				    </a>
				</li>
			</ul>
		</div>
      <h3>Recent Comments</h3>
	   <div class="recent-comments">
         <ul>
			<li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> &#45; <cite>Erwin</cite></li>

			<li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> &#45; <cite>John Doe</cite></li>

			<li><a href="index.html" title="Comment on title">Type your comment here...</a><br />&#45; <cite>Naruto</cite></li>

			<li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> &#45; <cite>Shikamaru</cite></li>

         <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> &#45; <cite>ABCD</cite></li>

			</ul>

		</div>


   </div>
   <div class="col-b">
      <h3>Archives</h3>
	   <div class="footer-list">
			<ul>
				<li><a href="index.html">January 2010</a></li>
				<li><a href="index.html">December 2009</a></li>
				<li><a href="index.html">November 2009</a></li>
				<li><a href="index.html">October 2009</a></li>
				<li><a href="index.html">September 2009</a></li>
			</ul>
		</div>
      <h3>Recent Bookmarks</h3>
	   <div class="footer-list">
			<ul>
				<li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
				<li><a href="index.html">The Basics of CSS3</a></li>

				<li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
				<li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
				<li><a href="index.html">30 Blog Designs with Killer Typography</a></li>

				<li><a href="index.html">The Principles of Great Design</a></li>
			</ul>
		</div>
	</div>
</div>
</div>

И в завершении вынесем строку с информацией о защите прав и разработчиках сайта в чанк FOOTER-LINE.

<div id="footer-bottom">
	<p class="bottom-left">
		&copy; 2010 <strong>Copyright Info</strong>&nbsp; &nbsp; &nbsp;
		Design by <a href="http://www.styleshout.com/">styleshout</a>
	</p>
	<p class="bottom-right">
		<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
	   <a href="http://validator.w3.org/check/referer">XHTML</a>	|
		<a href="index.html">Home</a> |
		<a href="index.html">Sitemap</a> |
		<a href="index.html">RSS Feed</a> |
      <strong><a href="#top">Back to Top</a></strong>
   </p>
</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">

Вывод и итоговые файлы урока

Пройдя урок вы создали два шаблона: «Категория» и «Внутренняя страница», которые в дальнейшем будут назначаться страницам блога. В основу шаблона легла HTML разметка файла index.html из скачанного шаблона CooBlue.

Файлы урока:

Описанные в уроке действия вы сможете посмотреть в видео-уроке. Для экономии времени в видео-уроке не до конца показан процесс изменения путей к изображениям шаблона, думаю, что вы без труда справаитесь с этим самостоятельно.

Видео по интеграции дизайна в MODx. Часть 1

Размер: 12mb. Длительность: 5 минут.

Видео по интеграции дизайна в MODx. Часть 2

Размер: 4.5mb. Длительность: 1 минута 30 секунд.

Чтобы не пропустить следующий урок подпишитесь на обновления в блоге.

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию блога на MODx:

28.09.2011
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus