Blogger: дата и время для каждого сообщения в блоге

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

Структура шаблона блога на Blogger

Но для начала двайте разберёмся со структурой стандартного шаблона на Blogger. Дело в том, что она подразумевает группировку сообщений опубликованных в один день. Для наглядности я приведу структуру HTML-элементов, генерируемую таким шаблонами в графическом виде.

Здесь элемент blog-posts содержит несколько групп сообщений блога, представленных элементами date-outer. Каждая такая группа состоит из колонтитула даты в элементе date-header и опубликованных в этот день сообщений блога в элементе date-posts. Углубляться дальше в структуру элементов, по красней мере, в рамках решаемой нами задачи, не имеет смысла. Главное чтобы Вы поняли суть положения вещей.

Сама же проблема заключается в том, что шаблонная переменная data:post.dateHeader, которая выводит дату публикации сообщений, возвращает значение только для первого сообщении в группе date-outer. Для второго, третьего и т.д. сообщения блога будет возвращаться пустое значение.

По всей видимости, так было сделано из-за необходимости решить задачу в рамках одного цикла (англ. loop) вывода сообщений. Пустое значение здесь сигнализирует о необходимости вставки «разрыва», т.е. колонтитула с датой. С моей точки зрения, на данный момент, такое решение лишено смысла, т.к. мы имеем шаблонную переменную data:post.isDateStart, но не зная броду не лезть в воду, поэтому я лишь констатирую то, что есть.

Дата и время публикации сообщения

Если с этим разобрались, давайте ещё раз уточним, что для вывода даты колонтитула группы сообщений используется шаблонная переменная data:post.dateHeader, а также отметим, что для вывода отметки времени для каждого сообщения блога используется шаблонная переменная data:post.timestamp.

Примечательно здесь то, что формат вывода этих шаблонных переменных мы можем изменять в настройках блога, см. Настройки > Язык и форматирование – где нас интересует секция «Форматирование».

Впрочем, есть и ещё одна шаблонная переменная, которая отвечает за вывод даты и времени в формате ISO 8601 и это data:post.timestampISO8601. Проблема в том, что изменить формат её вывода в настройках блога не получится. По сути, она была добавлена только для того, чтобы использовать в микроразметке, но и она может быть использована для решения нашей задачи.

Дублирование даты колонтитула в подвал сообщения

Одним из наиболее часто используемых решений явялетсяо перенос даты из колонтитула группы сообщений в нужное место путём использования JavaScript переменной.

Перейдите в раздел «Шаблон» вашего блога на Blogger и кликните кнопку «Изменить HTML». В поле редактирования отобразится код шаблона, где нас сейчас интересует секция <b:includable id='main' var='top'>, а точнее следующий её фрагмент:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

У Вас он может выглядеть несколько иначе, но суть от этого не меняется. Главное, что нам нужно убрать колонтитул даты и присвоить значение шаблонной переменной data:post.dateHeader JavaScript переменной (например) DateScript. Конечный фрагмент кода будет иметь вид:

<b:if cond='data:post.dateHeader'>
  <script>var DateScript = &#39;<data:post.dateHeader/>&#39;;</script>
</b:if>

Для понимания происходящего, рекомендую вернуться к структуре шаблона на Blogger. Сейчас мы заменили колонтитцл элемента date-header, выводимый в начале группы сообщений блога элемента date-posts, JavaScript кодом, который присваивает это значение переменной DateScript. Таким образом, для каждого сообщения группы будет доступно требуемое значение даты.

Вставить дату в тот же подвал сообщения можно, перейдя к секции <b:includable id='post' var='post'>, а точнее следующему её фрагмент:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

У Вас он может выглядеть несколько иначе, но суть от этого не меняется. Главное, что перед шаблонной переменной data:top.timestampLabel нам надо вставить вывод JavaScript переменной DateScript. Конечный фрагмент кода будет иметь вид:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <script>document.write(DateScript);</script>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

Такое решение оптимально, т.к. позволяет изменять формат вывода даты и времени в настройках блога, но есть и другой вариант.

Преобразование даты и время из ISO 8601 в нужный формат

Я не зря упомянул о шаблонной переменной data:post.timestampISO8601, которая возвращает сразу дату и время, но только в формате ISO 8601, например: 2014-09-03T12:30:00+03:00. Очевидно, что такое представление даты и времени выглядит не очень привлекательно, но, используя JavaScript, мы можем легко это исправить.

Перейдите в раздел «Шаблон» вашего блога на Blogger и кликните кнопку «Изменить HTML». В поле редактирования отобразится код шаблона, где нас сейчас интересует секция <b:includable id='main' var='top'>, а точнее следующий её фрагмент:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Его нам нужно удалить, а лучше закомментировать, чтобы если что вернуть всё обратно. Конечный фрагмент кода будет иметь вид:

<b:if cond='data:post.dateHeader'>
  <!--<h2 class='date-header'><span><data:post.dateHeader/></span></h2>-->
</b:if>

Далее нас интересует секция <b:includable id='post' var='post'>, а точнее следующему её фрагмент:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
    </b:if>
  </b:if>
</span>

Здесь нам нужно убрать временную метку и вставить преобразование значения шаблонной переменной data:post.timestampISO8601 через JavaScript с сохранением микроформата. Преобразование будет осуществляться за счёт JavaScript объекта Date(), который преобразует строку в объект, с которым можно будет работать. Я не хочу усложнять задачу, и потому буду использовать метод toLocaleString(). Сохранить же микроразметку нам поможет тег meta. Конечный фрагмент кода будет иметь вид:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
      <meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
      <script>document.write(new Date(&#39;<data:post.timestampISO8601/>&#39;).toLocaleString())</script>
    </b:if>
  </b:if>
</span>

При желании Вы можете значительно видоизменить формат вывода даты и время, но уже не через настройки блога, а через JavaScript.

Подводя итог Выше сказанному нужно отметить, что в системе шаблонов блогов на платформе Blogger не хватает шаблонной переменной для вывода даты публикации сообщений блога. Тем не менее, мы можем решить и эту проблему. Главное понимать, что и как работает, а остальное дело техники. На это у меня всё. Спасибо за внимание. Удачи!