Раздел заголовка Blogger
В этом посте мы разберём шаблон Blogger с разделом заголовка.
В этом посте мы разберём шаблон Blogger с разделом заголовка. Шаблон Blogger состоит из тысячи строк. Это очень трудно понять все линии одновременно. Мой подход заключается в том, чтобы по крупицам порезать шаблон blogger и попытаться понять код.
Раздел заголовка Blogger
В предыдущем посте мы разбирали минимальный код, который может принять Blogger для своего шаблона. Я создал один шаблон с минимальным кодом, который можно сохранить. Код ничего не показывает. Он содержит только объявление XML, <html>, <head>, <skin>, <body> и <section>. Этот шаблон состоит только из 9 строк. Вы можете прочитать статью в моем предыдущем посте.Как сделать заголовок для шаблона Blogger?
В Blogger есть много виджетов или гаджетов, которые можно поместить в качестве элемента Blogger. Одним из них является виджет заголовка.Как мы узнали ранее, Blogger нужен хотя бы один раздел в шаблоне блоггера, и мы должны указать идентификатор для этого раздела. Чтобы освежить нашу память, ниже приведен код для шаблона Minimum Code Blogger.
<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.
Код для гаджета заголовка
<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(\"" + 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>