В этом посте мы разберём шаблон Blogger с разделом заголовка. Шаблон Blogger состоит из тысячи строк. Это очень трудно понять все линии одновременно. Мой подход заключается в том, чтобы по крупицам порезать шаблон blogger и попытаться понять код.
Раздел заголовка Blogger
В предыдущем посте мы разбирали минимальный код, который может принять Blogger для своего шаблона. Я создал один шаблон с минимальным кодом, который можно сохранить. Код ничего не показывает. Он содержит только объявление XML, <html>, <head>, <skin>, <body> и <section>. Этот шаблон состоит только из 9 строк. Вы можете прочитать статью в моем предыдущем посте.
В этом посте я постараюсь продолжить свое обучение по крупицам. Первым элементом, который должен существовать в блоге, является заголовок.
Как сделать заголовок для шаблона Blogger?
В Blogger есть много виджетов или гаджетов, которые можно поместить в качестве элемента Blogger. Одним из них является виджет заголовка.
Как мы узнали ранее, Blogger нужен хотя бы один раздел в шаблоне блоггера, и мы должны указать идентификатор для этого раздела. Чтобы освежить нашу память, ниже приведен код для шаблона Minimum Code Blogger.
<?xml version=»1.0″ encoding=»UTF-8″ ?>
<html xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>
<head>
<b:skin></b:skin>
</head>
<body>
<b:section id=»header«></b:section>
</body>
</html>
Давайте посмотрим на вкладку «Дизайн» в панели управления Blogger. Мы можем видеть блок favicon и блок заголовка со знаком + и словами «Добавить гаджет».
Блок заголовка исходит из тега раздела, который мы создали ранее в шаблоне Minimum Code Blogger. Вот почему блоггер требует наличие одного раздела в шаблоне блоггера. Мы можем создать еще один блок с тегом раздела. Мы обсудим это позже в другой теме.
Я добавлю виджет заголовка в разделе заголовка. Для этого я нажимаю ссылку Добавить гаджет в макете Blogger.
Если мы посмотрим на дизайн Blogger, то увидим, что в разделе заголовка есть дополнительный элемент. Ниже представлен новый вид макета блога с заголовком для работы.
Как насчет кода? Blogger добавил строку 6 до 76, чтобы установить гаджет заголовка. Подробный код можно увидеть в поле ниже.
Код для гаджета заголовка
<b:widget id=’Header1‘ locked=’false’ title=’Blogger Template With Header Only (Header)’ type=’Header’ visible=’true’>
<b:includable id=’main’>
<b:if cond=’data:useImage’>
<b:if cond=’data:imagePlacement == "BEHIND"’>
<!—
Show image as background to text. You can’t really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don’t force a minimum
width if the user is using shrink to fit.
This results in a margin-width’s worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
—>
<b:if cond=’data:mobile’>
<div id=’header-inner’>
<div class=’titlewrapper’ style=’background: transparent’>
<h1 class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
<b:else/>
<div expr:style=’"background-image: url(/wp-content/uploads/\»» + data:sourceUrl + «\»); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "’ id=’header-inner’>
<div class=’titlewrapper’ style=’background: transparent’>
<h1 class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
</b:if>
<b:else/>
<!—Show the image only—>
<div id=’header-inner’>
<a expr:href=’data:blog.homepageUrl’ style=’display: block’>
<img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + "_headerimg"’ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
</a>
<!—Show the description—>
<b:if cond=’data:imagePlacement == "BEFORE_DESCRIPTION"’>
<b:include name=’description’/>
</b:if>
</div>
</b:if>
<b:else/>
<!—No header image —>
<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
</b:if>
</b:includable>
<b:includable id=’description’>
<div class=’descriptionwrapper’>
<p class=’description’><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id=’title’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<data:title/>
<b:else/>
<a expr:href=’data:blog.homepageUrl’><data:title/></a>
</b:if>
</b:includable>
</b:widget>
Я думаю, этого пока достаточно. Позже мы попытаемся понять значение каждого кода выше.
