Разбираем код блога на Tumblr

Начиная эту статью, хочется спеть детскую каннибальскую песенку: «Из чего же, из чего же, из чего же сделаны наши мальчишки?!» Ну, ведь, блог, код — явно не девчонки… Хотя… В общем, если уж мы так плотно вписались в тумблероводство, то стоит ознакомится хотя бы с основными параметрами кода. Ведь, как бы прекрасна ни была тема — любой автор все равно захочет что-то изменить, что-то добавить. В моем случае темы постепенно меняются до неузнаваемости.

Как открыть код в Tumblr

Итак, начнем с того, как добраться до этого самого кода. Находясь на странице вашего Tumblr-блога, посмотрите в верхний правый угол. Там будет отображаться несколько кнопок (в зависимости от того, основной это блог на данном аккаунте или дополнительный). И с левого края первой будет кнопка «Настройка» — ее и жмем.

Тогда в левой части экрана, на всю его высоту откроется панель редактирования, которая называется «оформление» (а картинка блога сменится на вид установленной темы, т.е. там будут не ваши посты, а примеры постов разного типа — не пугайтесь!). Это форпост редактирования, где можно управлять отдельными параметрами. Причем, теми, которые вам предлагает добрый создатель темы. То есть, например, он может предусмотреть для вас окошечко добавления shortname для комментариев Disqus — а может этого не сделать (как поставить Disqus на блог Тумблер и Вордпресс читайте тут).

Наверное, предполагается, что больше мы никуда не полезем. Но я даже не рассматриваю такой вариант развития событий. Поэтому нажимаем кнопку «Изменить HTML». И тогда мы, наконец увидим всю начинку нашего блога и сможем в ней хорошенько покопаться!

Из каких частей состоит код блога Tumblr

Начинается этот код, как и положено, с общих заявлений. Я имею ввиду doctype, который определяет параметры языка, на котором он написан.

Далее следует часть head (не путать с header — который появляется дальше и является заголовком, шапкой блога!). И здесь уже расположены участки кода, которые могут нас взволновать:

1. Во-первых, это различные метатеги (meta name) — которые связывают наш блог с различными сервисами и службами. Например, с вашими аккаунтами в соцсетях. Сюда же нужно вставлять теги для подтверждения вашего владения блогом, полученные в Гугл Вебмастерс или Яндекс Вебмастер;
2. Во-вторых, сюда вставлены всякие скрипты и привязки к jQuery;
3. В-третьих, здесь прописывается весь стиль блога;

Затем, по традиции, идет часть body, которая, непосредственно отвечает за архитектуру построения самого блога, применение стилей и так далее. Сюда мы можем вставлять всякие коды кнопок, рекламы и т.д. Да-да! Мне почему-то долгое время казалось, что на Tumblr нельзя использовать Google Adsense — но, это заблуждение. Очень даже можно!

Особенности кода Tumblr

В принципе, можно навернуть на своем Тумблер-блоге все, что угодно. Можно использовать java, javascript,  php, python, ruby, objective-c. На мой подслеповатый взгляд, этого вполне достаточно, чтобы запустить пилотируемый корабль на Альфа-Центавра, а не то, что сайт оборудовать.

Чем плох код Tumblr — тем, что все свалено в одну кучу. То есть, великий постулат WC3 о раздельном хранении файлов содержания, представления и поведения не соблюдается. Ну, все-таки, большие многофункциональные порталы на Tumblr никто не заводит, а в пределах блога, возможно, это не так уж страшно. Основной страх в том, что пытливый блоггер полезет в код и напортачит там, где не надо. Но, собственно, нам и раздельное хранение — не помешает напортачить…

Основным отличием кода Tumblr от милого сердцу WordPress — наличие блоков:

{block:Posts}
                {block:Text}
                    <li class="post text">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        {Body}
                    </li>
                {/block:Text}
{/block:Posts}

Ведь, например, у нас на Вордпресс для описания структуры разных уровней — есть отдельные php-файлы: index.php — главная страница, single.php — одна запись и так далее. А здесь все нужно впихнуть в одну запись. Значит приходится отделять блоки друг от друга.

В принципе, с блоками никакой сложности возникать не должно. Для них применяются те же правила, что и для html-тегов:

• закрывающий блок обязателен
• блоки могут быть вложены друг в друга
• блоки и теги могут совершенно свободно вкладываться друг в друга

Еще одно важное отличие: семь обязательных типов постов:

1. текст
2. фото
3. цитата
4. ссылка
5. чат
6. аудио
7. видео

В любой теме для них обязательно будут прописаны некие правила (ну, стиль, порядок вывода). Эти типы — отличительная особенность Tumblr. И даже если вы не планируете никогда использовать, например, тип публикации «аудио» — не трогайте этот блок в коде. Просто не добавляйте к нему свои плюшки, например, не прописывайте там код кнопок для расшаривания в соцсетях. Я в одном из своих блогов точно буду использовать только фото и текст, ну, может быть, иногда ссылки и видео. И поэтому мои нововведения касаются только кода этих блоков — остальные просто пролистываю.