Поиск

четверг, 10 октября 2013 г.

Об изменении кода CSS и устройстве шаблона Blogger


Что я могу сделать с помощью CSS?

Вы можете изменять практически любой аспект внешнего вида блога, просто изменив стилей в шаблоне. Некоторые из наиболее распространенных достопримечательностях, перечисленные здесь. Для более глубокого учебники и примеры см. W3 Schools CSS примеры и W3C Введение в CSS .
Наши шаблоны по умолчанию есть вся информация CSS к вершине, между между тегами style
Вы увидите кучу линий, что там выглядит следующим образом:


Выделенная линия показывает стиль, который применяется к каждому
тегу H3 в вашем блоге. Здесь описываются некоторые варианты, использования стилей. 
Любой из кусков кода ниже, можно вставить между {фигурными скобками} в таблице стилей.
CodeExamples
Colors
color:blue;This text is blue.
background:yellow;This has a yellow background.

Вы можете вставить имена многих распространенных цветов здесь (например, красный, зеленый, желтый), или вы можете использовать шестнадцатеричные коды для более широкого диапазона цветов (например, # 0033AA). Для получения дополнительной информации о цвете, обратитесь к веб-спрвке по цвету .

colspan="2";                                         Borders
border:solid 1px red;
This has a red border.

Линии рамки могут быть сплошные, пунктирные и штриховые. Ширина здесь указана в пикселях. Цвета могут быть имена или шестнадцатеричные коды. Чтобы делать только границы, с одной стороны, использовать границы-топ, нижней границы, границы правой или левой границе.

Fonts
font-family:"Times New Roman",Serif;This is in a serif font.
font-family:Verdana,Sans-Serif;This is in a sans-serif font.

Вы можете задать список шрифтов. Если первый не доступен на компьютере читателя, следующий будет использоваться, и так далее. Индикация "Serif" будет использовать любой доступный шрифт с засечками.

font-size:24px;This text is 24 pixels high.

The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).
font-weight:bold;This text is bold.
Choices are bold and normal.
text-decoration:underline;This text is underlined.

The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links.

text-align:right;
This text is right aligned.
The alignment can be set to left, right, or justify.
Margins and Padding
margin:15px;
This has a 15px margin all around.
padding:15px;
This has 15px of padding all around.

Поля и заполнение. Как определить объем пространства вокруг или между границами текста и рамки. Разница в том, что margin отвечает за границу снаружи, а padding внутри ячейки. (Граница здесь только для иллюстрации) Как и границы, вы можете указать одну сторону на время с margin-left, padding-top и т.д. Вы также можете установить все сразу
margin:1px 2px 3px 4px;where the order is top, right, bottom, left.


Notes:
Вы можете также использовать встроенные стили, если вы хотите, чтобы сделать одноразовый форматирования для определенного фрагмента текста в сообщении. Вот формат для использования: Этот текст будет красным. </ span>

support.google.com/blogger/bin/answer

Edit Blogger Mobile Templates

Редактирование HTML-кода Blogger

Анатомия шаблонов Blogger на habrahabr

Базовые элементы шаблона


В общем случае шаблон Blogger представляет собой XML-файл, содержащий описание HTML-страницы (CSS-форматирование также включено в этот файл). Выглядит это примерно так (некоторые детали опущены для простоты):



<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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<title> ... </title>
<b:skin> ... </b:skin>
<b:template-skin> ... </b:template-skin>
</head>
<body>
...
</body>
</html> 

Блоки  и , отвечающие за CSS-оформление, я рассматривать не буду, поскольку лично я для создания темплейтов использую фреймворк Twitter Bootstrap. Сейчас лучше займемся той частью, которая отвечает за отображение контента.

Итак, основной составляющей любого шаблона Blogger является его тело — . Оно состоит преимущественно из секций и виджетов. Секциями являются ключевые элементы страницы: шапка, боковое меню, подвал и тому подобные. Ну, а виджеты – это индивидуальные кирпичики страницы, такие как сообщение, картинка или любой другой элемент, который можно добавить на вкладке «Элементы страницы» в редакторе шаблона. Секции может окружать любой пользовательский HTML-код, который требуется.

Каждая секция в шаблоне открывается и закрывается специальным тегом, выглядит это примерно так:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> 
</b:section>

Тег может иметь следующие атрибуты (обязательным является только id):
  • id – уникальное имя, состоящее только из букв и цифр;
  • class – обычное название класса в терминах HTML;
  • maxwidgets – как видно из названия, это максимальное количество виджетов, которые могут присутствовать в данной секции;
  • showaddelement – булевое поле, которое может принимать значения «yes» или «no» («yes» — по-умолчанию), определяя, может ли на вкладке «Элементы страницы» отображаться кнопка «Добавить элемент страницы» в данной секции;
  • growth – последняя опция с возможными значениями «horizontal» или «vertical» («vertical» — по-умолчанию), которая определяет, как будут располагаться виджеты в данной секции.

Секции могут содержать только виджеты: если нужно вставить дополнительный код между виджетами в рамках одной секции, то эту секцию придется разбить на несколько частей.

Виджет, по сути, представляет собой одинарный тег, который вставляется в том месте, где на странице должно отобразиться содержимое этого виджета: само наполнение хранится в базе данных 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"/>

Виджет может иметь следующие атрибуты (только первые два из которых являются обязательными):
  • id – уникальный идентификатор виджета, не может быть изменен без удаления виджета и создания нового;
  • type – определяет тип виджета из списка допустимых типов (об этом чуть ниже);
  • locked – булевое поле («no» — по-умолчанию), определяющее, может ли данный виджет быть перемещен или удален на вкладке «Элементы страницы»;
  • title – заголовок виджета;
  • pageType – может быть «all», «archive», «main», или «item» (с «all» по-умолчанию), указывает, на каких страницах блога будет отображаться данный виджет;
  • mobile – может принимать значения «yes», «no» или «only» («default» по-умолчанию) и определяет, будет ли данный виджет отображаться в мобильной версии блога.

А вот и обещанные типы виджетов, которые вы можете использовать в своем шаблоне:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar

Каждый из них может быть описан в краткой (представленной выше) или расширенной форме, детализируя содержимое. О том, как настроить и видоизменить тот или иной виджет, речь пойдет в следующем разделе. Пока что хочу отметить, что после применения шаблона к блогу все элементы  и  будут заменены на div’ы с определенными идентификаторами, то есть к элементам можно свободно обращаться в CSS, например,div#header или div#myList.

Расширение и модификация виджетов


Просто натыкать виджетов в тему – не интересно. Интересно кастомизировать их в соответствии со своими нуждами. Для этого, прежде всего, необходимо заменить одинарный тег на двойной:


...


О том, что можно поместить посредине, речь пойдет дальше.

Вставки

Наполнение виджета содержится в блоке «includable» в следующем формате:

<b:includable id='main' var='thiswidget'>
...
</b:includable>

Атрибутов всего два: id и var. C id мы знакомы, а var – это еще один идентификатор, который служит для того, чтобы ссылаться на данный блок во внутренних секциях (об этом чуть дальше).

Каждый виджет должен иметь один includable с id='main'. Чаще всего это будет единственный элемент, который будет содержать всю необходимую информацию. Если вы опишете больше одного внутреннего блока, то они не будут отображаться автоматически. Например, если вы создали блок с id='new', то для его отображения в main вам нужно будет написать .

Тег b:include может иметь следующие атрибуты: name (обязательный) и data. Name должен совпадать с id одного из существующих includable, а data – это выражение или данные, которые будут переданы в includable (в качестве значения var).

Ниже представлен простой пример комбинации includable-блоков (о циклах речь пойдет чуть ниже):

<b:includable id='main'>
   <b:loop var='i' values='posts'>
      <b:include name='post' data='i'/>
   </b:loop>
</b:includable>
<b:includable id='post' var='p'>
   Title: <data:p.title/>
</b:includable>

Один блок includable может вставляться в нескольких местах страницы или не вставляться нигде, если пока его не нужно отображать.

Данные

Итак, мы добрались до ключевого элемента из тех, которые нас интересуют, до данных:
  • и т.д.

Это несколько примеров того, как просто можно использовать тег data. В первом случае мы просто подставляем значение заголовка в необходимом месте, а во втором — атрибут url элемента photo (это похоже на доступ к полю объекта в ООП). То, какие «поля» есть у каких «объектов» в Blogger мы рассмотрим чуть позже.

Циклы

Для записи циклов в шаблонах Blogger используется тег b:loop, имеющий следующий синтаксис:

<b:loop var='identifier' values='set-of-data'>
...
</b:loop>

Как видим, все довольно просто: в качестве var указывается переменная, служащая итератором, а в values мы записываем коллекцию, которую будем перебирать. Наглядный пример:

<b:loop var='i' values='data:posts'>
   <h2><data:i.title/></h2>
</b:loop>


Ветвление

Условия, как не парадоксально, в Blogger записывают с помощью тегов b:if и b:else. Общий формат условий имеет такой вид:

if
cond='condition'> [content to display if condition is true] else/> [content to display if condition is false] if>
Тега b:else, впрочем, может и не быть, если контр-условие нам не нужно.

В качестве условия может быть использовано любое выражение, принимающее значения true или false. Несколько примеров напоследок:


Data-теги


Как было сказано ранее, существует множество предопределенных тегов, позволяющих извлекать данные из базы Blogger’a. Все они записываются в виде:  или, в зависимости от глубины вложенности той или иной информации.

Важно помнить, что data-теги, касающиеся определенного виджета, могут быть доступны исключительно в рамках этого виджета: например, нельзя, обратиться к photo.url, находясь внутри виджета BlogArchive, потому что он «не знает» ни о какой фотографии, а тем более о ее адресе. Однако существует исключение – так называемые, глобально доступные данные. Информацию из этой категории можно получить в любом месте шаблона, обращаются к ней в такой форме:  (где вместо звездочки записывается интересующий нас атрибут). В данную категорию входят следующие атрибуты:
  • title – заголовок блога;
  • pageType – тип страницы, может быть «item», «archive» или «index»;
  • url – адрес текущей страницы;
  • homepageUrl – адрес домашней страницы;
  • pageTitle – заголовок страницы;
  • encoding – кодировка блога, например, UTF-8;
  • languageDirection – направление текста, может быть «ltr» (слева направо) или «rtl» (наоборот);
  • feedLinks – автоопределяемые ссылки для заголовка страницы.

Остальные теги данных не являются глобальными и делятся на категории в соответствии с существующими в Blogger’е виджетами:
  • Page Header
  • Blog Posts
  • Blog Archives
  • Profile
  • Text / HTML / JavaScript
  • Feed
  • Picture
  • Labels
  • List
  • Link List
  • Logo

Я не буду описывать каждую из категорий, так как все они очень похожи. Прочитать подробно про них можно здесь.

Заключение


Вот, пожалуй, и все. Теперь вы имеет общее представление об архитектуре темы оформления для Blogger. На всякий случай подскажу, где можно увидеть примеры шаблонов, и как загрузить свой. Для этого необходимо зайти в настройки вашего блога, в раздел «Шаблон». Там нужно нажать на кнопку «Редактировать HTML». Вуаля – перед вами откроется окно с кодом примененного на данный момент шаблона.

Надеюсь, статья оказалась для кого-то полезной. Большую часть информации я почерпнул из следующих источников:

http://www.realcombiz.com/2012/09/advanced-multi-tabbed-widget-for-blogger.html
updated 03/08/2013