Читать дальше-2 или внедряем Peekaboo view в 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>