расставляй правильно приоритеты и не отвлекайся на мелочи

Blogger хак: Анонс статьи и ссылка "Читать далее …"

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

Мне понадобилось восемь постов, что-бы понять, по отсутствию Ваших комментариев, что тема оказалась невостребованной, но для собственной необходимости и Вашего внимания она переродилась в блок «Мои закладки» на сайд-баре сайта, благодаря сервису memori.ru. Вот в какой-то из тех закладок я и наткнулся на интересный хак для Blogger’а, о котором сам давно задумывался на начальном этапе знакомства с этой платформой и речь о котором пойдет дальше.

Источник: How To Add The Blogger “Read More” Expandable Posts Link
Автор: David

Это довольно популярный хак для людей использующих блог сервис Google Blogger. С помощью него Вы сможете выводить только часть начального текста (анонс) каждого поста, вместо цельного содержимого, на заглавной странице Вашего блога. Если читателя заинтересует содержимое анонса, он сможет кликнуть на ссылку «Читать далее» и посмотреть статью полностью. Это очень сподручное решение для ситуации, когда Вы хотите выводить на начальной странице блога несколько статей с длинным содержанием, но не хотите ее перегружать «лишними хвостами». Сразу оговоримся, что для нормальной работы с этим решением, в установках Вашего блога должна быть разрешена опция «Включить страницы сообщений?» (см. пункты Настройки/Архивирование), в добавок к этому, и из-за своей «причудливой» реализации в клиентский браузер все-таки грузится полное содержимое начальной страницы, как в случае если бы она грузилась и без этого «искусственного» решения.

Модифицируем шаблон блога

Не буду много говорить, как это сделал автор статьи, а постараюсь все дать в очень сжатой и доступной форме.

Надеюсь Вы в курсе того, как править HTML шаблон Вашего блога (см. Макет/Изменить HTML и включить «Расширить шаблоны виджета»). Так вот, нам необходимо внести в него некоторые изменения, а именно: ищем заветную строку вывода содержимого тела поста: <data:post.body/> и видоизменяем его к следуещему виду (добавленные строки выделены темным фоном, Ваше «окружение» вокруг data:post.body может быть иным, чем в примере, но его мы не касаемся):


<div class='post-header-line-1'/>

<div class='post-body'>

  <b:if cond='data:blog.pageType == "item"'>

    <style>.fullpost{display:inline;}</style>
    <data:post.body/>

  <b:else/>

    <style>.fullpost{display:none;}</style>
    <data:post.body/>
    <br /><a expr:href='data:post.url'>Читать далее...</a>

  </b:if>

Теперь краткое описание работы. Все реализовано с помощью CSS и типов страниц блога.

Если тип выводимой страницы — это item (pageType == «item»), т.е. страницы содержащей только один единственный пост, то выводим ее полностью (.fullpost{display:inline;}), иначе, скрываем «хвост» (.fullpost{display:none;}) и выводим только анонс, в конце которого делаем ссылку — «Читать далее…» (Если честно, не понял, зачем David в оригинале своей статьи сделал еще одну проверку if, я ее убрал, все должно и так работать).

Модифицируем оформление статьи

Все, теперь при создании новой статьи не забываем обрамлять скрываемую часть текста статьи CSS блоком с классом .fullpost:

Начало …… анонс статьи…
первый абзац ….. вступление
<span class=»fullpost»>
Это — скрываемая часть ….

Здесь пойдет продолжение статьи ….
….
</span>

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

13 комментариев на статью:
  1. alexandroid:

    А мне кажется, это дело читалки — программы — показывать статью целиком или полностью. Например, когда читаешь статью в Google Reader напрягает переходить на заметку, потому что автор решил в RSS не давать всю заметку целиком.

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

    Не зря в Блоггере сделано именно так.

  2. bridennis:

    Насчет RSS и особенно первых абзацев полностью согласен.

    А вот насчет, никакого вреда от цельных статей на первой странице, — не соглашусь.
    Вы как RSS читаете?
    Я, в Google Reader, вижу сперва интересный заголовок, потом перевожу взгляд далее, на первый абзац, идущий за заголовком и уже потом решаю, стоит тема «щелчка» или нет. Не удивлюсь, если многие так сканируют свои RSS.
    Похожая привычка к сканированию отражается и на ожиданиях для просматриваемых веб ресурсов.

    Вобщем в теме «коротко или длинно» играют два аспекта:
    — Первый — предпочтения читателя. Здесь, как говорится: «На вкус и цвет …»
    — Второй — формат статей.
    Как пример: блог статей о практической работе в Photoshop. Каждая статья — очень много текста и графики. Здесь гораздо эффективнее выглядит оформление с применением анонса нескольких статей со ссылками «Читать далее..» (возрастает вероятность того, что какой-то из абзацев сможет «зацепить» читателя), чем перегруженный вывод основной страницы парой — тройкой полных статей.

    А так, правило того, что если ресурс действительно интересный и «мне пофигу с какой стороны у него кепка» — действует всегда :)

  3. Chumicheff:

    Огромное спасибо за хак.

  4. Максим:

    Здравствуйте, не могли бы вы подробнее описать процесс вставки кода здесь, или выслать его мне на имайл? Никак не выходит разобраться. Вставляю весь предложенный вами код после но при сохранении выдаёт ошибку «Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: Open quote is expected for attribute «{1}» associated with an element type «cond».»

  5. admin:

    2 Максим: судя по Вашему блогу, я так понял, Вы сами разобрались. Я поздно среагировал, почему-то мне перестали прилетать уведомления о новых комментариях.

  6. Максим:

    Да, перешел на страничку David’a, и разобрался, вам отдельное спасибо за инфу!

  7. Алексей:

    Больщое спасибо,давно искал информацию по «срыванию» текста.

  8. altruist:

    спасибо, пригодилось

  9. virgin:

    Этот код под ката, который прячет основной текст сообщ. не всегда срабатывает.
    Может есть способ его одалеть. В гугл хроме отображение чудовищное, когда в сообщении используется флэш анимация или ява код. Он его игнорирует чтоли.
    Когда попытался создать таблицу в сообщении, в Опере он не спрятал её под кат, а в остальных всё работает, кроме гугл хром естественно, он вообще видимо не понимает этот код.

    • admin:

      Другого не встречал, хак довольно простой — display:inline или display:none для элемента должен отрабатывать однозначно.
      Не совсем понял насчет JavaScript, но исполняться в этом случае он будет.

  10. Compass:

    Здравствуйте!
    Спасибо за статью. Поставила в шаблон статьи код со скрываемой частью. А теперь пользуюсь новым редактором, те.е вообще есть два варинта. Но все равно, мое Читать далее почему-то находит на Ярлыки или Комментарии. Как его можносдвинуть вверх под саму статью? Никак не могу разобраться

    • admin:

      Здравствуйте! Посмотрел Ваш блог, что-то не нашел ссылок «Читать далее ..»

      • Compass:

        Да, я взяла исходный шаблон и поставила его по-новому. Извините.что путаю. Но теперь вообще эта ссылка пропала(((((. и вообще шаблон съехал. все плохо. Не знаю,что делать

Ответить
Обязательные поля помечены *