8 окт. 2007 г.

Читать дальше-2 или внедряем Peekaboo view в Blogger

Свершилось чудо! В Blogger появился встроенный механизм для разворачивающихся постов (ссылка «Читать далее»). Продолжение этого поста можно не читать (он оставлен просто для истории). Как правильно делать ссылку «Читать далее» в Blogger, написано тут: «Read more in Blogger»

Тут народ предположил, что многим был бы полезен перевод статьи, на основе которой я писал свой пост "Читать дальше".

В этом посте я сделал краткий перевод инструкции, описывающей процесс настройки "разворачивающихся" постов (как это сделано в этом блоге) для движка Blogger (blogspot.com).

Для настройки "разворачивающихся" (т.н. Peekaboo) постов в Blogger потребуется модифицировать HTML-шаблон блога. Поэтому обязательно сделайте резервную копию перед выполнением описанных здесь действий (меню "Настройки"->"Шаблон"->"Изменить HTML"->"Сохранить копию шаблона...").

Далее приводится пошаговая инструкция. Все действия нужно выполнять с включенной опцией "Расширять шаблоны виджетов" ("Expand Widget Templates").

  1. Найдите тег </head> в Вашем шаблоне и вставьте следующий код непосредственно перед ним:
    <b:if cond='data:blog.pageType != "item"'>
    <script type="text/javascript">
    
    var fade = false;
    function showFull(id) {
     var post = document.getElementById(id);
            var spans = post.getElementsByTagName('span');
            for (var i = 0; i < spans.length; i++) {
                 if (spans[i].id == "fullpost") {
                     if (fade) {
                        spans[i].style.background = peekaboo_bgcolor;
                        Effect.Appear(spans[i]);
                    } else spans[i].style.display = 'inline';
                 }
                 if (spans[i].id == "showlink")
                     spans[i].style.display = 'none';
                 if (spans[i].id == "hidelink")
                     spans[i].style.display = 'inline';
            }
    }
    
    
    function hideFull(id) {
     var post = document.getElementById(id);
            var spans = post.getElementsByTagName('span');
            for (var i = 0; i < spans.length; i++) {
                 if (spans[i].id == "fullpost") {
                     if (fade) {
                       spans[i].style.background = peekaboo_bgcolor;
                       Effect.Fade(spans[i]);
                     } else spans[i].style.display = 'none';
                 }
                 if (spans[i].id == "showlink")
                     spans[i].style.display = 'inline';
                 if (spans[i].id == "hidelink")
                     spans[i].style.display = 'none';
            }
            post.scrollIntoView(true);
    }
    
    function checkFull(id) {
     var post = document.getElementById(id);
            var spans = post.getElementsByTagName('span');
            var found = 0;
            for (var i = 0; i < spans.length; i++) {
                 if (spans[i].id == "fullpost") {
                     spans[i].style.display = 'none';
                     found = 1;
                 }
                 if ((spans[i].id == "showlink") && (found == 0))
                     spans[i].style.display = 'none';
            }
    }
    
    </script>
    
    </b:if>
  2. Найдите подключаемый блок (includable), который называется "post" и скопируйте выделенные красным блоки из следующего кода. Будьте внимательны, чтобы избежать ошибок. Учтите, что слово "uncustomized-post-template" может не встречаться в Вашем шаблоне, что является нормальным. Чтобы найти необходимый подключаемый блок, Вы можете выполнять поиск строчки id='post'. Если найти указанную строку не удается, возможно, Вы не включили опцию "Расширять шаблоны виджетов" ("Expand Widget Templates"), которая расположена сразу над окном HTML-кода шаблона.
    <b:includable id='post' var='post'>
      <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
    
        <a expr:name='data:post.id'/>
        <b:if cond='data:post.title'>
          <h3 class='post-title'>
          <b:if cond='data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
    
          <b:else/>
            <data:post.title/>
          </b:if>
          </h3>
        </b:if>
    
       <div class='post-header-line-1'/>
    
       <div class='post-body'>
    
         <b:if cond='data:blog.pageType == "item"'>
    
            <p><data:post.body/></p>
    
         <b:else/>
    
            <style>#fullpost {display:none;}</style>
            <p><data:post.body/></p>
            <span id='showlink'>
              <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
    
            </span>
            <span id='hidelink' style='display:none'>
              <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
            </span>
            <script type='text/javascript'>
    
              checkFull("post-" + "<data:post.id/>");
            </script>
         </b:if>
    
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
    Выполните сохранение шаблона (кнопка "Сохранить шаблон").
  3. Перейдите на вкладку "Настройки"->"Форматирование". Внизу страницы Вы увидите поле "Шаблон сообщения". Скопируйте приведенные ниже строки в это поле и кликните "Сохранить настройки".
    Короткое описание...
    <span id="fullpost">
    Длинный текст...
    </span>

Примечание №1. Если Вы желаете применить fade in/out спецэффекты к этой функциональности, Вы можете выполнить некоторые изменения, приведенные в еще одном посте по теме: http://hackosphere.blogspot.com/2007/07/special-effects-for-peekaboo-posts.html.

Примечание №2. Если Вы выберете "Старые сообщения", то ссылка "Читать далее..." может появиться даже в тех постах, где не использовался блок <span id="fullpost">. Мы знаем об этой проблеме, но решения пока нет.

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

Дальше идет перевод трюка, добавляющего спецэффект плавного проявления/угасания (fade in/out) основной части поста, ссылка на который приведена в примечании №1.

  1. Добавьте этот код непосредственно перед тегом </head>:
    <script type='text/javascript' src=
    'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
    <script type='text/javascript' src=
    'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
    <script type='text/javascript'>
    var fade = true;
    var peekaboo_bgcolor = '#ffffff';
    </script>
    Если цвет фона Вашего блога отличен от белого, то Вам придется изменить значение переменной peekaboo_bgcolor. В данном примере используется белый цвет (#ffffff).
  2. Найдите приведенную ниже часть кода и удалите блок, помеченный красным цветом:
    <div class='post-body'>
    <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    Примечание переводчика: вместо части кода <div class='post-body'> может встречаться строчка <div class='post-body entry-content'>, так что удобнее искать по строке "#fullpost".

Примечание переводчика. Непосредственно линк "Читать далее" работает (это Вы можете видеть на моем блоге), но вот эффект "fade in/out"у меня не заработал. Тем не менее, перевод оставлю. Если у кого-то заработает - свистните, плиз. Если будет свободная минутка, я постараюсь еще сам поковырять.

Update 2008-05-11: ниже привожу в точности кусок моего шаблона. Тут в комментариях пишут, что по инструкции не всегда получается сделать. Но у меня-то работает. Причём инструкцию я писал точненько по следам своих манипуляций. Итак, код этого блога:

1:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName(&#39;span&#39;);
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == &quot;fullpost&quot;) {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = &#39;inline&#39;;
             }
             if (spans[i].id == &quot;showlink&quot;)
                 spans[i].style.display = &#39;none&#39;;
             if (spans[i].id == &quot;hidelink&quot;)
                 spans[i].style.display = &#39;inline&#39;;
        }
}


function hideFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName(&#39;span&#39;);
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == &quot;fullpost&quot;) {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = &#39;none&#39;;
             }
             if (spans[i].id == &quot;showlink&quot;)
                 spans[i].style.display = &#39;inline&#39;;
             if (spans[i].id == &quot;hidelink&quot;)
                 spans[i].style.display = &#39;none&#39;;
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName(&#39;span&#39;);
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == &quot;fullpost&quot;) {
                 spans[i].style.display = &#39;none&#39;;
                 found = 1;
             }
             if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
                 spans[i].style.display = &#39;none&#39;;
        }
}

</script>
</b:if>

2:

<b:includable id='post' var='post'>
  <div class='post hentry' expr:id='&quot;post-&quot; + data:post.id'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

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

    <div class='post-body entry-content'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      <p><data:post.body/></p>

      <b:else/>
        <style>#fullpost {display:none;}</style>
        <p><data:post.body/></p>
        <span id='showlink'>
          <p><a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Читать дальше...</a></p>
        </span>
        <span id='hidelink' style='display:none'>
          <p><a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Свернуть...</a></p>
        </span>
        <script type='text/javascript'>
          checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
        </script>
     </b:if>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

28 комментариев:

  1. У меня есть маленькое дополнение. Самый верхний код должен содержать <![CDATA[ и ]]> иначе шаблон не сохраняется. То есть должно быть в начале :

    <b:if cond='data:blog.pageType != "item"'><![CDATA[
    <script type="text/javascript">
    И в конце:
    </script>
    ]]></b:if>

    Ещё раз спасибо!

    ОтветитьУдалить
  2. Ещё момент.
    Перед тэгом CDATA нужно поставить <-- а после закрытия тэка CDATA -->

    ОтветитьУдалить
  3. Спасибо, друг Zeboton! У меня без этого сохранялось, вроде. Но твои комментарии в любом случае пригодятся! Еще раз спасибо!

    ОтветитьУдалить
  4. Два моих предыдущих сообщения не решают проблему! Они вообще делают нерабочей ссылку "Читать далее".
    Но я нашёл решение. Рабочий код первой вставки здесь. Я заменил символ меньше "<" на его эквивалент в html "&lt;". Парсер ругнулся:
    Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The entity name must immediately follow the '&' in the entity reference.

    Но шаблон сохранил. Как это всё работает можно посмотреть здесь.

    ОтветитьУдалить
  5. Часа 2 наверное код вставлял, эффекта ноль, ссылка "Read More..." упорно не желает работать:(
    Дабы не ругался Блоггер тоже добавил CDATA, по после определения скрипта:
    ...
    <script type='text/javascript'>
    <![CDATA[
    ...
    ]]>
    </script>
    Ругаться перестал и скрипт отобразился в шаблоне, но выпадание не происходит.

    ОтветитьУдалить
  6. Сейчас обновлю исходное сообщение. Надеюсь, поможет.

    ОтветитьУдалить
  7. Анонимный14.07.2008, 01:47

    zdrastvuj!

    pishu po powodu vnedrenija "Читать дальше"
    Ja kak nie probywal, u mienia nie prynimajet kod:(

    Mozet Ty podskazesh kak zdela by zarabotalo?

    Bydu ochen blagodarnyj!

    ОтветитьУдалить
  8. Привет. Какую часть кода не принимает, как ругается при этом?
    Я через часок попробую переформатировать пост. Кажется, после смены шаблона не всё умещается на экран, часть кода обрезается. Попробую всё уместить и отпишу об этом в комментариях.

    ОтветитьУдалить
  9. Большое спасибо. Из всех вариантов отображения/скрытия ката, этот - самый достойный. Отличная работа. У меня заработало сразу, на все ушло меньше 5 минут.

    Удачи.

    ОтветитьУдалить
  10. Рад, что пригодилось. Я, кстати, отказался от этой фичи. Как мне написал один из читателей, такая функция раздражает и при умеренном объёме постов видится лишней. Так что будьте осторожны при использовании - не переусердствуйте.

    ОтветитьУдалить
  11. Анонимный02.01.2009, 03:27

    Первый день как делаю первый блог. Ну вообщем чайник. Знакома немного только с HTML. Блог получился длинной "сухой" колбасой, после того, как я добавила ещё материала. Попробывала линки на новый материал. Ничего не получается. Помогите пожалуйста.

    Наталья.

    ОтветитьУдалить
  12. Наталья, если "первый день первый блог", то ни в коем случае не нужно лезть в HTML или куда-то ещё в шаблоны. Открываем инструкцию на blogger.com, читаем, используем только стандартный шаблон и всё будет нормально. Как помочь ещё при подобной постановке задачи - я не знаю.

    ОтветитьУдалить
  13. Вячеслав, Ваши инструкции всегда самые понятные. Пользовался не раз, даже ссылался на Ваш блог у себя. Но сейчас у меня не всё получается. Вероятно из-за специфики Вашего шаблона не все теги, отмеченные красным в посте, прописались полностью... Можно где-нибудь разместить полный вариант? Буду очень благодарен.
    И ещё вопрос. Кто-нибудь может сказать, как расширить рабочую область шаблона? У кого-то я видел пост на эту тему, но сейчас найти не могу((

    ОтветитьУдалить
  14. Добрый день. Спасибо за комплимент.

    Без проблем могу выслать полностью мой шаблон. Мне не жалко. Сообщите e-mail, на который отсылать.

    ОтветитьУдалить
  15. chipnoise@gmail.com - можно сюда. Заранее спасибо.

    ОтветитьУдалить
  16. Отправил. Всегда пожалуйста.

    ОтветитьУдалить
  17. Привет! Не совсем понятен конечный результат описанного метода! мне интересно 9 смогу ли я таким путем получить на блоге вот такую страницу:
    http://ptcnova.com/faq/ ????
    Т.Е. страница сообщение со списком заглавий и при кликах по ним на той же странице открывается и закрывается пояснительный текст!

    ОтветитьУдалить
  18. Привет. Не люблю, когда используют много восклицательных или вопросительных знаков. Поэтому отвечать не буду. Такое ощущение, что от меня ТРЕБУЮТ ответа и я в чём-то виноват.

    Ты москвич, чтоли? Хотя нет, посмотрел профиль - из Македонии, оказывается. Бывает.

    ОтветитьУдалить
  19. Ну извини за стилистику. Просто хотел уточнить. Было бы неплохо если бы под вариантами кодов давалась ссылка на рабочий вариант. Чтобы можно было увидеть глазами.
    Я когда задавал вопрос действительно искал ответ.
    Не знаю как работает твой код, но я решил этот вопрос при помощи яваскрипта onclick. можешь сравнить теперь .Это то что я хотел получить:
    http://ptcnova.com/faq/
    А это что получилось у меня:http://clicerbar.blogspot.com/2009/03/faq.html

    ОтветитьУдалить
  20. Привет. У тебя красиво получилось. Единственным недостатком такой реализации я вижу то, что при просмотре первой страницы фактически загружается полностью всё. А скрипт управляет только отображением. Это же мне не нравилось в моём варианте. Получается, что ускорения загрузки содержимого не происходит. Есть только сомнительное удобство для пользователя (на любителя на самом деле).

    Вариант, который сейчас у меня используется (см. "Read more test") мне больше нравится, но тоже имеет свои недостатки.

    ОтветитьУдалить
  21. Я по поводу загрузки тоже озадачен слегка!Твой вариант мне не подходит. У меня задача чтоб все происходило так как есть сейчас. Пытаюсь облегчить как можно страницу: убираю все лишнее и даже немного подчистил код, но ускорения пока нет. Не подскажешь- если яваскрипт переместить в основной код (сейчас он у меня в виджете стоит)улучшения будут или тоже самое останется?

    ОтветитьУдалить
  22. Думаю, если JavaScript засунуть в основной код, особенного ускорения ты не получишь, но можешь добиться, чтобы этот код загрузился до появления самой страницы. Это в глазах пользователя создаст иллюзию, что вся страница загрузилась быстрее.

    А если хочешь реально не грузить лишнего - придётся смотреть в сторону Ajax.

    ОтветитьУдалить
  23. Изменился адрес моего блога.Теперь все что писал о :http://clicerbar.blogspot.com
    находится на: http://ptc-payback.blogspot.com/
    А то как то не в тему был :)

    ОтветитьУдалить
  24. Свершилось чудо! В Blogger появился встроенный механизм для разворачивающихся постов (ссылка «Читать далее»). Продолжение этого поста можно не читать (он оставлен просто для истории). Как правильно делать ссылку «Читать далее» в Blogger, написано тут: «Read more in Blogger»

    ОтветитьУдалить
  25. а что делать, если эта функция уже использовалась мною - теперь я хочу от нее отказаться (в блоге не предвидится дальнейших постов под катом) - я потерла код, но "Читать дальше" во всех постах осталось! Что делать?

    ОтветитьУдалить
  26. ой...сама же нашла ответ через 5 минуток :) Нужно нажать галочку в редактировании HTML "Расширить шаблоны виджета" и там удалить этот код, с "Читать далее".
    Но вы все равно опубликуйте мой вопрос-ответ, может кто еще будет искать решение данной проблемы :)
    Спасибо за ваш блог!

    ОтветитьУдалить
  27. Рад, что пригодилось. И спасибо за развёрнутые комменты, они действительно могут кому-нибудь помочь...

    ОтветитьУдалить

Спасибо, что решили оставить комментарий. Ваше мнение очень важно.