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>