понедельник, 11 октября 2010 г.

[Blogger.com] Ссылки постраничной навигации

На Blogger стандартная навигация по страницам архива и отдельным сообщениям оригинальностью не блещет. Две стандартные ссылки «Предыдущие» и «Следующие», да ссылка на главную между ними. Помимо того, что это не оригинально, это, в первую очередь, еще и противо-интуитивно и не удобно: совсем не понятно, почему «Предыдущее» ведет на следующую страницу, а «Следующее» — на уже просмотренную. Здесь временна́я направленность противоречит логической. На мой взгляд, гораздо лучше использовать слова «Раньше» и «Позже».

Текст ссылок Blogger берёт из своих внутренних переменных, но нам способа настроить их не предоставляет. Поэтому находим в шаблоне сегмент nextprev и правим наживую.

Было:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
      expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 
      expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' 
      expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' 
      expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  </div>
  <div class='clear'/>
</b:includable>
Стало:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' 
      expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 
      title='Позже'>← Позже</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' 
      expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' 
      title='Раньше'>Раньше →</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  </div>
  <div class='clear'/>
</b:includable>

Можно на этом не остановиться и пойти дальше. Например, убрать лишнюю ссылку на главную, предвинуть ближе к друг другу 2 наши ссылки и поместить между ними тире. Итоговый вариант кода:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' 
      expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 
      title='Позже'>← Позже</a>
      </span>
      <b:if cond='data:olderPageUrl'>
        —
      </b:if>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' 
      expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' 
      title='Раньше'>Раньше →</a>
      </span>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>
И соответствующие правки в CSS:
#blog-pager-newer-link {
  float: none;
  margin-left: 0px;
  display: inline;
 }

#blog-pager-older-link {
  float: none;
  display: inline;
 }

#blog-pager {
  text-align: center;
  font-weight:bold;
 }
Что получилось, можно увидеть внизу любой страницы этого блога.

5 комментариев

igor

такой даты я не нашел ни на одном шаблоне стандартном блоггеровском, ни на сторонних разработчиков (пробовал пару шаблонов http://btemplate.ru/)
Может там другой какой-то код отвечает за навигацию страниц?
Как вообще убрать эти ссылки внизу страницы, чтобы вообще не листать?

EHUPhotoBlog

спасибо! хотя ссылку на главную всё-таки оставил.
а как можно поменять их местами? просто в скрипте поменять верхнюю часть на нижнюю? просто более логично, когда раньше слева, а позже справа.

SPODIN

Согласен с EHUPhotoBlog
""просто более логично, когда раньше слева, а позже справа.""

как поменять местами??

SPODIN

а вот и решение - добавить СSS:

#blog-pager-newer-link {
float: $endSide;
}

#blog-pager-older-link {
float: $startSide;
}

Жизнь Одного Автора

Спасибо, оказалось весьма кстати ))

Отправить комментарий