Шаблон своими руками. Часть 4...

2252
Поскольку вопросы имеют место быть, хочу прояснить свое отношение к теме шаблонов под ICMS-2.
Изучать структуру, которая еще 300 раз может поменяться и говорить о том, чего еще нет, лично я не вижу никакого смысла. К тому же разработчики обещали подготовить документацию, в которой наверняка будет уделено какое-то внимание и этой проблеме тоже. Поживем – увидим. Всему свое время. Естественно это только мое мнение и я никоим образом не собираюсь его кому бы то ни было навязывать. Действуйте так, как считаете нужным. Ну а я пока что посижу на версии 1.10 и продолжаю рассказывать, основываясь именно на ней.

В прошлой части мы остановились на том, что для полного счастья нам нужно каким-то образом подсчитывать выведенные позиции и вроде бы даже нашли способ как это сделать. Но это только на первый взгляд. Зайдите в админку и, убедившись, что у вас подключены все 4 позиции футера попробуйте в одну из этих позиций вывести еще один модуль. К примеру, давайте в позицию footer_d выведем еще и header.

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Теперь вернитесь к сайту и обновите окно браузера... Счастье ушло так же быстро, как и пришло. Вместо ожидаемой 4 счетчик позиций вывел число 5, что явно не соответствует действительности. Почему же так происходит.

А дело в том, что для организации счетчика мы использовали функцию countModules(), которая на самом деле возвращает не логическое значение, а число - количество модулей на позицию.

Код PHP:
  1. public function countModules($position){
  2. ........................
  3.  
  4. return sizeof($mods);
  5. }
Иными словами все это время мы подсчитывали не количество заполненных позиций, а количество модулей выведенных в эти позиции. Ошибка конечно принципиальная, но достаточно легко поправимая. Нужно всего лишь перехватить возвращаемый функцией числовой тип и преобразовать его в тип логический, то есть привести результат к так называемому булеву типу. Тогда в итоге мы получим как раз то, что нужно, только одно из двух возможных значений - true или false, а все остальное за нас сделает php.

Код PHP:
  1. public function countModules($position){
  2. ........................
  3.  
  4. return (boolean)sizeof($mods);
  5. }
Вот теперь с точки зрения логики все работает правильно, осталось разобраться только с одной маленькой проблемой. Дело в том, что мы переписали оригинальную функцию, что вообще то идея плохая, так как она может использоваться где то еще. Поэтому давайте поступим очень просто - Во-первых, вернем все до первоначального состояния, а во-вторых, в этом же классе допишем свою функцию, в которой и выполним все эти преобразования.

Предположим, что называться она будет isMod, и все что она будет делать, так это отбирать у countModules результат и возвращать его нам в виде логической true или false. Ну а чтобы не потеряться при возможном обновлении, давайте добавим ее в самый конец файла. Сразу перед последней закрывающей скобкой дописываем:

Код PHP:
  1. /* Проверяем заполнение позиции */
  2. public function isMod($position){
  3. if ($this->countModules($position))
  4. return true;
  5. }
После чего сохраняем файл и на всякий случай переходим к template.php для проверки. Если все сделано правильно, то заменив все обращения к countModules на обращение к нашей функции

Код PHP:
  1. $a = $inPage->isMod('footer_a');
  2. $b = $inPage->isMod('footer_b');
  3. $c = $inPage->isMod('footer_c');
  4. $d = $inPage->isMod('footer_d');
мы при абсолютно любой комбинации модулей в позициях футера, должны получать на счетчике число от 0 до 4. Что собственно и требовалось нам с самого начала......

На этом экскурс на тему "откуда что берется и для чего это нужно" закончен и самое время определиться с шириной шаблона. Впрочем рассказывать здесь особо нечего, так как достаточно очевидно, что этот параметр напрямую зависит от конкретных задач. А поскольку в данном случае задача только одна – объяснить что к чему, пусть наш шаблон имеет стандартные 980px по умолчанию и чтобы показать как работают медиа запросы - 1200px для больших мониторов. Порог переключения выставлю в 1300px. Примерно вот так:

Код CSS:
  1. .wrapper {width:980px }
  2. @media screen and (min-width:1300px){.wrapper {width:1200px}}
Вот собственно и все, надеюсь это понятно, переходим к позиции под названием topPanel.

Как я уже писал ранее позиция эта особая и вполне возможно, бесполезная для большинства шаблонов. Единственная причина, по которой я ее ввел и рассматриваю здесь, банальна – эта позиция является типичным примером реализации вот тех самых фиксированных выезжающих панелей, которые обычно используются для форм обратной связи, авторизации и т.д. Просто в данном случае я решил расположить эту панель вверху.

В части html все устроено очень просто:

Скрытый текст виден только зарегистрированным пользователям


Что же касается стилей, то во избежание бардака было бы не лишним создать себе с помощью комментариев некую структуру в файле style.css. Правил тут естественно никаких нет, поэтому никого не слушайте и делайте так, как удобнее будет именно вам. Можете вообще все это раскидать по разным файлам, полтора лишних запроса погоды не сделают. Как бы там ни было, а я определил себе несколько основных сегментов. Вот таким образом:

Код CSS:
  1. /* ***************************************************************************** */
  2. /* =============================== Typography ================================== */
  3. /* ***************************************************************************** */
  4. ---------- Шрифты, формы и т.д.
  5. /* ***************************************************************************** */
  6. /* ================================= Layout ==================================== */
  7. /* ***************************************************************************** */
  8. ---------- Каркас шаблона
  9. /* ***************************************************************************** */
  10. /* ================================= Modules =================================== */
  11. /* ***************************************************************************** */
  12. ---------- Стили для модулей
  13. /* ***************************************************************************** */
  14. /* ================================ Components ================================= */
  15. /* ***************************************************************************** */
  16. ---------- Стили для компонентов
Если все вышеизложенное понятно, то во-первых, не забудьте в папку img положить соответствующие картинки, а во-вторых, в разделе “Layout” своего файла style.css пишем следующее:

Скрытый текст виден только зарегистрированным пользователям


А чтобы увидеть всю картину более-менее адекватно (ведь для модулей у нас нет ни одного правила), давайте в самом верху файла, прямо перед секцией reset, добавим в качестве временных мер еще пару строк:

Код CSS:
  1. #topPanel,#topPanel a{color:#fff}
  2. #topPanel .module{padding:25px}
На этом со стилями закончили, осталось обеспечить всей этой конструкции работоспособность. Сделать это можно было бы и на css, но как всегда мешает IE, поэтому напишем простенький код на JavaScript:

Скрытый текст виден только зарегистрированным пользователям


Естественно прямо в таком виде добавлять код не рационально, поэтому в файл include.js вставляем тот же код, но уже в сжатом виде:

Скрытый текст виден только зарегистрированным пользователям



Вот и все. Позиция под названием topPanel полностью готова, можете проверять. А обо всем остальном в следующий раз...
Шаблон своими руками. Часть 3... | Шаблон своими руками. Часть 5...
Комментарии (25)
eoleg 11 ноября 2012 в 17:48 +1
Спасибо Паша, в новогодний отпуск попробую что нибудь склепать!
picaboo 11 ноября 2012 в 21:15 0
автор похоже совсем сник smile следующий урок будет типа - ну вот вам файл css вам же все здесь понятно? а то я и сам не понимаю че тут понаписано :)
Pasha 11 ноября 2012 в 21:44 +3
picaboo, я не совсем понял ваш тонкий юмор. Вы собираетесь что-то делать самостоятельно и при этом вам лень посмотреть в одном из тысяч справочников что означает то или иное правило css? Или вы знаете как сделать лучше? Так поделитесь со всеми, в чем же дело? Я между прочим на все это трачу свои силы и время, причем не требуя ровным счетом ничего взамен.

p.s. И я прекрасно понимаю о чем "тут понаписано"
picaboo 11 ноября 2012 в 22:05 0
ок. тогда встречный вопрос. а шаблон в вашем понимании это что? набор html разметки? html + css ? html + css + php (smarty) ? какой из этих трех? или иной набор исходных составляющих?
eoleg 11 ноября 2012 в 22:18 +1
picaboo да не важно это пока, этот блог полезен например мне так как мне нужно начать с чего то и понять какие то моменты которые вам кажутся может элементарными.
Я думаю Паша не претендует на учебник и на освещение всех тонкостей и соблюдения каких то правил.
picaboo 12 ноября 2012 в 14:23 0
я про учебник и не говорил smile просто на фоне достаточно дотошно разжеванных вопросов с js и php, что для шаблонов инстанта весьма важно, особенно php. В этом уроке начинает уходить в сторону от css

мне не сложно, могу поверх написать
Код CSS:
  1.  
  2. height: 200px; /* Высота блока */
  3. width: 200px; /* Ширина блока */
  4. overflow: auto; /* Добавляем полосы прокрутки */
  5. padding-left: 15px; /* Отступ от текста слева */
  6. background: url(images/hand.png) repeat-y #fc0; /* Цвет фона,
  7.   путь к фоновому изображению и
  8.   повторение фона по вертикали */
  9.  
просто основная масса вопросов на форуме часто и не доходит до разметки, утыкаясь в базовые основы css, многие дальше смены картинки в шапке не идут. 90% сайтов на инстанте - унылы по причине дефолтного шаблона с максимум измененной шапкой.
Pasha 12 ноября 2012 в 15:44 +4
А почему вы не допускаете мысли, что делаю я так специально, чтоб заставить заинтересованных пользоваться не только Ctrl+C и Ctrl+V, но и своими мозгами?

Тогда уж и по-поводу отсутствия прямого указания на файл, к котором нужно произвести замену скажите... Да чего там, давайте просто дадим народу готовый шаблон, а тему переименуем во что-то типа "Зачем делать что-то самому, если есть готовое!"

p.s. Я НЕ ХАМЛЮ, я просто выражаю свои мысли по этому поводу. Если бы действительно была необходимость в том, что нужно что-то подробно объяснить в плане css я бы это непременно сделал. Пока такой необходимости нет! Все три с половиной правила более чем доступно описаны в любой книжке.
picaboo 12 ноября 2012 в 17:09 -2
Ну тогда вероятно мой ироничный комментарий был не совсем корректно сформулирован и понят в штыки. Я как раз за то что бы народ начал думать, а не копипастить. Просто любой кусок кода который не разжеван - скопипастят и даже не будут пытаться подумать зачем и почему именно так ;( А вы сейчас как раз закладываете основу верстки шаблона, нам по сути нужны три дива( хеадер, контент и футер) и на их основе путем шаманства с ксс уже понимание того каким будет какой див и как позиционироваться в шаблоне, как будут себя вести вложенные и наследуемые классы и т.д. Вполне вероятно что тороплю события и это тема следующего урока ;)
Pasha 12 ноября 2012 в 17:50 +2
А вот это уже абсолютная истина. Из поста в пост я, по мере своих возможностей, стараюсь усложнить задачу ровно настолько, чтобы человек, не понявший предыдущую часть просто не смог воспроизвести конечный результат. Как следствие автоматически отсеются все, кто хочет все и сразу. Те же, кто реально хочет чему-то научиться получат свою долю полезной информации и надеюсь сделают правильные выводы. Вот такой у меня план и пока что у меня это выходит.

Если же по существу, то до стилей как таковых я вообще еще не добрался, первоочередная задача сформировать логику. Просто fixed topPanel мне здорово мешала в дальнейшем процессе, вот я и закрыл одним легким движением эту тему.
picaboo 12 ноября 2012 в 19:55 -1
ну так я и про это же. то что прописанно в css для topPanel большинство просто не поняли, на общем фоне урока это слегка выбивается. потому и возник вопрос, что либо автор сам не совсем понял что написал, либо код для него настолько простой, что он не видит сложности для всех остальных. возможно стоило кинуть пару комментариев, что бы было понятно на любом уровне, уроки то для новичков позиционируются. я без наезда, нужное дело делаете :)
Pasha 12 ноября 2012 в 20:03 +1
Ок. Конструктивное замечание по возможности будет учтено.
Pasha 12 ноября 2012 в 04:25 0
picaboo, я не задавал вам никаких вопросов требующих ответа. С какой тихой радости вы решили, что я собираюсь вам что-то доказывать, а тем более отвечать на более, чем странные встречные вопросы...
Есть что сказать по существу - говорите, в ином случае чего зря воздух сотрясать?
picaboo 12 ноября 2012 в 14:16 -1
так легко перейти на хамство, когда задают неудобные вопросы. ну да не суть, не утруждайтесь ответом. :)
Pasha 12 ноября 2012 в 15:00 0
Ну от чего же, могу и ответить.

Во-первых, не нужно передергивать. Хамить вам или кому-то еще у меня и в мыслях нет. Просто я привык выражать их коротко и ясно.
Во-вторых, что и как я понимаю не имеет никакого значения. Есть факт - шаблон любой CMS это html + css + js + один из серверных языков + дизайн...
В-третьих, что дальше? К чему был задан этот "неудобный вопрос"? Иными словами повторяю свой вопрос, который вы почему-то воспринимаете как хамство - вам есть что сказать по существу?
AlLar 12 ноября 2012 в 08:49 +4
Pasha, продолжайте в том же духе!
Очень полезно! Особенно для таких новичков как я сам!
Ждём!!!
Олег 12 ноября 2012 в 18:53 +1
Ждем продолжения.
Полезно кто начинает.
Andrey37 13 ноября 2012 в 16:03 +1
Ради этого внес свое пожертвование, после чего мне разрешили зарегистрироваться. Мечтаю у себя поменять дизайн. Я этим никогда не занимался и делал все методом тыка :). А тут все понятно! Что не пойму спрошу. Очень нужно и очень полезно.
Azura 14 ноября 2012 в 03:03 -1
Повторюсь, мне как художнику и знающему ЦСС и ХТМЛ этот учебник безумно полезен!!!! Пашенька, я вас люблю, спасибо!!!! :D
Pasha 14 ноября 2012 в 13:49 0
Спасибо конечно, только как совершенно верно подметил eoleg чуть выше, до учебника это явно не дотягивает smile Воспринимайте это не более чем кратким пособием для желающих чему-то научиться, но не знающих с чего начать. К тому же в данном случае некоторые вещи делаются далеко не самым оптимальным способом... Просто по другому я объяснить не смогу...
Azura 25 ноября 2012 в 14:12 0
Дошла я до счётчика модулей и впала в ступор. Функцию-то куда вписывать? =)
Azura 25 ноября 2012 в 14:18 0
Кстати, вот этот код:
Код PHP:
  1. <?php if ($inPage->isMod('topPanel')){ ?>
Невалидный, а как исправить не знаю((( Прописывая его, у меня перестаёт работать темплейт(((
Mr.Andreius 25 ноября 2012 в 14:38 +1
конечно
надо как минимум закрыть условие

<?php if ($inPage->isMod('topPanel')){ ?>
<!-- тут чистый html -->
<?php } ?>
Mr.Andreius 25 ноября 2012 в 14:49 +1
или так

<?php if ($inPage->isMod('topPanel')){
// тут можно написать php комментарий
/**
* или такой комментарий
*/
echo '<a href=""> </a>';

} ?>
Pasha 25 ноября 2012 в 15:22 +1
1. Есть основное правило при написании любого кода - что-то открыл, тут же это что-то закрыл.... Вы же пытаетесь вести запись построчно, проверяя при этом работоспособность. Иными словами код <?php if ($inPage->isMod('topPanel')){ ?> сам по себе естественно выдаст ошибку, ведь это только открывающая часть конструкции. Посмотрите внимательно и вы увидите, что в самом низу, непосредственно перед тегом </section> есть и вторая, закрывающая эту конструкцию часть - <?php } ?>
2. Очевидно не нужно игнорировать теорию и поискать функцию countModules, тогда вопрос "Функцию-то куда вписывать?" отпадет сам по себе.
3. Если уж совсем все плохо, то напишите в личку и я скину вам свои файлы. Посмотрите как все то же самое сделано у меня.
Pasha 25 ноября 2012 в 15:24 0
Странно как-то два раза отправилось.......