Заготовка для блога — Часть 2

Комментарии: 45  Просмотры: 25 433

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>" />
<?php foreach($styles as $style): ?>
    <link href="<?php echo URL::base(); ?>public/css/<?php echo $style; ?>.css" 
    rel="stylesheet" type="text/css" />
<?php endforeach; ?>
 
</head>
 
<body>
  <div class="layer">
    <div class="container">
      <div class="header"><h1>Логотип</h1></div>
 
      <div class="left">
        <h3>Меню</h3>
        <br />
        <ul>
          <li><a href="<?php echo URL::site(); ?>">Главная</a></li>
          <li><a href="<?php echo URL::site('page/about'); ?>">О сайте</a></li>
          <li><a href="<?php echo URL::site('page/contacts'); ?>">Мои контакты</a></li>  
        </ul>
      </div>
      <div class="content"><?php echo $content; ?></div>
 
      <div class="clearing"></div>
      <div class="footer">2011 Все права защищены</div>
    </div>
  </div>
</body>
</html>

Вы видите, что я добавил блок header, меню в виде списка в блоке left, блок content, в котором будет выводиться контент и footer. Вообще конечно меню лучше всего оформить в виде Виджета, для большей гибкости, но это все мы сделаем потом. Пока идем от простого к сложному. Обратите еще внимание на формирование ссылок. Для них мы используем статический метод site.

Теперь подправим файл стилей:

@charset "utf-8";
/* CSS Document */
 
* {padding:0; margin:0}
html, body {width:100%; height:100%;}
body {font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; background-color:#fff;}
a {text-decoration:none; outline:none; border:none; color:#333;}
a img {border:none; outline:none;}
.clearing {clear:both;}
 
.layer {width:100%; margin-top:10px; position:relative;}
.container {margin:0 auto; width:1000px;}
 
.header {width:100%; height:80px; border:#999 1px solid; margin-bottom:10px; padding-top:20px; text-align:center;}
.left {width:290px; float:left; border:#999 1px solid; padding:5px;}
.left ul {margin:0; padding:0;}
.left ul li {list-style:none;}
.content {width:676px; float:left; border:#999 1px solid; margin-left:10px; padding:5px;}
.footer {width:100%; height:20px; border:#999 1px solid; margin-top:10px; padding-top:5px; text-align:center;}

Осталось добавить в шаблон show.php из папки pages какой-нибудь пробный текст и можно запускать. У меня получилась вот такая красота (кликабельно), немножко кривая:

Попробуйте понажимать на ссылки, все должно работать. При этом видно, что меняется только блок контента. Главный шаблон загружается всегда, на то он и главный. В других источниках вы можете встретить вариацию, когда главный шаблон тоже нарезается на несколько шаблонов — хидер отдельно, футер отдельно и т.д. Конечно я могу это понять, если на разных страницах разный хидер, но я такого что-то не встречал. Разве что для админки. Но для нее обычно делается отдельный главный шаблон.
Конечно это еще не блог (нет ни админки, ни возможности комментирования, да еще много чего нет), но вполне уже идет под сайт-визитку, при наличии красивого дизайна. Достаточно добавить ссылок, прописать все новые шаблоны в контроллере и заполнить их текстом и все. А главное делается за 20 минут. Но естественно никто (я надеюсь) не использует фреймворки для сайтов-визиток. Хотя…Но не будем о грустном.
В продолжении мы будем рассматривать Роутинг в Кохане. Это достаточно большая и очень важная тема, поэтому она охватит сразу несколько уроков. До новых встреч.

<< Назад | Обсудить на форуме


К записи оставлено 45 коммент.

script type="text/javascript" src="/js/peel.js"></script

Эту строку удалось передать только убрав начальную

Эту строку удалось передать только убрав начальную

<

и конечную

>

Спасибо Вам большое за ответы на все мои вопросы!

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

Мне в таких случаях не нравится, когда режутся блоки и в одном шаблоне тег открывается, а в другом — закрывается. Очень трудно отслеживать верстку.

А это — уже вопрос жопорукости верстальщика. В каждом из шаблонов должно быть правильное соотношение открывающих и закрывающих тегов. К сожалению, не у всех хватает спинного мозга это понять (про очевидное отсутствие головного мозга промолчу).

Ребята, у меня не подключается никак стили CSS, кахана v.3.3, я смирился с большими буквами контроллеров и в общем почти со всем, но блин вот эту проблему никак не удается решить ни своими силами, ни силами друзей…уже 4 часа на это убил, перепробывал все, вплоть до бешенного тыка.
В чем может быть причина?

странно, у меня kohana 3.3.1 еще ни разу подобных проблем не случалось

У меня такая же проблема, не могу подключить css все делаю как написано в статье, но не подключается.(

тфу ты… решил проблему, нaдо каталог public разместить в корне фраемворка



Оставить комментарий или два

Пожалуйста, зарегистрируйтесь для комментирования.