четверг, 9 сентября 2010 г.

[Blogger.com] Улучшенное отображение даты поста в блоге на Blogger

Сегодня добавим еще больше человечности Blogspot-у и научим его словам вчера и сегодня.

Вы наверняка замечали на многих сайтах «умное» отображение даты сообщений, когда вместо (или вместе с) конкретного числа и месяца дата указывается словами только что, сегодня, вчера и т.п. И действительно, незачем заставлять посетителя вспоминать текущую дату и тянуться к календарю, каждый раз когда он хочет понять, насколько свежая информация представлена в блоге.

В отличие от предыдущей задачи с комментариями, которая была решена при помощи шаблонов, в этот раз нам понадобится javascript.

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

К слову, в данном случае одним из неявных преимуществ реализации на javascript является то, что скрипт будет корректно работать, даже если посетитель сохранит вебстраницу блога на своём компьютере. Например, сохранив свежую статью блога на жесткий диск и открыв её на следующий день, он вместо слова сегодня увидит вчера, а еще через день — точную дату вместо вчера.

Итак, сам скрипт:

<script type='text/javascript'>

    var today = new Date();
    var yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1);

    var months = [ 'января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля',
        'августа', 'сентября', 'октября', 'ноября', 'декабря'];
    var dateheaders = document.getElementById('content-wrapper').getElementsByClassName('date-header')
    for (key in dateheaders) {
        var dateheader = dateheaders[key]
        var innerHTML = dateheader.innerHTML.replace('&amp;nbsp;', ' ').replace('&amp;#160;', ' ');
        var d = innerHTML.match(/,\s+(\d+)\s+(.+?)\s+(\d+)/)
        for (key in months) {
            if (months[key] == d[2]) {
                d[2] = Number(key)
                break;
            }
        }
        if (d[1] == today.getDate() &amp;&amp; d[2] == today.getMonth() &amp;&amp; d[3] == today.getFullYear())
        {
            dateheader.title = innerHTML
            dateheader.innerHTML = 'сегодня'
        }
        else if (d[1] == yesterday.getDate() &amp;&amp; d[2] == yesterday.getMonth() &amp;&amp; d[3] == yesterday.getFullYear())
        {
            dateheader.title = innerHTML
            dateheader.innerHTML = 'вчера'
        }
    }

</script>

Чтобы подключить скрипт к блогу, достаточно скопировать его и вставить перед закрывающим тегом </body>.

Update. Если у вас во всплывающей подсказке будут появляться лишние span-теги, найдите место в шаблоне блога, где выводятся даты:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
И уберите бесполезный тег span:
<h2 class='date-header'><data:post.dateHeader/></h2>

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