Blogger: строим свой блог. Установка гаджетов

07.jpgПервоначально установленный блог оснащен только самым начальным набором функциональных элементов. Кроме собственно отображения сообщений это архив блога, информация о владельце, поиск по блогу и переход к панели управления. Для расширения функциональности и увеличения удобства пользования блогом Blogger предоставляет пользователям необходимый инструментарий. Для многих функций уже разработаны соответствующие гаджеты, а для тех, для которых гаджетов нет, разработаны соответствующие трюки.

Механизм гаджетов и неограниченная возможность изменения шаблона блога позволяют достичь функциональности, сравнимой с функциональностью самостоятельного блога, получив все преимущества последнего и сохранив комфорт и удобство бесплатного хостинга Google.

Два основных направления расширения первоначальной функциональности — это использование готовых гаджетов от разработчиков из команды Google или сторонних разработчиков и внесение изменений непосредственно в код шаблона. Естественно, что путь использования готовых гаджетов идеологически более правильный, он более удобен в применении и позволяет менять как угодно шаблоны оформления, не задевая функциональности блога.

Правка шаблона применяется в трех случаях:

* при незначительных, косметических изменениях, когда нет смысла оформлять код отдельным гаджетом и проще внести исправления непосредственно в шаблон;
* если нет доверия надежности места размещения гаджета от стороннего разработчика и код гаджета будет лучше поместить непосредственно в шаблон;
* если нет нужного гаджета для реализации какой-либо функции или требуется изменить работу существующего гаджета.

В связи с этим самым предпочтительным является использование гаджетов от Google, затем идет использование сторонних готовых гаджетов, и только в том случае, когда нет других вариантов, применяется правка шаблона блога.

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

09.jpgПервым шагом стоит установить рубрикатор тем (или меток, тегов) блога. Для этого уже есть готовый гаджет от Google, который называется «Ярлыки», поэтому просто устанавливаем гаджет в нужное место страницы, на странице настроек называем его по вкусу (например, «Разделы») и выбираем порядок отображения — по алфавиту или по частоте использования.

Гаджетов отображения списков последних статей и последних комментариев нет в стандартном наборе гаджетов Google, но в данном случае можно использовать нестандартное применение стандартного гаджета «Канал», отображающего заголовки RSS-лент сторонних сайтов.

Раз гаджет отображает сторонние RSS-ленты, значит, может отображать и свои. Создаем два гаджета вида «Канал», называем один «Последние сообщения», второй — «Последние комментарии» и задаем им в качестве URL канала соответственно http://имя_блога.blogspot.com/feeds/posts/defaultom/feeds/posts/default и http://имя_блога.blogspot.com/feeds/posts/defaultom/feeds/comments/default. Вызываем в меню «Настройки» команду «Канал сайта», настраиваем выдачу сообщений и получаем требуемый результат.

Теперь добавляем на страницу стандартный гаджет «Ссылки для подписки», возможно, еще какие-то гаджеты вроде просмотра новостей, показа слайдов или видеороликов, и всё, первоначальную настройку можно считать законченной.

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

10.jpgВот тут и наступает время правки шаблона страницы. Если на странице настройки (меню «Макет», пункт «Изменить HTML») отметить поле «Расширить шаблоны виджета» (опять смешение виджетов и гаджетов, отмеченное в предыдущей статье), то вместо тегов вызовов гаджетов в шаблоне будет отображен код гаджетов, который можно теперь корректировать для изменения их поведения. При этом следует отметить, что имеющаяся на той же странице ссылка «Восстановить шаблоны виджетов по умолчанию» становится при дальнейшей работе запрещенной для использования: нажатие на нее восстановит оригинальный текст всех гаджетов и все внесенные изменения исчезнут. На всякий случай при этом стоит почаще (после любых изменений шаблона) пользоваться функцией «Загрузить весь шаблон». Несмотря на неподходящее по смыслу название, эта ссылка служит для выгрузки текущего шаблона на компьютер пользователя в качестве резервной копии.

Рассмотрев содержимое гаджета Blog1, который отвечает за вывод сообщения, выясняем, что текст сообщения выводится неделимой конструкцией <data:post.body/>, то есть гаджет в любом случае будет выдавать весь текст сообщения.

Но нас интересует не столько количество выдаваемой гаджетом информации, сколько то, что именно будет отображено в браузере. Скрыть часть сообщения можно при помощи соответствующего кода CSS, который будет отображать или скрывать ненужные части сообщений в зависимости от режима просмотра. Для этого, аналогично тому как подготавливаются сообщения к публикации в LiveJournal, автор сообщения производит разметку сообщения с разделением его на анонс и основную часть, но делает это не специальным зарезервированным тегом (в LiveJournal это тег <lj-cut>), а заключением скрываемой части в теги с соответствующим CSS-стилем, например: <span id=»fullpost»>скрываемая часть сообщения</span>. Теперь для страниц, где мы хотим видеть сообщение целиком, класс fullpost объявляется видимым, для сокращенного варианта — невидимым. Для этого достаточно в шаблоне в секцию <b:skin> добавить следующую конструкцию (item — встроенный признак страницы, на которой отображается одиночное сообщение):

<b:if cond=’data:blog.pageType == «item»‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>

Для чего нужно было разворачивать шаблон? Для того, чтобы после конструкции вывода текста сообщения можно было вставить ссылку «Показать полный текст статьи…», ведущую на страницу вывода сообщения в полном виде. Можно, конечно, обойтись и без этого, но тогда посетителю страницы придется догадываться, что полное сообщение можно увидеть, нажав на его заголовок. Мало для кого из нормальных посетителей такое поведение очевидно и приемлемо.

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

Сама собой напрашивается мысль о том, что будет лучше, если нажатие на ссылку «Показать полный текст статьи…» будет вызывать не новую загрузку сообщения, а просто сделает видимым уже загруженный текст.

Этот вариант полностью реализован в модификации шаблона «Blogger hack: Expandable posts with Peekaboo view» (см. ссылку в конце статьи). В этой модификации средствами JavaScript реализуется переключение видимости скрытой части сообщения. Модификация полностью работоспособна, и для ее установки достаточно выполнить три шага прилагаемой к ней инструкции и заменить текст «Read More…» и «Summary only…» на, соответственно, «Показать полный текст статьи…» и «Свернуть текст статьи…».

Вот теперь мы получили вполне функциональный, удобный и красивый блог. Конечно, тема расширения функциональности блога этим не исчерпывается, но об этом мы поговорим в следующей статье.

h++p://vl-ognev.blogspot.com/2008/10/blogger.html

4 комментария

  1. Добрый вечер.
    Интересная статья, спасибо,узнал нового. Вы не подскажете как можно установить гаджет или рекламу между сообщениями, дело в том ,что у меня не стандартный шаблон…

    С уважением Сергей

  2. Отличный сайт. Так здорово создавать свой блог, вставлять часы, календарь. Вести Интернет-дневник. По-моему, классно!

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*


пять × один =