Никому не нравится разбираться в том, что сделал кто-то другой. Это такие нервы - настраивать скачанный где-то шаблон под свой вкус и свои нужды. Каждый блоггер, по-моему, время от времени задумывался как было бы здорово состряпать свой собственный шаблон. И скажу я вам - это совсем неплохая идея! Сегодня мы попробуем эту идею легко и быстро воплотить в жизнь.
В этой статье я расскажу обо всем, что я узнал, создавая свой шаблон для блога, который вы сейчас читаете. Как часто бывает, когда имеешь дело с веб-технологиями, все самые лучшие вещи я почерпнул из англоязычных ресурсов. Я рад, что учил английский больше, чем HTML/CSS :).
Итак, если мы с вами собрались это сделать, предлагаю для начала пройти этих несколько предварительных шагов:
Рис. 1 - Голый шаблон после предварительной очистки.
Для чего нужны теги
Секция резервирует определенное место в шаблоне. Каждая секция имеет открывающий и закрывающий тэги, это выглядит примерно вот так:
Примечание! Секция может содержать только виджеты. Чтобы поместить дополнительный код внутри секции, разделите ее на две или более новых секций.
Виджет представляет собой одинарный тег, который по-сути является заполнителем определенного места в шаблоне и указывает системе Blogger, как он должен быть обработан на вкладке Элементы страницы.
Вот некоторые примеры, один для заголовка страницы, второй для списка и третий для архива блога:
Более подробно в справке - Blogger Теги элементов страницы в шаблоне.
А вот самый простой код, который можно загрузить как шаблон Blogger. Он основан на шаблоне Simple.
Если вы попытаетесь загрузить этот шаблон без тега
Теперь пришло время загрузить наш самый минималистичный в мире шаблон. Для этого перейдите на вкладку "Шаблон" и нажмите "Изменить HTML". Очистите поле редактора кода Blogger, поместив в него курсор и нажав CTRL+A и DELETE. Затем скопируйте в буфер код с моего примера и вставьте его в пустое поле редактора. Жмите "Сохранить шаблон". Теперь жмите "Просмотреть блог"!
...Упс. Пустая страница. Что за черт?
Все дело в том, что с некоторого времени Blogger больше не создает автоматически блок с сообщениями блога. Мы должны теперь сделать это сами, чтобы увидеть наш пост, который мы раньше опубликовали. Вставим в нашу секцию еще одну строчку кода с виджетом постов:
Ну а наш блог после перезагрузки страницы просмотра будет иметь вот такой незатейливый вид:
Ок, давайте теперь создадим еще одну секцию и поместим в нее виджет с хедером. Сделаем мы это с помощью следующих строчок кода, вставив их сразу после тега
Сделайте все как на рисунке.
Для того, чтобы зафиксировать секцию в определенном секторе макета Blogger используються идентификаторы, например
Теперь нам доступна опция "Добавить гаджет" и мы можем смело установить шапку нашего блога:
Давайте сейчас пойдем в HTML редактор Blogger и отыщем наш виджет заголовка страницы прямо под тегом
Можно в качестве меры предосторожности - чтобы предотвратить удаление заголовка, если мы вдруг с бодуна начнем менять что-то в шаблоне - установить атрибут хедера
Дочитав до этого места, вы вероятно уже сложили представление о том, как работает код в системе Blogger и о его главных паттернах. Мы создаем разделы-секции в шаблоне и указываем их атрибуты. Затем на странице макета вкладки "Дизайн" мы можем добавлять виджеты используя кнопку "Добавить гаджет" в той секции, которая нам нужна, и которую мы предварительно создали. Конечно, нам не обязательно использовать кнопку "Добавить гаджет", мы можем сделать это также и вручную, кодируя прямо в HTML коде нашего шаблона.
К примеру, мы хотим добавить HTML / Javascript виджет внизу блока сообщений. Сделаем это легко и просто, добавим код, создающий новый виджет (выделен синим) в секцию с постами блога, ниже виджета сообщений:
Теперь проверим страницу макета. И что мы увидим? Наш HTML / JavaScript виджет на месте!
Удалить виджет вы можете как вручную, так и воспользовавшись панелью Blogger на вкладке "Дизайн".
Давайте теперь займемся остальными секциями нашего шаблона. Обычно дизайн шаблона имеет Хедер, Меню, Контент-блок, Сайдбар и Футер. Два из перечня у нас уже имеются. Добавим теперь остальные.
*Некоторые замечания относительно установки секции сайдбара в шаблон.
Исследуя внимательно шаблон Simple, мы заметим, что для создания сайдбара в нем не использован тег
И еще один:
Мы не будем сейчас вдаваться во все эти подробности с тегами
И вот, после добавления всех отсутствующих секций и нужных нам виджетов, мы имеем приблизительно такую структуру кода:
Как результат мы получили совершенно голый шаблон, в нем не присутствует никаких стилей оформления, поэтому наш блог выглядит как простой набор текста в один столбец:
Ну что ж, теперь мы разобрались с самыми базовыми элементами шаблона Blogger - секциями и виджетами. Чтобы двигаться дальше по пути создания своего собственного и неповторимого дизайна блога, нам нужно будет освоить применение разметки макета и стилей с помощью технологий HTML и CSS. Поверьте, это не сложно и очень увлекательно. Намного более увлекательно, чем то, чем мы занимались в этом руководстве.
Возможно некоторые моменты я описал неполно и у вас все еще возникают вопросы. Пишите в комментариях, получилось ли у вас сделать свою заготовку шаблона, и хотели бы вы и дальше продолжить дизайнить уже чистовой вариант своей собственной темы для блога.
Ждите новых статей в этом блоге с подробными примерами и инструкциями "шаг за шагом". А чтобы не пропустить обновления, подписывайтесь с помощью електронной почты и становитесь постоянными читателями Blogger Cafè. На сегодня все.
В этой статье я расскажу обо всем, что я узнал, создавая свой шаблон для блога, который вы сейчас читаете. Как часто бывает, когда имеешь дело с веб-технологиями, все самые лучшие вещи я почерпнул из англоязычных ресурсов. Я рад, что учил английский больше, чем HTML/CSS :).
Итак, если мы с вами собрались это сделать, предлагаю для начала пройти этих несколько предварительных шагов:
- Создайте новый блог в качестве тестового и выберите шаблон Simple. На нем мы и будем сначала учиться. Не следует пробовать сразу на живых блогах, так как можно легко привнести туда беспорядок.
- Сделайте бэкап и загрузите копию шаблона к себе на диск (Шаблон > Резервное копирование / восстановление), прежде чем мы начнем копаться в нем. Он нам понадобится как справочная информация.
- Зайдите на вкладку Дизайн вашего тестового блога и удалите все виджеты (Профиль, Архив, Списки...), кроме Сообщений Блога. Чтобы удалить виджеты Заголовка и Атрибуции, нажмите Шаблон > Изменить HTML и ,воспользовавшись поиском (CTRL+F), найдите
Header1
. В этой же строке кода удалите параметрlocked='true'
или поменяйте его значение наlocked='false'
. То же самое сделайте с Атрибуцией, отыскав строку кода сAttribution1
. Теперь можно удалить эти виджеты напрямую из макета на вкладке "Дизайн". После этого они исчезнут из вашего макета шаблона. Если таким путем не получится (такое бывает), то не переживайте - когда мы поменяем код в редакторе HTML на свой, они тоже удалятся. - Теперь, когда вы удалили все возможные виджеты, создайте новый пост. Если хотите, можете использовать готовые текстовые шаблоны, например отсюда Html Ipsum. В них уже есть большинство HTML тэгов, которые обычно используются в постах блога. Мы создали этот примерочный пост и дальше он нам очень пригодится в проектировании нашего шаблона.
- Ага, и еше не забудьте установить настройки приватности для вашего тестового блога - Настройки > Конфиденциальность: Не отображается в Blogger, Не сканируется поисковыми машинами. Если вы не собираетесь использовать в блоге внешние приложения для тестирования (например, подписка через Feedburner), вы также можете установить разрешение для Читателей блога - Личное – только авторы блога.
Рис. 1 - Голый шаблон после предварительной очистки.
Для чего нужны теги <b:section>
и <b:widget>
?
Секции (Sections)
Секция резервирует определенное место в шаблоне. Каждая секция имеет открывающий и закрывающий тэги, это выглядит примерно вот так:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
Примечание! Секция может содержать только виджеты. Чтобы поместить дополнительный код внутри секции, разделите ее на две или более новых секций.
Виджеты (Widgets)
Виджет представляет собой одинарный тег, который по-сути является заполнителем определенного места в шаблоне и указывает системе Blogger, как он должен быть обработан на вкладке Элементы страницы.
Вот некоторые примеры, один для заголовка страницы, второй для списка и третий для архива блога:
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
Более подробно в справке - Blogger Теги элементов страницы в шаблоне.
Рис. 2 - Объясняет как выглядят секции и виджеты в макете страницы Blogger.
А вот самый простой код, который можно загрузить как шаблон Blogger. Он основан на шаблоне Simple.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
</b:skin>
</head>
<body>
<b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
</b:section>
</body>
</html>
Если вы попытаетесь загрузить этот шаблон без тега
<b:skin/>
, то получите вот такое сообщение об ошибке:There should be one and only one skin in the template, and we found: 0Blogger говорит нам, что в шаблоне должны присутствовать хотя-бы какие-то стили. Также
<body>
не может быть пустым, оно должно содержать по крайней мере один тег <b:section>
. В противном случае мы снова столкнемся с ошибкой:We did not find any section in your template. A template must have at least one b:section tag.Что значит - "Мы не нашли никаких секций в вашем шаблоне. Должна быть хотя-бы одна секция".
Установка чистого шаблона Blogger.
Теперь пришло время загрузить наш самый минималистичный в мире шаблон. Для этого перейдите на вкладку "Шаблон" и нажмите "Изменить HTML". Очистите поле редактора кода Blogger, поместив в него курсор и нажав CTRL+A и DELETE. Затем скопируйте в буфер код с моего примера и вставьте его в пустое поле редактора. Жмите "Сохранить шаблон". Теперь жмите "Просмотреть блог"!
...Упс. Пустая страница. Что за черт?
Все дело в том, что с некоторого времени Blogger больше не создает автоматически блок с сообщениями блога. Мы должны теперь сделать это сами, чтобы увидеть наш пост, который мы раньше опубликовали. Вставим в нашу секцию еще одну строчку кода с виджетом постов:
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
Рис.3 - В редакторе все должно выглядеть вот так.
Ну а наш блог после перезагрузки страницы просмотра будет иметь вот такой незатейливый вид:
Рис. 4 - Дизайн нашего блога после первоначальной установки шаблона.
Ок, давайте теперь создадим еще одну секцию и поместим в нее виджет с хедером. Сделаем мы это с помощью следующих строчок кода, вставив их сразу после тега
<body>
, перед нашей секцией постов блога:<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
</b:section>
Сделайте все как на рисунке.
Рис. 5 - Вставляем код секции с хедером в шаблон.
Для того, чтобы зафиксировать секцию в определенном секторе макета Blogger используються идентификаторы, например
id='header'
, id='main'
и др.
Рис. 6 - Наш макет после добавления новой секции 'Header'.
Теперь нам доступна опция "Добавить гаджет" и мы можем смело установить шапку нашего блога:
Рис. 7 - Добавляем новый виджет для нашей шапки из списка гаджетов Blogger.
Давайте сейчас пойдем в HTML редактор Blogger и отыщем наш виджет заголовка страницы прямо под тегом
<b:section class='header' id='header' ...>
. Обратите внимание!: В редакторе кода слева напротив виджета вы увидите маленькую черную стрелочку. Она сворачивает и разворачивает определенный логический участок кода. Можете нажать на нее и посмотреть все содержимое виджета. Это нам пригодится дальше.Можно в качестве меры предосторожности - чтобы предотвратить удаление заголовка, если мы вдруг с бодуна начнем менять что-то в шаблоне - установить атрибут хедера
locked
до значения true
.Дочитав до этого места, вы вероятно уже сложили представление о том, как работает код в системе Blogger и о его главных паттернах. Мы создаем разделы-секции в шаблоне и указываем их атрибуты. Затем на странице макета вкладки "Дизайн" мы можем добавлять виджеты используя кнопку "Добавить гаджет" в той секции, которая нам нужна, и которую мы предварительно создали. Конечно, нам не обязательно использовать кнопку "Добавить гаджет", мы можем сделать это также и вручную, кодируя прямо в HTML коде нашего шаблона.
К примеру, мы хотим добавить HTML / Javascript виджет внизу блока сообщений. Сделаем это легко и просто, добавим код, создающий новый виджет (выделен синим) в секцию с постами блога, ниже виджета сообщений:
<body>
<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
</b:section>
<b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
<b:widget id='HTML1' locked='false' title='Наш тестовый виджет' type='HTML'/>
</b:section>
</body>
Теперь проверим страницу макета. И что мы увидим? Наш HTML / JavaScript виджет на месте!
Рис. 8 - Наш новый виджет HTML1 появился в макете шаблона.
Удалить виджет вы можете как вручную, так и воспользовавшись панелью Blogger на вкладке "Дизайн".
Давайте теперь займемся остальными секциями нашего шаблона. Обычно дизайн шаблона имеет Хедер, Меню, Контент-блок, Сайдбар и Футер. Два из перечня у нас уже имеются. Добавим теперь остальные.
*Некоторые замечания относительно установки секции сайдбара в шаблон.
Исследуя внимательно шаблон Simple, мы заметим, что для создания сайдбара в нем не использован тег
<b:section>
. В место него использован другой тег <macro>
заключенный внутри блока <div>
. А ближе к концу кода шаблона есть еще тег <macro:includable>
. Можно предположить, что эти теги систематизируют раскладку столбцов боковой панели. Возможно он генерирует таблицу на основе количества столбцов, указанных для боковой панели, которое может быть изменено в конструкторе шаблонов. На такие мысли наталкивают следующие куски кода из шаблона Simple.<!-- Здесь начинается Сайдбар, дальше код из шаблона -->
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num' value='0'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macro:param default='2' name='num' value='1'/>
<macro:param default='sidebar-right' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>
</div>
<div style='clear: both'/>
<!-- columns -->
</div>
<!-- Здесь заканчивается Сайдбар -->
И еще один:
</body>
<!-- Это кусок кода в конце шаблона с параметрами для раскладки столбцов Сайдбара -->
<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/>
<macro:if cond='data:col.num >= 2'>
<table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
</td>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
</td>
<macro:if cond='data:col.num >= 3'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
</td>
</macro:if>
<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
</tr>
</tbody>
</table>
<macro:if cond='data:col.includeBottom'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' showaddelement='no'/>
</macro:if>
</macro:if>
</macro:if>
</macro:includable>
Мы не будем сейчас вдаваться во все эти подробности с тегами
<macro>
, ведь мы только начинаем экспериментировать с шаблоном Blogger. Возможно я изучу эту тему в дальнейшем и сделаю отдельный пост про нее. Чтобы не усложнять, мы сделаем боковую панель и футер в один столбец. Для спокойствия нужно сказать, что так она будет выглядеть только в панели "Макет" шаблона. В реальности дизайн блога мы сделаем так, как сами захотим с помощью разметки и CSS стилей.
* * *
И вот, после добавления всех отсутствующих секций и нужных нам виджетов, мы имеем приблизительно такую структуру кода:
<body>
<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Наш Тестовый Блог' type='Header'/>
</b:section>
<b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
<b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section id='sidebar-right-1' class='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
<b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</body>
А наш макет со всеми добавленными секциями и виджетами обретет следующий вид:
Рис. 9 - Финальный макет нашего шаблона на вкладке "Дизайн".
Как результат мы получили совершенно голый шаблон, в нем не присутствует никаких стилей оформления, поэтому наш блог выглядит как простой набор текста в один столбец:
Рис. 10 - Финальный чистый дизайн нашего шаблона Blogger без применения разметки и стилей.
Еще несколько замечаний и все.
- Будьте внимательны, при создании новых секций следите за тем, какие идентификаторы
id
использовать. Так, например, при добавлении секции меню (навбар) используйте идентификаторid='nav'
, а неid='navbar'
, который уже используется системой для вывода фирменного навбара Blogger в самом верху любой страницы. - Использование недопустимого идентификатора
id
для виджетов (напримерid='Pagelist1'
вместоid='PageList1'
) будет генерировать ошибку. - Чтобы лучше познакомиться с другими типами виджетов Blogger, покопайтесь в коде стандартных шаблонов. Или можно просто добавлять их с помощью кнопки "Добавить гаджет" » HTML/JavaScript, а потом уже отредактировать его атрибуты в коде шаблона.
- Если у вас несколько екземпляров виджетов одного типа, убедитесь, что для каждого из них установлен свой отличный идентификатор - [тип виджета][номер] (напр. HTML1, HTML2, HTML3 и т.д.).
- Если вы используете "резиновый" шаблон для своего блога, или собираетесь его сделать, вместо мобильной версии Blogger, то я предлагаю удалить весь блок
<b:if cond='data:blog.isMobile'>
из тега<head>
и заменить его следующим кодом<meta content='width=device-width,initial-scale=1.0' name='viewport'/>
.
Итоги.
Ну что ж, теперь мы разобрались с самыми базовыми элементами шаблона Blogger - секциями и виджетами. Чтобы двигаться дальше по пути создания своего собственного и неповторимого дизайна блога, нам нужно будет освоить применение разметки макета и стилей с помощью технологий HTML и CSS. Поверьте, это не сложно и очень увлекательно. Намного более увлекательно, чем то, чем мы занимались в этом руководстве.
Возможно некоторые моменты я описал неполно и у вас все еще возникают вопросы. Пишите в комментариях, получилось ли у вас сделать свою заготовку шаблона, и хотели бы вы и дальше продолжить дизайнить уже чистовой вариант своей собственной темы для блога.
Ждите новых статей в этом блоге с подробными примерами и инструкциями "шаг за шагом". А чтобы не пропустить обновления, подписывайтесь с помощью електронной почты и становитесь постоянными читателями Blogger Cafè. На сегодня все.
8 комментариев:
Все отлично написано. Спасибо! А продолжение где? Я не нашел...
Спасибо! Сейчас как раз пытаюсь сделать самописный шаблон.
А как добавить код комментариев к сообщениям? как єти, где я сейчас пишу... а то у меня они отсутствуют :(
А как добавить код комментариев к сообщениям? как єти, где я сейчас пишу... а то у меня они отсутствуют :(
получите БЕСПЛАТНО Стратегию, которая позволила мне
заработать на необуксе более 5000$ за год
https://zarabotok-naneobux.blogspot.com/
прошу ВАС сделать шаблон корректно проходящий *amp validator*
не але лается с самог начала))))
таких значений нет
Отправить комментарий