Мар
08
2010

Верстаем под drupal. Часть 1: основные элементы

Из-за некоторой специфики друпаля и необходимости быстро делать проекты и не тратить лишнее время на переделывание стандартных выводов некоторых элементов в drupal мы выставляем некоторые требования к вёрстке. Т.е. стандартные элементы сайта должны быть свёрстаны в стандартном для друпаля виде, что бы нам не надо было переделывать вывод этих элементов. Ниже я и расскажу

Меню

<div class="mymenuclass">
  <ul>
    <li class="leaf first"><a href="#">My account</a></li>
    <li class="expanded active-trail"><a href="#">Create content</a>
      <ul class="menu">
        <li class="leaf first active-trail"><a href="#" class="active">Page</a></li> <!-- текущая страница -->
        <li class="leaf last"><a href="#">Story</a></li>
      </ul>
    </li>
    <li class="collapsed"><a href="#">Administer</a></li>
    <li class="leaf last"><a href="#">Log out</a></li>
  </ul>
</div>

Лучше стараться даже ul меню обернуть еще в div и в css обращаться через него. Типа такого:

.mymenuclass {}
.mymenuclass UL{}
.mymenuclass UL LI{}
.mymenuclass UL LI A{}
.mymenuclass UL LI A:hover{}
.mymenuclass UL LI.active-trail {}
.mymenuclass UL LI.active-trail A{}

Пэйджер

<ul class="pager"><li class="pager-first first"><a href="#" class="active">Первая</a></li>
  <li class="pager-previous"><a href="#" class="active">предыдущая</a></li>
  <li class="pager-item"><a href="#" class="active">1</a></li>
  <li class="pager-current">2</li>
  <li class="pager-item"><a href="#" class="active">3</a></li>
  <li class="pager-next"><a href="#" class="active">следующая</a></li>
  <li class="pager-last last"><a href="#" class="active">последняя</a></li>
</ul>

Блоки

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

<div id="blockid" class="block">
  <h2>Заголовок</h2>

  <div class="content">
    <!-- тут непосредственно контент блока -->
  </div>
</div>

Ну а в качестве blockid используем уникальный id для блока, через который в стилях прописываем уникальности этого блока если необходимо.

Тестовый контент

В область контента (полный текст новости, текстовая страница и прочее) вставлять контент вот такого типа:

                                  <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
                                    Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
                                    Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
                                    Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
                                    Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
                                    Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
                                    Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>

                                    <blockquote>
                                        <p>
                                            &#8220;This stylesheet is going to help so freaking much.&#8221;
                                            <br />
                                            -Blockquote
                                        </p>
                                    </blockquote>
                                  <br />
                                  <table>
                                  <tbody>
                                    <tr>
                                      <th>Header</th>
                                      <th>Header</th>
                                      <th>Header</th>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                  </tbody></table>

Это конечно далеко не всё. Но если верстальщик будет придерживаться хотя бы таких требований, то уже процесс темизации друпаля будет занимать меньше времени.

Верстаем под drupal. Часть 2: Формы

9 Comments to "Верстаем под drupal. Часть 1: основные элементы"

  1. magomed wrote:

    Отличная статья!!! Большое спасибо!

  2. magomed wrote:

    Почему нет ссылки на вторую главу(Приходиться гуглить).

  3. yas wrote:

    перелинковал обе части )

  4. Tm wrote:

    Подскажите, пожалуйста, как воспользоваться конструкцией МЕНЮ для существующего шаблона!?

  5. yas wrote:

    не понял вопроса

  6. Tm wrote:

    Точнее, куда добавлять этот код? И в каком виде?

  7. yas wrote:

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

  8. Tm wrote:

    Спасибо, теперь понятно. Но вот только не могу добиться того, чтобы новое меню, созданное стандартными средствами drupal, работало подобно тому, как работает меню админки. Т.е. при щелчке по одной из ссылок основного меню, открывалась соответствующая ей страница, и вместе с тем разворачивалось бы подчиненное этой ссылке подменю. Модуль DHTML Menu к сожалению работает не так. Возможно я чего-то не понимаю.

  9. yas wrote:

    поведение меню админка, которое вы тут упомянули – стандартное. Видимо что-то делаете не так, раз у вас не открывается меню. Или может там при рендере идёт ограничение на глубину, которую тут надо раскрывать. Помоему подобное ограничение было для какого-то из стандартных меню или когда меню нахолится в определённом регионе… Не помню уже точно, давно с этим не работал

Leave Your Comment