суббота, сентября 05, 2009

Blogger. Умное "разворачивание" статей.

Я долго думал как по-понятнее назвать эту статью. В итоге получилось то, что получилось.

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

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

  1. Как обычно идем в редактирование шаблона Макет → Изменить HTML (галочку «Расширить шаблоны виджета» нужно активировать)
  2. Вставляем следующую конструкцию перед закрывающим тегом </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 &lt; 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 &lt; 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 &lt; spans.length; i++) {
                 if (spans[i].id == "fullpost") {
                     spans[i].style.display = 'none';
                     found = 1;
                 }
                 if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                     spans[i].style.display = 'none';
            }
    }
    
    </script>
    </b:if>
    
  3. Ищем <div class='post-body'> и вставляем то, что ниже показано красным цветом:
       <div class='post-body'  expr:id='"post-" + data:post.id' >
    
         <b:if cond='data:blog.pageType == "item"'>
            <style>#fullpost{display:inline;}</style>
            <p><data:post.body/></p>
         <b:else/>
            <style>#fullpost{display:none;}</style>
    
            <p><data:post.body/></p>
    
           <span id='showlink'>
            <a expr:href='data:post.url'>Read More......</a>
           </span>
           <script type='text/javascript'>
             checkFull("post-" + "<data:post.id/>");
           </script>
         </b:if>
    
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
    
  4. Статья сокращается стандартно — <span id="fullpost"></span>

© Hackosphere

UPD: Теперь эта функция реализовывается штатными методами движка Blogger