Никому не нравится разбираться в том, что сделал кто-то другой. Это такие нервы - настраивать скачанный где-то шаблон под свой вкус и свои нужды. Каждый блоггер, по-моему, время от времени задумывался как было бы здорово состряпать свой собственный шаблон. И скажу я вам - это совсем неплохая идея! Сегодня мы попробуем эту идею легко и быстро воплотить в жизнь.
В этой статье я расскажу обо всем, что я узнал, создавая свой шаблон для блога, который вы сейчас читаете. Как часто бывает, когда имеешь дело с веб-технологиями, все самые лучшие вещи я почерпнул из англоязычных ресурсов. Я рад, что учил английский больше, чем 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è. На сегодня все.
11 комментариев:
Все отлично написано. Спасибо! А продолжение где? Я не нашел...
Спасибо! Сейчас как раз пытаюсь сделать самописный шаблон.
А как добавить код комментариев к сообщениям? как єти, где я сейчас пишу... а то у меня они отсутствуют :(
А как добавить код комментариев к сообщениям? как єти, где я сейчас пишу... а то у меня они отсутствуют :(
получите БЕСПЛАТНО Стратегию, которая позволила мне
заработать на необуксе более 5000$ за год
https://zarabotok-naneobux.blogspot.com/
прошу ВАС сделать шаблон корректно проходящий *amp validator*
не але лается с самог начала))))
таких значений нет
Спасибо за пост
помогло
Полезная информация.
Отправить комментарий