Как сделать карту блога по ярлыкам для Blogspot: Как создать страницу Sitemap по категориям в Blogger

Как создать карту блога на Blogspot по рубрикам

Статическая HTML Sitemap создаётся для читателей блога. Она работает как детальное оглавление или путеводитель по страницам блога

Что такое карта блога по ярлыкам и почему её ещё называют статической?

• Карта блога на Blogger, сгенерированная по ярлыкам (рубрикам, категориям), представляет собой автоматический список всех публикаций, сгруппированных по категориям, которые используются в блоге.
• Это удобный способ помочь читателям найти все записи, посвящённые определённой теме, используя ярлыки, назначенные вашим публикациям.
• Создать визуальную карту сайта (HTML-карту) с группировкой публикаций по рубрикам (ярлыкам) в Blogger можно с помощью специального кода, который автоматически считывает RSS-ленту вашего блога и формирует список публикаций по соответствующим категориям (ярлыкам).

📌Примечание. Предлагаю несколько вариантов таких карт: в виде списка статей соответствующих ярлыков (Рубрик) и в виде таблицы. Оба формата отлично подходят для Blogger и легко реализуются стандартными средствами платформы.

Как вывести все сообщения на отдельной странице Blogger по ярлыкам (рубрикам)

1. Вариант. В виде списка статей соответствующих ярлыкам (рубрикам).
   1. Переключите режим редактора с визуального на HTML: нажмите на иконку карандаша в левом верхнем углу редактора и выберите Режим HTML.
   2. Вставьте нижеприведенный код на отдельную страницу.
   3. Blogger автоматически сформирует список всех ярлыков (рубрик, категорий) с ссылками.

👁️ Демо просмотр карты

<style>
  .sitemap-container {
    font-family: inherit;
    line-height: 1.6;
  }
  .sitemap-block {
    margin-bottom: 25px;
    clear: both;
  }
  /* Оформление заголовка рубрики (ярлыка) */
  .sitemap-label {
    font-size: 1.2em;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #007acc;
    display: flex;
    align-items: center;
    gap: 8px;
  }
.sitemap-label::before {
  content: "\1F3F7";        /* Unicode-символ иконки ярлыка */
  color: #FFD700;           /* Яркий золотой/желтый цвет */
  font-size: 26px;          /* Размер иконки */
  font-weight: bold;        /* Жирное написание */
  margin-right: 8px;        /* Отступ справа от иконки до текста */
  vertical-align: middle;   /* Выравнивание иконки по центру строки */
  display: inline-block;    /* Позволяет корректно применять размеры и выравнивание */
}
  
  /* Список статей справа с отступом */
  .sitemap-list {
    margin: 10px 0 20px 25px;
    padding: 0;
    list-style-type: disc;
  }
  .sitemap-list li {
    margin-bottom: 6px;
  }
  .sitemap-list a {
    color: #007acc;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .sitemap-list a:hover {
    color: #005999;
    text-decoration: underline;
  }
</style>

<div id="category-sitemap" class="sitemap-container">Загрузка карты сайта...</div>

<script>

function loadtoc(json) {
  var entries = json.feed.entry || [];
  var categories = {};

  // Разбор постов и группировка по ярлыкам (рубрикам)
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var href = "";
    
    if (entry.link) {
      for (var j = 0; j < entry.link.length; j++) {
        if (entry.link[j].rel === "alternate") {
          href = entry.link[j].href;
          break;
        }
      }
    }

    var cats = entry.category || [{ term: "Без рубрики" }];
    for (var k = 0; k < cats.length; k++) {
      var catName = cats[k].term;
      if (!categories[catName]) {
        categories[catName] = [];
      }
      categories[catName].push({ title: title, url: href });
    }
  } 
  var html = "";
  var sortedCategories = Object.keys(categories).sort();

  for (var c = 0; c < sortedCategories.length; c++) {
    var cat = sortedCategories[c];
    html += '<div class="sitemap-block">';
    html += '<div class="sitemap-label">' + cat + '</div>';
    html += '<ul class="sitemap-list">';
    
    for (var p = 0; p < categories[cat].length; p++) {
      var post = categories[cat][p];
      html += '<li><a href="' + post.url + '">' + post.title + '</a></li>';
    }
    
    html += '</ul>';
    html += '</div>';
  }

  document.getElementById("category-sitemap").innerHTML = html;
}
</script>

<!-- Загрузка данных RSS из Blogger -->
<script src="https://ваш-блог.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
    

📌 Количество статей: Параметр max-results=500 в последней строчке кода указывает на загрузку до 500 последних публикаций. Если на вашем блоге больше статей, значение можно увеличить.
Названия рубрик: Код берет названия категорий (рубрик) прямо из ярлыков (Labels) публикаций. Каждая статья автоматически отобразится в блоке соответствующего ярлыка.

2. Вариант. В виде таблицы статей по категориям (рубрикам, ярлыкам). 

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

🔍 Посмотреть демо карты-таблицы

Как добавть код карты на отдельную страницу в Blogger

• Зайдите в Blogger → Страницы → Создать страницу
• Введите название страницы (например: Все сообщения)
• Переключитесь в режим HTML (《》«HTML»)
• Вставьте код карты * в виде таблицы

×

📌Примечание.

• Незабудьте заменить — для первого варианта https://ваш-блог.blogspot.com/ на свое название
• Скрипт для варианта 2 (*) — https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js — лучше скачать и загрузить себе, например используя приложение Google — Google Apps Script.
• После вставки любого из кодов нажмите Сохранить и затем Опубликовать страницу.
• Откройте страницу в блоге — появится вновь созданная карта блога по ярлыкам (рубрикам).
• Чтобы добавить страницу в меню:
  • Перейдите в Дизайн → Добавить гаджет (гаджет «Страницы»).
  • Добавьте новую страницу со ссылкой на только что созданную.