Как изменить порядок статей в Блоггере

Опубликовано:

Блоггер не позволяет изменить порядок статей. По умолчанию статьи показываются начиная с самой последней вниз к более ранним, что называется обратным хронологическим порядком. Иногда владельцы блогов хотят это исправить и им приходится прибегать к различным способам обхода ограничений блог-платформы.

Способы решения зависят от того, что именно нужно сделать:
  • частично изменить порядок только для статей, отображаемых на главной; то есть, если у вас 100 статей, и в настройках блога указано отображать 10 последних на главной, то вот для этих 10 последних и будет изменён порядок;
  • полностью изменить порядок для всех статей в блоге; в этом случае главная всегда будет отображать первые N постов по возрастанию даты публикации (N задаётся в настройках блога) и для того, чтобы достичь последней статьи, нужно пролистать блог до конца;

Частичное изменения порядка

Вообще, способов это сделать несколько, но вам стоит серьёзно рассматривать только один — использование Flexbox. Flexbox — это набор CSS правил (что такое CSS) для организации блоков HTML страниц. Есть и другие CSS и JS трюки, но Flexbox сочетает одновременно простоту и отсутствие недостатков, сопровождающих другие подходы. Если есть желание, можем обсудить это подробнее в комментариях или отдельной статьёй. Единственный минус Flexbox — это отсутствие или неполная поддержка в старых браузерах, таких как IE8, IE9 или старые версии браузера на телефонах под управлением Android. Суммарно этими браузерами пользуется около 5% читателей, на такие цифры принято не обращать внимания.
Приводить полное описание Flexbox в рамках данной статьи не имеет смысла, это слишком объёмная тема. Применительно к нашей задаче вам стоит помнить, что нет универсального подхода, позволяющего изменить порядок статей для любого шаблона. В частности, это не сработает для динамических шаблонов или шаблонов, уже так или иначе меняющих порядок статей (как, например, этот). Мы рассмотрим изменения, которые нужно будет внести в самый базовый шаблон Simple, это даст вам понимание принципов, которым нужно следовать. Перед внесением изменений в свой шаблон обязательно сделайте копию!
Итак, помимо прочего, при использование Flexbox можно изменить порядок следования блоков внутри элемента-контейнера. В случае с Simple контейнером является элемент, содержащий внутри себя все статьи. Откройте шаблон в редакторе, найдите строку "blog-posts". Вы увидите что-то вроде
<b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
      ...
здесь написано, что если это не мобильная версия, то внутри элемента-контейнера div с классами blog-posts и hfeed нужно отобразить все статьи. Далее не так очевидно, но каждая статья тоже будет отображена в своём блоке — div элементе с классом date-outer. Это всё, что нам нужно знать. Далее необходимо добавить несколько CSS правил для классов blog-posts и date-outer. Для стандартных шаблонов делать это лучше в Дизайнере: Затем в первой колонке выбрать "Дополнительно", а вторую пролистать в самый низ и выбрать "Добавить CSS":

Если так сделать не удаётся, то можно добавлять стили прямо в шаблон в секцию <b:skin> или в любое место (ну почти) между тэгами <style>...</style>.

Добавить нужно следующие стили:

.blog-posts,
   .date-posts {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
     -webkit-flex-direction: column-reverse;
         -ms-flex-direction: column-reverse;
             flex-direction: column-reverse;
   }

   .date-outer,
   .post-outer {
     -webkit-box-flex: 0;
     -webkit-flex: 0 0 auto;
         -ms-flex: 0 0 auto;
             flex: 0 0 auto;
   }

Отдельно стоит заметить, что шаблон Simple группирует статьи за одну дату внутри единственного контейнера date-outer. Благо, он дополнительно оборачивает их в контейнер с классом date-posts, а каждый пост — ещё в post-outer. А с этим уже можно работать схожим образом, что и отражено в стилях.

После того, как вы примените стили к блогу, порядок статей на главной странице изменится. Также изменится он и при отображении статей по меткам. Проблемы могут быть с мобильным шаблоном. Если порядок при мобильном просмотре (добавьте к адресу блога ?m=1) не изменился, возможно, вам поможет смена мобильного шаблона с "По умолчанию" на "Дополнительно": в настройках выберите Шаблон, затем во второй колонке "На мобильных" кликните на иконку с изображением шестерёнки; в разделе "Выберите мобильный шаблон" укажите "Дополнительно". Сохраните и проверьте результат, должно заработать.

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

Полное изменение порядка

Во-первых, задумайтесь, действительно ли нужно вам это делать. Вы пишете роман? Возможно, Блоггер — это не то, что вам требуется. Как ваши читатели будут попадать на последний пост, будет ли им удобно? Как к таким трюкам отнесутся поисковые роботы? Если вы твёрдо уверены, то приступим. Решение есть, даже несколько. Кстати, ни одно из них не будет изящным, быстрым или универсальным.

За исключением первого варианта, описанного ниже, общим подходом к решению поставленной задачи является манипуляция с фидом (лентой) блога. У каждого блога на платформе Блоггер есть лента сообщений, доступная по адресу ВАШ_БЛОГ/feeds/posts/default, которая, в зависимости от настроек, содержит частично или полностью все ваши статьи. Остаётся только выбрать их в нужном порядке и отобразить на главной странице блога, попутно подменив ссылки на следующие/предыдущие посты. По желанию это же можно сделать и для фильтров по меткам. Если вы знаете JS и не прочь погрузиться в документацию Блоггера, то этой информации вам уже должно быть достаточно. Для всех же остальных существуют готовые реализации данного механизма. Мне тоже лень заново изобретать колесо, так что я просто пройдусь по нескольким решениям. А ещё я не буду приводить здесь код, который вам нужно вставлять в шаблон, но дам ссылки на первоисточники. Причина проста: если авторы оригинальных решений найдут ошибки или просто захотят что-то изменить, они сделают это у себя в блогах. Если я буду копировать код сюда, он навсегда останется старым. Приступим.

Вариант 1

Весьма изощрённый, но не лишённый изворотливости способ, предложенный неким финским блогером. Суть его заключается в следующем:

  1. если в адресе страницы присутствует параметр order=ASC, то все посты на этой странице ставятся в обратном порядке при помощи JS;
  2. затем находятся ссылки "Следующие" и "Предыдущие" и к ним добавляется параметр order=ASC, чтобы при листании по страницам порядок соблюдался;
  3. Пока что всё это по результату сильно напоминает то, что мы делали для частичного изменения порядка. Так как же сделать его полным? Для этого вместо главной страницы, где показываются только последние статьи, рекомендуется использовать возможности поиска, добавив к адресу блога такой хвост (пример из блога автора):
    /search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7
    что позволит получить первые статьи, начиная с указанной даты (ставьте дату первой своей записи) блоками по 7.

Великолепно! И позволяет не мешать тем, кто хочет читать блог с обычным порядком статей, ведь без параметра order=ASC всё будет работать как обычно. Минус только в том, что на главной странице блога статьи так и не будут начинаться с самой первой. Кстати, это можно исправить перенаправлением на нужную страницу с помощью того-же JS. Ну и разумеется, с большой вероятностью всё это не будет работать на нестандартных шаблонах, потому что код опирается всё на те же классы контейнеров (blog-posts и другие). Подгонку под другие шаблоны нужно делать самостоятельно.

Вариант 2

Тот же автор, но на этот раз всё серьёзно, с использованием ленты, с отображением развёрнутой версии на отдельной странице. Впрочем, всё это можно проделать и прямо на главной странице.

  1. скрипт загружает последние 500 записей из фида. 500 - это ограничение блоггера, которое, впрочем, может быть преодолено, но это не совсем просто;
  2. затем находит нужную часть из 7 (у автора, число можно менять) статей, формирует HTML и вставляет на страницу. Под нужной частью я имею в виду поддержку листания по страницам - она тоже есть;

Недостатки: каждая загрузка страницы с 7 статьями в фоне загружает все(!) записи блога. Ну или 500 последних, если у вас их больше. Накладные расходы огромны. Плюс нет никакой информации о комментариях, и придётся изрядно повозиться, если в блоге больше 500 записей.

Вариант 3

Хроноблог — любопытное решение в виде гаджета, превращающего блог в набор статей, отображаемых по одной, начиная с самой первой. Поясню: вы добавляете специальный гаджет, который точно так же читает ленту (помним про накладные расходы) и показывает только один пост на главной странице. С возможностью листать назад и вперёд на одну запись. Гаджет запоминает, где остановился читатель и при открытии блога в следующий раз возвращает читателя к правильной статье. Более того, никакой возни с шаблоном — перейдите по ссылке, задайте желаемые параметры в форме (адрес блога, текст меток, размеры) и нажмите кнопку "Add Chronoblog to your blog" и гаджет будет добавлен в ваш блог автоматически (после вашего согласия, разумеется).

Вариант 4

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

Важное замечание. Ни один способ, опирающийся на фид, не будет работать для приватных блогов, потому что лента для них не формируется.

На этом всё. Задавайте вопросы в комментариях. Кстати, у кого-нибудь была реальная необходимость менять порядок статей в блоге? Что это были за случаи?


Ярлыки:
| Издатель: +BlogopoiskRu |