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

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

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



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

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

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

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

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

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


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

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



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

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

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

  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');
дает нам возможность проверить есть ли назначенные на позиции виджеты
используя проверки мы и определяем какую ширину задать для области контента.

применяем

  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.  
если виджетов нет, то приведенный ниже код вообще не будет выведен, что соответствует полному отсутствию сайдбара

  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

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

  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 редактировал из за того что косячит подсветка кода
0
Эдька Эдька 11 лет назад #
думаю в дальнейшем когда instant 2 будет стабильной версией, то ваша статья не подойдет. а так +
0
Mr.Andreius Mr.Andreius 11 лет назад #
в первую очередь он написан как задел на будущее и шпаргалка самому себе .

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

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

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

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

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

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

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

в PHP я совсем не силён (делаю методом научного тыка), поэтому прошк обьяснить на примере.
-1
Mr.Andreius Mr.Andreius 11 лет назад #
-1
SE7EN SE7EN 11 лет назад #
уже сижу изучаю, спасибо.
0
Pavel P Pavel P 11 лет назад #
""
правда фиксированные они здесь

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

<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;
}

/* ========================================================================== */
/* ========================================================================== */
0
Pavel P Pavel P 11 лет назад #
Хотелось бы создать свой блог, но только появился в Вашем сообществе(кармы не хватает
), не будем мешать разработчикам, хотелось бы к Вам механик обратиться и давайте частично развивать разработку хотя бы шаблонов для 2-й ветки. Ну начиная с дефолтных (buttom 1,2,3 которые не прописаны) и этого(не заканчивая)
""
0
Pavel P Pavel P 11 лет назад #
А вот по этому даю полный 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>
0
Pavel P Pavel P 11 лет назад #
Вот почему бы и хотелось бы отдельную ветку, потому что делов много и не ждать ребят пока они доделают а что-то делать самим всей толпой

Еще от автора

Хак Seo Redirect Url (redirect?url=) для InstantCms2
Вы тоже по ночам не спите, ломая голову как закрыть внешние ссылки от индексации что-бы показатели сайта не утекали к реципиентам и сайт потерял привл
Автоматическая подстройка высоты поля ввода для формы быстрого ответа в форуме.
Наверное все обращали внимание, что при написании длинных постов в блогах, поле ввода не имеет полосы прокрутки и автоматически подстраивается под тек
Редактирование аватаров пользователей Администратором
После установки Instant CMS начал знакомство с функционалом системы. Был приятно удивлен тем, что админ не может изменять аватар пользователя.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.