Как стать автором
Обновить

Дизайнер шаблонов Blogger

Время на прочтение 6 мин
Количество просмотров 9K
Как вы, может быть, знаете, у компании Google есть собственная блоговая платформа под названием Blogger. Её отличительной особенностью среди подобных сервисов является доступ к редактированию шаблона, где с внешним видом и компоновкой блога можно делать всё что угодно. У тех, кто не знает HTML/CSS/JS, возможность создать свой стиль появилась лишь после анонса дизайнера шаблонов. Однако корректно этот редактор работает лишь со стандартными шаблонами, коих не так много.



В статье «Анатомия шаблонов Blogger» вопрос настройки нестандартного шаблона для работы с дизайнером шаблонов был опущен автором, поэтому я решил восполнить этот пробел.

Переменные


Для того, чтобы в нестандартном шаблоне появилась поддержка этого редактора, необходимо добавить переменные, выглядящие примерно так:

<Variable name="NAME" description="DESCRIPTION" type="TYPE" default="DEFAULT VALUE" value="VALUE"/>

  • name='' — имя переменной, которое в дальнейшем будет использоваться в стилях. Разрешена только латиница, цифры и некоторые символы.
  • description='' — описание переменной, которое будет отображаться в дизайнере шаблонов. Есть значения, которые переводятся на несколько языков (список ниже).
  • type='' — тип переменной. Всего их 4: background, length, font, color.
  • default='' — значение по умолчанию. Будет установлено, если сбросить индивидуальные настройки шаблона.
  • value='' — значение переменной, действующее в данный момент. Изначально должно совпадать со значением по умолчанию, потом может изменяться пользователем.

Фон

<Variable name="body.background" description="Body Background" type="background" color="#ffffff" default="$(color) url(none) no-repeat fixed top left" value="#dddddd url(none) repeat fixed top center"/>

Переменная для определения фона может быть использована только один раз и только для всего блога. Также, только вместе с этим типом переменных можно использовать дополнительный параметр color='' — он отвечает за фоновый цвет блога при отсутствии фонового изображения. Имя и описание изменять не рекомендуется, ибо редактор может «не увидеть» переменную. Значение переменной задаётся CSS-свойствами, идущими в следующем порядке: [background-color] [background-image] [background-repeat] [background-attachment] [background-position].

Значение

<Variable name="post.border.radius" description="Post Border Radius" type="length" default="10px" value="5px"/>

Переменная, определяющая какое-либо значение, не редактируется в дизайнере шаблонов. А жаль.

Шрифт

<Variable name="post.title.font" description="Post Title Font" type="font" default="normal normal 16px/1.25 Arial, sans-serif" value="bold normal 22px/1.5 Tahoma, sans-serif"/>

Переменная для определения шрифта определённого элемента. Значение задаётся набором CSS-свойств, идущих в следующем порядке: [font-weight] [font-style] [font-size/line-height] [font-family].

Цвет

<Variable name="post.text.color" description="Text Color" type="color" default="#000000" value="#222222"/>

Переменная для определения цвета любой части элемента: фона, текста, границы, тени и пр. Значение задаётся в шестнадцатеричном формате.

Группы переменных


Некоторые переменные можно объединять в группы по схожему селектору (напр. такими группами являются «Текст страницы», «Фон», «Ссылки» и пр. на скриншоте в начале статьи), выглядящие так:

<Group description="Widget Text" selector=".widget">
<Variable name="widget.text.font" description="Widget Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 12px Georgia, serif"/>
<Variable name="widget.text.color" description="Text Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.border" description="Border Color" type="color" default="#efefef" value="#efefef"/>
<Variable name="widget.background" description="Background Color" type="color" default="#fff" value="#fff"/>
</Group>

У групп два основных параметра: description='' для описания и selector='' для выделения обводкой того элемента, к которому применяются переменные данной группы.

Использование переменных


Сами переменные необходимо прописать в специально предназначенном месте шаблона.

<b:skin><![CDATA[
  /* Здесь переменные и CSS-стили */
]]></b:skin>

Для того чтобы задействовать переменную, достаточно после CSS-свойства добавить $(NAME), где NAME — имя нужной переменной.

.widget {
  background-color: $(widget.background); /* background-color: #fff; */
  font: $(widget.text.font); /* font: normal normal 12px Georgia, serif; */
  border: 1px solid $(widget.border); /* border: 1px solid #efefef; */
  color: $(widget.text.color); /* color: #000000; */
}

Ширина блога


В том же дизайнере шаблонов даётся возможность изменять ширину блога и боковых колонок, однако, как это ни странно, в нестандартных шаблонах эта возможность будет утеряна. Для её возвращения нужно добавить потерявшийся раздел <b:template-skin> с входящими в него переменными. В этих переменных нельзя изменять имя, иначе редактор их опять же «не увидит».

<b:template-skin>
  <b:variable default='900px' name='content.width' type='length' value='1000px'/>
  <b:variable default='250px' name='main.column.left.width' type='length' value='200px'/>
  <b:variable default='250px' name='main.column.right.width' type='length' value='300px'/>
  <![CDATA[
    /* Здесь CSS-стили с объявленными выше переменными */
   .page {
    max-width: $(content.width);
    width: $(content.width);
   }
   .sidebar-left {
    width: $(main.column.left.width);
   }
   .sidebar-right {
    width: $(main.column.right.width);
   }
  ]]>
</b:template-skin>

Описания переменных


В Blogger есть несколько описаний переменных, которые имеют разную локализацию. Привожу список отдельно для самих переменных и отдельно для групп.

Для переменных
Описание Перевод
Main Background Основной фон
Outer Background Внешний фон
Header Background Фон верхнего колонтитула
Post Background Фон сообщения
Font Шрифт
Text Color Цвет текста
Link Color Цвет ссылки
Hover Color Цвет ссылки при наведении на неё мышью
Visited Color Цвет посещённых ссылок
Title Font Шрифт заголовка
Title Color Цвет заголовка
Description Color Цвет описания
Background Color Цвет фона
Border Color Цвет рамки
Shadow Color Цвет тени
Bevel Color Цвет скоса
Alternate Color Дополнительный цвет
Caption Text Color Цвет подписи
Separator Color Цвет разделителя
Separator Line Color Цвет разделительной линии
Blog Title Font Шрифт названия блога
Blog Title Color Цвет для заголовка блога
Blog Description Font Шрифт описания блога
Blog Description Color Цвет для описания блога
Selected Color Цвет вкладки
Tabs Border Color Цвет границ вкладок
Post Title Font Шрифт заголовка сообщения
Post Title Color Цвет заголовка сообщения
Post Footer Font Шрифт нижнего колонтитула сообщения
Post Footer Color Цвет нижнего колонтитула сообщения
Sidebar Title Font Шрифт названия боковой панели
Sidebar Title Color Цвет названия боковой панели
Sidebar Text Color Цвет текста боковой панели
Gadget Title Color Цвет заголовка гаджета
Footer Background Фон нижнего колонтитула
Footer Text Color Цвет текста нижнего колонтитула


Для групп
Описание Перевод
Page Страница
Page Text Текст страницы
Accents Цветовые акценты
Backgrounds Фон
Links Ссылки
Images Изображения
Header Заголовок
Blog Title Название блога
Blog Description Описание блога
Tabs Text Текст вкладок
Tabs Background Фон вкладок
Date Header Верхний колонтитул даты
Post Сообщение
Post Title Заголовок сообщения
Post Background Фон сообщения
Post Footer Нижний колонтитул сообщения
Sidebar Background Фон боковой панели
Gadgets Гаджеты
Gadget Title Название гаджета
Gadget Text Текст гаджета
Gadget Links Ссылки на гаджеты
Gadget Background Фон гаджета
Feed Канал
Feed Links Ссылки на фиды
Footer Нижний колонтитул
Footer Links Ссылки в нижнем колонтитуле
Footer Background Фон нижнего колонтитула


Заключение


Надеюсь, статья окажется полезной тем, кто работает с этой блоговой платформой. Справка по этому вопросу весьма скудна, так что большая часть информации почерпнута из многочисленных экспериментов с шаблонами. И всегда помните, что главное при работе в Blogger — делать бэкап шаблона перед внесением любых правок ;-)
Теги:
Хабы:
+4
Комментарии 4
Комментарии Комментарии 4

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн