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

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

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

что бы сайдбары показывались динамически, в зависимости от потребностей.

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

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

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

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

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

 
<table>
    <tr>
        <td colspan="3">
            {block:LANG_PAGE_HEADER}
            {position:navigation}
            {position:top}
        </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%">
            {position:left-top}
            {position:left-center}
            {position:left-bottom}
        </td>
        <td width="">
            {position:center-top}
            {block:LANG_PAGE_BODY}
            {position:center-bottom}
        </td>
        <td width="25%">
            {position:right-top}
            {position:right-center}
            {position:right-bottom}
        </td>
    </tr>
</table>
<table>
    <tr>
        <td width="33%">
            {position:bottom1}
        </td>
        <td width="">
            {position:bottom2}
        </td>
        <td width="33%">
            {position:bottom3}
        </td>
    </tr>
</table>
<table>
    <tr>
        <td width="50%">
            {position:bottom-left1}
        </td>
        <td width="50%">
            {position:bottom-right2}
        </td>
    </tr>
    <tr>
        <td colspan="3">
            {position:footer}
            {block:LANG_PAGE_FOOTER}
        </td>
    </tr>
</table>

получаем такую красоту

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

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

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

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

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

 
 
<?php
 
        if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')){
 
                if($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')){
                    $center_width = 'span6';
                }else{
                    $center_width = 'span9';
                }
 
            }elseif($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')){
 
                if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')){
                    $center_width = 'span6';
                }else{
                    $center_width = 'span9';
                }
 
            }else{
                $center_width = 'span12';
            }
    ?>

вызов в шаблоне $this->hasWidgetsOn('позиция1', 'позиция2', 'позиция3');
дает нам возможность проверить есть ли назначенные на позиции виджеты
используя проверки мы и определяем какую ширину задать для области контента.

применяем

 
 
<div class="row-fluid">
 
    <?php if($this->hasWidgetsOn('left-top', 'left-center', 'left-bottom')) {?>
          <div class="span3">
                <?php $this->widgets('left-top'); ?>
                <?php $this->widgets('left-center'); ?>
                <?php $this->widgets('left-bottom'); ?>
          </div><!--/span-->
    <?php } ?>
 
    <div class="<?php echo $center_width; ?>">
        <div class="row-fluid">
            <div class="span12 well">
                <?php $this->widgets('center-top'); ?>
                <?php if ($this->isBody()){ ?>
                    <div class="page-body">
                        <?php $this->body(); ?>
                    </div>
                 <?php } ?>
                 <?php $this->widgets('center-bottom'); ?>
             </div><!--/span-->
          </div><!--/row-->
       </div><!--/span-->
 
       <?php if($this->hasWidgetsOn('right-top', 'right-center', 'right-bottom')) {?>
           <div class="span3">
                <div class="sidebar">
                     <?php $this->widgets('right-top'); ?>
                     <?php $this->widgets('right-center'); ?>
                     <?php $this->widgets('right-bottom'); ?>
                </div>
           </div><!--/span-->
      <?php } ?>     
 
</div><!--/row-->

если виджетов нет, то приведенный ниже код вообще не будет выведен, что соответствует полному отсутствию сайдбара

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

аналогично и для правого сайдбара

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

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

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

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

 
 
$l_sidebar = $this->hasWidgetsOn('left-top', 'left-center', 'left-bottom');
$r_sidebar = $this->hasWidgetsOn('right-top', 'right-center', 'right-bottom');
 
           if($l_sidebar){
 
                if($r_sidebar){
                    $center_width = 'span6';
                }else{
                    $center_width = 'span9';
                }
 
            }elseif($r_sidebar){
 
                if($l_sidebar){
                    $center_width = 'span6';
                }else{
                    $center_width = 'span9';
                }
 
            }else{
                $center_width = 'span12';
            }

еще один вариант записи кода (№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>
<?php } ?>

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

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

p.s. прошу не рассматривать этот пост слишком строго zst

в первую очередь он написан как задел на будущее и шпаргалка самому hoho

себе .

p.p.s редактировал из за того что косячит подсветка кода

Хак Seo Redirect Url (redirect?url=) для InstantCms2

Автоматическая подстройка высоты поля ввода для формы быстрого ответа в форуме.

instantcms2

12 комментариев

Реклама #

Эдька 12 лет назад #

думаю в дальнейшем когда instant 2 будет стабильной версией, то ваша статья не подойдет. а так +

Mr.Andreius 12 лет назад #

в первую очередь он написан как задел на будущее и шпаргалка самому себе .

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

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

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

Код PHP:

 
<?php if ($mod_count['sidebar_left']) { ?>
      <div class="span3 well">
          <?php $inPage->printModules('sidebar_left'); ?>
      </div>
<?php } ?>

меняем $this->hasWidgetsOn('позиция1', 'позиция2', 'позиция3') на $mod_count['sidebar_left'] и пользуемся сейчас

-1

Князь Мышкин 12 лет назад #

Понеслась. Пилим шкуру неубитого релиза =))

На самом деле я сегодня ровно тем же самым занят был - прикручиванием дополнительных полей =)

reload 12 лет назад #

Князь Мышкин:

Пилим шкуру неубитого релиза

Не согласен!)
Хорошее дело сделал mexanik - составил небольшой урок по основам верстки - многим будет полезно понять логику что да как писать нужно!)
Некоторые хотят, но не могут - а тут бесплатный урок с примером под определенный случай!
Самообразование дело хорошее и полезное)

-1

SE7EN 12 лет назад #

Интересная публикация, очень понравилось. Но вот у меня возникает вопрс (скорее к разработчикам). В релизе система шаблонов будет изменена или останется эта?
А то потихонтку темку бы для себя начал делать.)))

SE7EN 12 лет назад #

Уменя возник вопрос.
Тут автор поста описывает управление 3мя логическими блоками.
Т.е. имеем блоки A(слева), B(по центру), C(справа).
Если нет блка А, то блок В растягивается и занимает площадь бока А.
Если нет блка С, то блок В растягивается и занимает площадь бока С.
Если нет блков А и С, то блок В растягивается и занимает площадь боков А и С (то есть всю ширину).

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

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

в PHP я совсем не силён (делаю методом научного тыка), поэтому прошк обьяснить на примере.

-1

Mr.Andreius 12 лет назад #

ответил тут - http://instantcms.ru/forum/thread12682-1.html#108639

-1

SE7EN 12 лет назад #

уже сижу изучаю, спасибо.

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

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

Pavel P 11 лет назад #

Хотелось бы создать свой блог, но только появился в Вашем сообществе(кармы не хватает
), не будем мешать разработчикам, хотелось бы к Вам механик обратиться и давайте частично развивать разработку хотя бы шаблонов для 2-й ветки. Ну начиная с дефолтных (buttom 1,2,3 которые не прописаны) и этого(не заканчивая)

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>

Pavel P 11 лет назад #

Вот почему бы и хотелось бы отдельную ветку, потому что делов много и не ждать ребят пока они доделают а что-то делать самим всей толпой

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

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

Реклама #

Эдька 12 лет назад #

Mr.Andreius 12 лет назад #

Князь Мышкин 12 лет назад #

reload 12 лет назад #

SE7EN 12 лет назад #

SE7EN 12 лет назад #

Mr.Andreius 12 лет назад #

SE7EN 12 лет назад #

Pavel P 11 лет назад #

Pavel P 11 лет назад #

Pavel P 11 лет назад #

Pavel P 11 лет назад #

Еще от автора

Хак Seo Redirect Url (redirect?url=) для InstantCms2

Автоматическая подстройка высоты поля ввода для формы быстрого ответа в форуме.

Редактирование аватаров пользователей Администратором

InstantCMS Team

О проекте

Поддержка

Дополнения