Газетную тему будем создавать из существующего шаблона, скачайте файл media.zip. Этот файл содержит одну html страницу, из которой мы будем создавать тему для LitePublisher. Также вы можете скачать уже получившийся результат - файл gazeta.theme.zip, если вы будете следовать приведенным ниже инструкциям, то получите этот результат - готовую тему.

Первый шаг - подготовительные работы, которые являются одинаковыми для всех тем Скачайте файл abstract.theme.zip, где находится заготовка для любой темы, после чего следуйте инструкциям по подготовке темы.

разберем газетную тему. В ней очевидно выделяется меню - это ссылки Home, About us, Services, Contact us. Перед меню есть шапка с описанием и парой ссылок. Разберемся с шапкой, про меню смотрите ниже. Вот исходный html шапки:


    <h1>...The <strong>Worldwide</strong> Media...</h1>
    <div id="top-nav">
      <ul>
        <li><a href="http://www.freewebsitetemplates.com">faq</a> | </li>
        <li><a href="http://www.freewebsitetemplates.com">site maps</a></li>
      </ul>
    </div>

Первый тег h1 можно смело заменить на


    <h1>$site.description</h1>

Или по вкусу вместо $site.description поставить $site.name. Что же делать с парой ссылок? Самый простой вариант - удалить их из темы и не заморачиваться. Другой вариант - поместить туда важные ссылки. В оригинале это FAQ и карта сайта, но на мой взгляд это малоинформативно. Можно поставить ссылку на RSS сайта и главную страницу, а ссылку на главную не ставить в меню. Отредактируем шапку таким образом:


    <h1>$site.description</h1>
    <div id="top-nav">
      <ul>
        <li><a href="$site.url/">$lang.home</a> | </li>
        <li><a href="$site.url/rss.xml">RSS</a></li>
      </ul>
    </div>

Далее идет меню сайта, про меню отдельный разговор. Видим, что меню представляет собой ненумерованный список без всяких классов, ну разве что активное меню имеет класс drk, в отличии от темы по умолчанию, где активное меню имеет класс current_page_link. Это как раз и зафиксируем в javascript. Берем шаблон меню из темы по умолчанию и оставляем только то, что отличается в газетной темы от темы по умолчанию. Вот что получилось:


          $template.menu = [
$hover = [false]
<script type="text/javascript">
  $(document).ready(function() {
    $("#nav a[href='" + window.location + "']").addClass("drk");
  });
</script>
          <ul>
            $item
            $current = [        <li class="drk"><a href="$link" title="$title">$title</a>$submenu</li>]
          </ul>
          ]

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

Остается выделить в шаблоне контент и сайдбар. Сайдбар находится справа и начинается с фразы "Media Coverage". Найдем ее. Ясно что до этой фразы будет шаблон контента, а после нее виджеты сайдбара. Шаблонов контента много, пока что займёмся виджетами. Во первых в теме всего один сайдбар. Посмотрим на последующий html - он прост, это всего лишь:


          <h3>News</h3>
          <img src="images/pic_1.jpg" width="103" height="79" alt="Pic 1" class="left" />
          If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.
          <p class="more"><a href="http://www.freewebsitetemplates.com">more...</a>

Трансформируем этот код в шаблон для LitePublisher:


          $template.sidebar = [
          $widget = [
          <h3>$title</h3>
          $items
          ]

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


<img src="images/pic_1.jpg" width="103" height="79" alt="Pic 1" class="left" />

<pre><code>      &lt;img src="images/pic&amp;#95;2.jpg" width="103" height="79" alt="Pic 2" class="left" /&gt;

Так как создали универсальный шаблон. Если нам хочется использовать картинки из темы для отдельных виджетов, то это можно сделать. В теме есть всего три картинки: газета, радио и телевизор. На мой взгляд их никуда нельзя пристроить, ну может быть кроме картинки газеты. Кто как, а я делаю вывод о бесполезности этих изображений и поэтому просто не буду их использовать и удалю из темы. Оставим только наш шаблон, остальной html из сайдбара можно просто удалить.

Перед разбором контента закончим с подписью в конце темы, заменив


Copyright statement goes here. All rights reserved

на тег движка $template.footer

Обратим внимание на контентную часть. В ней выделяется два блока, первый думаю что можно использовать для простого контента, например простых текстов перед анонсами, за это отвечает шаблон в LitePublisher content.simply. Задекларируем этот шаблон:


$template.content = [
          $simple = [<div id="visit">$content</div>]
      $notfound = [<div id="visit">
          <h2 class="center">$lang.notfound </h2>
          <p class="center">$lang.nocontent
          </div>]

Заодно и шаблон для страницы 404 объявил. Перейдем к основному контенту.

Первая неприятность - div объявляются с id, а именно subs, subs-left, subs-right. Шаблон с id нас не устроит, так как нужен многократно повторяющийся шаблон, а ведь id позволяет только единственное использование. Придется исправлять на класс и симметрично править файл style.css. Это мелочь - не трудно сделать замену. Самая большая неприятность в другом - контент в шаблоне разбит на две колонки. Для общего случая, а именно для широкого контента, это никак не подходит. Как быть? Самый простой ответ - удалить и забыть. Но согласитесь - жалко терять колоночную газетную разбивку. Сделать шаблон анонса состоящим из двух колонок? Вполне возможно. Тогда сочиним шаблон анонса где слева будет текст анонса, а справа все остальное. Вот скелет анонса:


$excerpts = [
$excerpt = [
        <div class="subs">
          <div class="subs-left">
            <h3><a href="$post.link" rel="bookmark" title="$lang.permalink $post.title">$post.iconlink$post.title</a></h3>
$post.excerptcontent
          </div>
          <div class="subs-right">

<pre><code>      &lt;/div&gt;
    &lt;/div&gt;

]
]

Получив костяк для анонса детализируем все его теги. Список файлов поместим справа. Смело берем шаблон html из темы по умолчанию. В первом приближении получаем:


$excerpts = [
$excerpt = [
        <div class="subs" id="post-$post.id">
          <div class="subs-left">
            <h3><a href="$post.link" rel="bookmark" title="$lang.permalink $post.title">$post.iconlink$post.title</a></h3>
                <span class="post-date">$post.excerptdate = [d.m.Y]</span>
$post.excerptcontent
          </div>
          <div class="subs-right">
                <span class="post-cat">$post.catlinks</span><br/
                <span class="post-tags">$post.taglinks</span>
                $post.excerptfilelist
                <span class="post-comments">$post.commentslink</span>
          </div>
        </div>
]
]

Вобщем то тема закончена. Что остается? Добавить в файл стилей недостающие стили из темы по умолчанию и скорее всего ддля анонса после тестирования заменить span на div и удалить классы. Самое сложное пожалуй - это тестировать и исправлять ошибки. Проверяем. Вроде как все работает. Тестируем полную запись - посредине вылезает вертикальная палка и слишком широкий textarea. Первое исправляем переопределив класс .post взяв копию #visit. Палка ушла, текст посветлел и стало даже лучше чем было. Для textarea в css просто так не исправить ширину, так как у textarea есть обязательные атрибуты rows и cols, которые заданы в теме по умолчанию. Придется копировать шаблон формы комментариев в theme.txt и там его править. Достаточно было поставить cols="40%" чтобы полностью решить проблему. Попадание с первого раза. Да, если использовать тему для формы контактов, то надо тоже отредактировать html формы контактов, аналогично уменьшив ширину.

В принципе все - тема закончена, остается только добавить недостающие стили из темы по умолчанию. Во первых это список файлов - файл default.css в папке templates абстрактной темы, а также файл post.css оттуда же - в нем только закомментируем .post из темы по умолчанию, так как мы уже ранее объявили этот класс. Остальное наверно можно оставить без изменений. Тему можно публиковать.

RSS комментарии к этой записи Рубрики: Как сделать тему