пятница, 8 февраля 2013 г.

Теги шаблона Blogspot (Blogger)

В прошлой статье было задание удалить подписку на Атом. Кто не смог держите ответ:
пониже (или повыше) кода, которым мы отменили показ навигационной панели, введите  код:
.feed-links {
display: none;
}
Это селектор класса (может быть присвоен нескольким элементам), но, вроде бы, больше ничего на пропало.
Сегодня разговор о тегах шаблона блога. Если предыдущими двумя статьями я Вам:
Все мозги разбил на части, все извилины расплел
то к концу статьи все вернется на свои места.

Рассмотрим подробней документ шаблона. Очень похож на HTML документ. Открывается и закрывается тегами <html> </html>, содержит теги <head> и <body>. В раздел <head> пока не трогаем. Там служебная информация для браузера и конструктора.

В теле документа конструктор оперирует с секциями (теги <b:section> и </b:section>), которые делят тело на части: шапка, сайтбары, контент, подвал и пр.

Внутри секций располагаются гаджеты (тег <b:widget>, которые, почерпнув информацию в базе данных, выводят ее на экран.

Конструктор эти теги преобразует в теги <div>, понятные браузеру, с теми же идентификаторами id. Поподробней чуть позднее.
Начнем с тега секции:
<b:section id='main' class='main' maxwidgets="2" showaddelement="no" growth='horizontal'>
...
 </b:section>
Его атрибуты:

  • id - обязательный, уникальный идентификатор (из лат. букв и цифр)
  • class - необязательный, имя класса. Общепринятые: 'navbar', 'header', main', 'sidebar','footer'. Можно назначить свой.
  • maxwidgets - необязательный, разрешенное количество гаджетов в секции. Не указан, то не ограничено.
  • showaddelement - не обязательный, указывает на наличие ссылки Добавить гаджет при редактировании Дизайна. Может принимать два значения "yes" и "no". По умолчанию yes.
  •  growth - необязательный, указывает как расположить гаджеты внутри секции. Значения: 'vertical" и 'horizontal'. Первое по умолчанию.
Секция может содержать только гаджеты! Никаких других кодов!

 Гаджет в шаблоне задается одиночным тегом:
<b:widget id='myList' type='listView' locked="no" titlee="мой список" pageType='all'/>
Его атрибуты:
  • id - обязательный, уникальный идентификатор (из лат. букв и цифр). id может быть изменен только удалением гаджета и созданием нового такого же, но с другим id.
  • type - обязательный, определяет тип гаджета. Типы гаджетов можно посмотреть на вкладке Дизайн --> Добавить гаджет.
  • locked - необязательный, задает блокировку гаджета. Заблокированный гаджет нельзя переместить или удалить в режиме редактирования Дизайн. Возможны значения  "yes" и "no". По умолчанию yes.
  • title - необязательный, выводит заголовок гаджета.
  • pageTypeнеобязательный, указывает тип страницы на которой он выводится. Значения 'all' - на всех страницах, 'archivt' - на архивных, 'main' - на главной, 'item' - в сообщении Первое по умолчанию.
Тег гаджета лишь указывает место куда его поместить. Информация хранится в базе данных и извлекается в момент отображения гаджета.

Этих знаний нам пока хватит, что бы что то подвигать, изменить в шаблоне. Посмотрим все на практике. Заходим Шаблон--> Изменить HTML. Вызываем окно поиска Ctrl + F (появится вверху справа) и вводим <b:section>. У меня 18 секций. В первой гаджет с навигационной панелью:
Мы от нее избавились в предыдущей статье методом CSS. Можно избавиться здесь, закомментировав гаджет или все секцию (заключить тег гаджета в <!-- тег -->). В этом случае
при сохранении шаблона выскакивает предупреждение:
Жму удалить виджеты. Сточка в секции без возвратно исчезает. Круто! С CSS помягче: в любое время можем вернуть. Кстати id для CSS можно было бы взять здесь.
У окна поиска жмем кнопку вниз, переходим к второй секции:
Видим что это секция шапки. В ней два гаджета (виджета). Изначально был один. Второй я
добавил. Как? В Дизайне для этой секции только изменить. Об этом в следующей статье.
Пока на меня найдет вдохновение сами посмотрите другие секции (кн. вниз у поиска). Введите в поиске тег виджета посмотрите на них. Что не поняли, пишите в комментариях или через меню Контакт.
До встречи.



Комментариев нет:

Отправить комментарий

От Вас деловой комментарий - Вам подарок!