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

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

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

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

структура шаблона в Blogger

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

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

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

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

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

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

настройка форматы даты и времени в Blogger

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

Twitter Facebook ВКонтакте Одноклассники Google+

13 комментариев:

Маруся Петрова
Константин, добрый день!
Даже не знаю, в том ли месте я пишу комментарий. С моим блогом возникла досадная проблема - не могу удалить пост, опубликованный "в будущем".
Вот блог: http://www.play-cat.ru/
На старом шаблоне blogger (самый простой, по умолчанию) был заведен "пост, который всегда наверху", датированный 3 мая 2015 года.
В нем прописан слайдер.

При смене шаблона данный слайдер-пост оказалось невозможно удалить.
Что было сделано: заменено содержимое данного поста (сейчас это самый верхний "Вот где я хочу работать"). Сделать черновиком пост не получается, дату сменить - лишь в пределах месяца. На попытки удалить или глобально изменить дату выдает сообщение "Не удалось выполнить запрос.
Сообщая об этой ошибке в службу технической поддержки или в справочную группу Blogger, выполните указанные ниже действия.
Опишите, что вы делали в момент появления ошибки.
Укажите приведенный ниже код ошибки.
bX-eb0gsd" (код ошибки каждый раз разный)
Я уж совсем отчаялась. Может быть, подскажете какую-то идею, как мне удалить этот пост?!
Константин Кирилюк
2Маруся Петрова а это точно именно пост, а не отдельный гаджет? Посмотрите в разделе "Дизайн".

В остальном сказать что-то сложно, надо иметь доступ администратора к блогу, чтобы разобраться. Если захотите так сделать, то обратитесь к Сергею.
Маруся Петрова
Да, в тело поста был прописан код слайдера. Спасибо за рекомендацию!
Константин Кирилюк
2Маруся Петрова нет, похоже что слайдер был прописан не в тело поста, а в сам шаблон как отдельный "гаджет"... ещё раз рекомендую посмотреть в разделе "Дизайн" панели управления блогом на Blogger.
Маруся Петрова
Слайдер все же был прописан в тело поста, ибо я сама это делала... И я сейчас снесла шаблон и установила новый, естественно, что все гаджеты из "Дизайна" также удалила.
Константин Кирилюк
2Маруся Петрова смена шаблона не влияет на гаджеты, но что-то утверждать не возьмусь... надо смотреть.
Эдуард Сингилеев
Не работает Ваша схема, пойду искать дальше
Константин Кирилюк
2Эдуард Сингилеев С технической точки зрения всё должно работать, т.к. используемые в примере шаблонные переменные не потеряли своей актуальности. Безусловно, каждый шаблон имеет свои нюансы. Лично я всегда начинаю со стандартного шаблона Simple от Josh Peterson. Другими словами, могут быть отличия, которые потребуют большего внимания к деталям. Если вас это не устраивает, то безусловно, вам нужно искать другое решение. Удачи!
Эдуард Сингилеев
Снова решил заняться этой проблемой и снова поиск мне выдал вашу статью) ладно попробую еще раз, но только на тестовом шаблоне, вникнуть.
Эдуард Сингилеев
Понял в чем проблема, скрипт не работает походу, ой ладно, все-таки дальше пошел. Я хочу сделать дату над каждым постом, я правильно понял, вы об этом рассказывали? Просто меня смутил первый подзаголовок - Дублирование даты колонтитула в подвал сообщения
Константин Кирилюк
2Эдуард Сингилеев
1. Да, есть одна особенность в использовании JavaScript и CDATA. Дело в том, что CDATA запрещает интерпретацию шаблонных переменных, а без него приходится использовать вместо тех же одинарных кавычек (') мнемонику &#39;

2. Следует отметить и то, что создание JavaScript переменной DateScript должно происходить в цикле loop обычно находящемя в includable с id='main'. В то время как вставка переменной DateScript в любое место вывода поста в includable с id='post'.

3. С преобразованием даты все немного попроще, т.к. шаблонная переменная data:post.timestampISO8601 относится к в includable с id='post' и вам просто надо убрать вывод data:post.dateHeader в includable с id='main'.
NMitra
Здравствуйте, Константин. Не встречали ли тег даты публикации, а не обновления? Я пока вытянула data:post.dateHeader data:post.lastUpdatedISO8601 data:post.timestampISO8601 data:post.timestamp. Но при обновлении статьи они все меняются на текущее число.
Константин Кирилюк
2NMitra только то, что написано в статье.
Отправить комментарий