Один сайдбар? А может два? Слева или справа?

3027
Для того что бы сделать шаблон более функциональным в него обычно добавляется сайдбар. В сайдбаре выводятся дополнительные блоки информации, реклама, меню, статистика и пр...

Где же его расположить? Слева? Справа? А может показать оба сразу?
А как бы хорошо было scratch что бы сайдбары показывались динамически, в зависимости от потребностей.



Взгляд в будущее look

с замиранием сердца...

Далее примеры на основе кода будущего InstantCMS 2
подразумевается что уже
создана копия дефолтного шаблона
переименована в "мой супер шаблон"
настроены позиции вывода виджетов
для облегчения верстки применяется какой нибудь CSS фреймворк или сетка

в примерах используется код twitter bootstrap , но никто не запрещает использовать или переделать на сетку grid 960, less и т.д.

позиции вывода виджетов в файле scheme.html

Код HTML:
  1.  
  2. <tr>
  3. <td colspan="3">
  4. {block:LANG_PAGE_HEADER}
  5. {position:navigation}
  6. {position:top}
  7. </td>
  8. </tr>
  9. <tr>
  10. <td width="33%">
  11. {position:top1}
  12. </td>
  13. <td width="">
  14. {position:top2}
  15. </td>
  16. <td width="33%">
  17. {position:top3}
  18. </td>
  19. </tr>
  20. <tr>
  21. <td width="25%">
  22. {position:left-top}
  23. {position:left-center}
  24. {position:left-bottom}
  25. </td>
  26. <td width="">
  27. {position:center-top}
  28. {block:LANG_PAGE_BODY}
  29. {position:center-bottom}
  30. </td>
  31. <td width="25%">
  32. {position:right-top}
  33. {position:right-center}
  34. {position:right-bottom}
  35. </td>
  36. </tr>
  37. <tr>
  38. <td width="33%">
  39. {position:bottom1}
  40. </td>
  41. <td width="">
  42. {position:bottom2}
  43. </td>
  44. <td width="33%">
  45. {position:bottom3}
  46. </td>
  47. </tr>
  48. <tr>
  49. <td width="50%">
  50. {position:bottom-left1}
  51. </td>
  52. <td width="50%">
  53. {position:bottom-right2}
  54. </td>
  55. </tr>
  56. <tr>
  57. <td colspan="3">
  58. {position:footer}
  59. {block:LANG_PAGE_FOOTER}
  60. </td>
  61. </tr>
  62.  
  63.  
  64.  
получаем такую красоту



после чего приступаем к верстке основного скелета шаблона в файле main.tpl.php

я приведу здесь только ту часть кода которая отвечает непосредственно за области сайдбаров и основного контента



относительно верстки под twitter bootstrap имеем три логических блока которыми нам надо управлять
при использовании стандартных 12 колонок нам надо распределять ширину таким образом, что бы суммарно сайдбары + основная область контента равнялась 12 колонкам. А уж какой ширины будет левый сайдбар или правый, неважно.

Для примера ширина сайдбаров назначена в 3 колонки. Тогда для области основного контента остается 9 колонок если сайдбар один (неважно левый или правый) и 6 колонок еси сайдбары выводятся одновременно.

Как реализовать это в коде шаблона?
В первых строчках файла (хотя не важно где, но лучше php код вынести в одно место что бы сильно не загромождать им html)
описываем логику

Код PHP:
  1.  
  2.  
  3. <?php
  4.  
  5. if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')){
  6.  
  7. if($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')){
  8. $center_width = 'span6';
  9. }else{
  10. $center_width = 'span9';
  11. }
  12.  
  13. }elseif($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')){
  14.  
  15. if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')){
  16. $center_width = 'span6';
  17. }else{
  18. $center_width = 'span9';
  19. }
  20.  
  21. }else{
  22. $center_width = 'span12';
  23. }
  24. ?>
  25.  
  26.  
вызов в шаблоне $this->hasWidgetsOn('позиция1', 'позиция2', 'позиция3');
дает нам возможность проверить есть ли назначенные на позиции виджеты
используя проверки мы и определяем какую ширину задать для области контента.

применяем

Код PHP:
  1.  
  2.  
  3. <div class="row-fluid">
  4.  
  5. <?php if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')) {?>
  6. <div class="span3">
  7. <?php $this->widgets('left-top'); ?>
  8. <?php $this->widgets('left-center'); ?>
  9. <?php $this->widgets('left-bottom'); ?>
  10. </div><!--/span-->
  11. <?php } ?>
  12.  
  13. <div class="<?php echo $center_width; ?>">
  14. <div class="row-fluid">
  15. <div class="span12 well">
  16. <?php $this->widgets('center-top'); ?>
  17. <?php if ($this->isBody()){ ?>
  18. <div class="page-body">
  19. <?php $this->body(); ?>
  20. </div>
  21. <?php } ?>
  22. <?php $this->widgets('center-bottom'); ?>
  23. </div><!--/span-->
  24. </div><!--/row-->
  25. </div><!--/span-->
  26.  
  27. <?php if($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')) {?>
  28. <div class="span3">
  29. <div class="sidebar">
  30. <?php $this->widgets('right-top'); ?>
  31. <?php $this->widgets('right-center'); ?>
  32. <?php $this->widgets('right-bottom'); ?>
  33. </div>
  34. </div><!--/span-->
  35. <?php } ?>
  36.  
  37. </div><!--/row-->
  38.  
  39.  
  40.  
если виджетов нет, то приведенный ниже код вообще не будет выведен, что соответствует полному отсутствию сайдбара

Код PHP:
  1.  
  2.  
  3. <?php if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')) {?>
  4. <div class="span3">
  5. <?php $this->widgets('left-top'); ?>
  6. <?php $this->widgets('left-center'); ?>
  7. <?php $this->widgets('left-bottom'); ?>
  8. </div><!--/span-->
  9. <?php } ?>
  10.  
аналогично и для правого сайдбара

Когда оба сайдбара не выводятся значение переменной $center_width равно span12 (можно присвоить grid12 , 960px, 100% , смотря как верстаем)

данная переменная подставляется вместо значения ширины области контента <div class="<?php echo $center_width; ?>">

вариант записи 2

сначала определяем переменные, а потом используем их в коде

Код PHP:
  1.  
  2.  
  3. $l_sidebar = $this->hasWidgetsOn('left-top', 'left-center', 'left-bottom');
  4. $r_sidebar = $this->hasWidgetsOn('right-top', 'right-center', 'right-bottom');
  5.  
  6. if($l_sidebar){
  7.  
  8. if($r_sidebar){
  9. $center_width = 'span6';
  10. }else{
  11. $center_width = 'span9';
  12. }
  13.  
  14. }elseif($r_sidebar){
  15.  
  16. if($l_sidebar){
  17. $center_width = 'span6';
  18. }else{
  19. $center_width = 'span9';
  20. }
  21.  
  22. }else{
  23. $center_width = 'span12';
  24. }
  25.  
  26.  
еще один вариант записи кода (№3)

Спасибо r2 за идею использовать тернарный оператор вместо условий.



if($l_sidebar){
$center_width = $r_sidebar ? 'span6' : 'span9';
}elseif($r_sidebar){
$center_width = $l_sidebar ? 'span6' : 'span9';
}else{
$center_width = 'span12';
}


да, и еще... конечно условия проверки наличия виджетов на позициях можно теперь записать как



<?php if($l_sidebar) {?>
<div class="span3">
<?php $this->widgets('left-top'); ?>
<?php $this->widgets('left-center'); ?>
<?php $this->widgets('left-bottom'); ?>
</div><!--/span-->
<?php } ?>


таким образом можно не только динамически выводить сайдбары но и менять их ширину делая макет 2-6-4 или 3-8-1 или в процентах или сайдбары зафиксировать по ширине а область контента тянуть заполняя страницу, или

эти иЛи ограничиваются лишь Вашей фантазией ....


p.s. прошу не рассматривать этот пост слишком строго zst в первую очередь он написан как задел на будущее и шпаргалка самому hoho себе .

p.p.s редактировал из за того что косячит подсветка кода
Автоматическая подстройка высоты поля ввода для формы быстрого ответа в форуме. | Хак Seo Redirect Url (redirect?url=) для InstantCms2
Теги: instantcms2
Комментарии (12)
Эдька 2 ноября 2012 в 14:09 0
думаю в дальнейшем когда instant 2 будет стабильной версией, то ваша статья не подойдет. а так +
Mr.Andreius 2 ноября 2012 в 14:32 0
в первую очередь он написан как задел на будущее и шпаргалка самому себе .

поживем увидим

код легко адаптируется под нужды 1.10

проверка наличия модуля на позиции

Код PHP:
  1.  
  2. <?php if ($mod_count['sidebar_left']) { ?>
  3. <div class="span3 well">
  4. <?php $inPage->printModules('sidebar_left'); ?>
  5. </div>
  6. <?php } ?>
меняем $this->hasWidgetsOn('позиция1', 'позиция2', 'позиция3') на $mod_count['sidebar_left'] и пользуемся сейчас
Князь Мышкин 2 ноября 2012 в 17:11 -1
Понеслась. Пилим шкуру неубитого релиза =))

На самом деле я сегодня ровно тем же самым занят был - прикручиванием дополнительных полей =)
reload 2 ноября 2012 в 17:52 +4
Князь Мышкин:
Пилим шкуру неубитого релиза
Не согласен!)
Хорошее дело сделал mexanik - составил небольшой урок по основам верстки - многим будет полезно понять логику что да как писать нужно!)
Некоторые хотят, но не могут - а тут бесплатный урок с примером под определенный случай!
Самообразование дело хорошее и полезное)
SE7EN 11 ноября 2012 в 21:43 -1
Интересная публикация, очень понравилось. Но вот у меня возникает вопрс (скорее к разработчикам). В релизе система шаблонов будет изменена или останется эта?
А то потихонтку темку бы для себя начал делать.)))
SE7EN 12 ноября 2012 в 01:39 0
Уменя возник вопрос.
Тут автор поста описывает управление 3мя логическими блоками.
Т.е. имеем блоки A(слева), B(по центру), C(справа).
Если нет блка А, то блок В растягивается и занимает площадь бока А.
Если нет блка С, то блок В растягивается и занимает площадь бока С.
Если нет блков А и С, то блок В растягивается и занимает площадь боков А и С (то есть всю ширину).

Думаю что понятно обьяснил.

Вопрос.
Как сделать: Если нет блока В, то блоки A и С растягиваются и пропроционально занимают всю ширину?

в PHP я совсем не силён (делаю методом научного тыка), поэтому прошк обьяснить на примере.
Mr.Andreius 13 ноября 2012 в 01:03 -1
SE7EN 13 ноября 2012 в 01:04 -1
уже сижу изучаю, спасибо.
Pavel P 23 февраля 2013 в 17:15 0
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
правда фиксированные они здесь

добавлены блоки в дефолтном шаблоне

<div id="bottomblock">
<div class="container">
<div class="leftblock">

<div class="buttom1">
<?php $this->widgets('bottom1'); ?>
</div>
<div class="center">
<?php $this->widgets('bottom2'); ?>
</div>

</div>
<div class="rightblock">
<?php $this->widgets('bottom3'); ?>
</div>

</div>

</div>



и стили всего лишь редактирование styles.css 325 строки

/* ========================================================================== */
/* ========================================================================== */

.sidebar .widget,
.mainbar .widget,
.buttom1 .widget,
.center .widget,
.rightblock .widget {
margin-bottom: 15px;
background:#FFF;
border:1px solid #FFF;
border-radius: 6px;
box-shadow: 0 0 4px #999;
}

.sidebar .widget > .title,
.mainbar .widget > .title,
.buttom1 .widget > .title,
.center .widget > .title,
.rightblock .widget > .title{
font-size:16px;
color:#000;
height:40px;
line-height:40px;
background:url("../images/widget-top-bg.jpg") repeat-x;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding-left: 15px;
text-shadow:0 1px 1px #FFF;
}

.sidebar .widget > .body,
.mainbar .widget > .body,
.buttom1 .widget > .body,
.center .widget > .body,
.rightblock .widget > .body{
line-height: 24px;
padding:15px;
}

.sidebar .widget:last-child,
.mainbar .widget:last-child,
.buttom1 .widget:last-child,
.center .widget:last-child,
.rightblock .widget:last-child {
margin-bottom: 0;
}

/* ========================================================================== */
/* ========================================================================== */
Pavel P 23 февраля 2013 в 17:05 0
Хотелось бы создать свой блог, но только появился в Вашем сообществе(кармы не хватает
), не будем мешать разработчикам, хотелось бы к Вам механик обратиться и давайте частично развивать разработку хотя бы шаблонов для 2-й ветки. Ну начиная с дефолтных (buttom 1,2,3 которые не прописаны) и этого(не заканчивая)
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
Pavel P 23 февраля 2013 в 17:20 0
А вот по этому даю полный scheme.html

<table>
<tr>
<td colspan="3" >
{block:LANG_PAGE_HEADER}
{position:toppanel} </td>
</tr>
</table>
<table>
<tr>
<td colspan="3">
{position:mainmenu}
</td>
</tr>
</table>
<table>
<tr>
<td colspan="2">
{position:header} </td>
</tr>
</table>
<table>
<tr>
<td width="70%">
{position:title}
</td>
<td width="30%">
{position:search}
</td>
</tr>
</table>
<table>
<tr>
<td width="33%">
{position:top1}
</td>
<td width="">
{position:top2}
</td>
<td width="33%">
{position:top3}
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" rowspan="3">
{position:left-top}
{position:left-center}
{position:left-bottom} </td>
<td width="" colspan="2">
{position:innertop} </td>
<td width="25%" rowspan="3">
{position:right-top}
{position:right-center}
{position:right-bottom} </td>
</tr>
<tr>
<td colspan="2">
{position:center-top}
{block:LANG_PAGE_BODY}
{position:center-bottom} </td>
</tr>
<tr>
<td width="25%">{position:innerbuttom1}</td>
<td width="25%">{position:innerbuttom2}</td>
</tr>
</table>
<table>
<tr>
<td colspan="3" >
{position:middle}
</td>
</tr>
</table>
<table>
<tr>
<td width="33%">
{position:buttom1}
</td>
<td width="">
{position:buttom2}
</td>
<td width="33%">
{position:buttom3}
</td>
</tr>
</table>
<table>
<tr>
<td width="25%">
{position:footer1}
</td>
<td width="25">
{position:footer2}
</td>
<td width="25%">
{position:footer3}
</td>
<td width="25%">
{position:footer4}
</td>
</tr>
</table>
<table>
<tr>
<td colspan="3" >
{position:copyright}
</td>
</tr>
</table>
Pavel P 23 февраля 2013 в 17:18 0
Вот почему бы и хотелось бы отдельную ветку, потому что делов много и не ждать ребят пока они доделают а что-то делать самим всей толпой