Выводим блок друзей на главную страницу в любую часть сайта.

Цель скрипта

Скрипт делает следующее:

1. Получает список друзей пользователя с сервера (страницы /blog/...).

2. Сохраняет их локально в кэш браузера (localStorage) на 24 часа, чтобы не перезагружать данные каждый раз.

3. Отображает до 6 друзей на странице с аватарками и никами.

4. Счётчик показывает реальное количество друзей, даже если на экране только 6 карточек.

5. Клик по аватарке или нику открывает профиль в той же вкладке.

6. Подставляет дефолтную аватарку, если у пользователя нет изображения.

Логика работы пошагово

a) Проверка авторизации

Код

<?if(!$USER_LOGGED_IN$)?>
    $('#friends-count').text('Друзей нет');
    $('.vk-friends').empty();
    return;
<?else?>

Если пользователь не авторизован, показывается «Друзей нет» и скрипт прекращает работу.
Это предотвращает ошибки при попытке загрузки друзей неавторизованного пользователя.

b) Настройки кэширования

Код

const CACHE_KEY = 'friends_' + USER_ID;
const CACHE_TIME_KEY = CACHE_KEY + '_time';
const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 часа

Скрипт использует localStorage браузера для хранения списка друзей.
CACHE_TTL время жизни кэша (24 часа).

Это ускоряет загрузку, не делая лишние запросы на сервер, если данные не изменились.

c) Получение друзей с сервера

Код

$.get('/blog/0-0-1-0-17-' + USER_ID, function(html) { ... });

Скрипт делает AJAX-запрос на страницу, где находится информация о друзьях.
Сервер возвращает HTML-код, который мы разбираем с помощью jQuery:

Код

const $data = $('<div>').html(html);
const $items = $data.find('.friend');

$items массив блоков HTML, каждый блок содержит информацию о друге: ник, аватар, ссылку на профиль.

d) Парсинг данных

Код

$items.each(function() {
    const $el = $(this);
    friends.push({
        nick: $el.find('.nick').text().trim(),
        ava: $el.find('.ava').text().trim(),
        profile: $el.find('.url').text().trim() || '#'
    });
});

Скрипт создаёт массив объектов friends, каждый объект содержит:

nick — ник друга

ava — URL аватарки

profile — ссылка на профиль

Если аватарки нет, потом подставляется дефолтная картинка при рендере.

e) Кэширование

Код

localStorage.setItem(CACHE_KEY, JSON.stringify(friends));
localStorage.setItem(CACHE_TIME_KEY, Date.now());

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

f) Рендер карточек

Код

friends.slice(0,6).forEach(f => { ... });

На экран показываются только первые 6 друзей (slice(0,6)).

Каждая карточка содержит:

Аватар

Ник (под ним)

Вспомогательные data-свойства, например profile

Клик по аватарке или нику переход в профиль:

Код

$card.on('click', function() {
    const url = $(this).data('profile');
    if(url && url !== '#') window.location.href = url;
});

g) Счётчик друзей

Код

$counter.text(friends.length + ' друзей');

Счётчик показывает реальное количество друзей, даже если на странице отображается только 6 карточек.

h) Дефолтная аватарка

Код

const DEFAULT_AVA = '/.s/src/profile/img/profile_photo_thumbnail.png';
const avatar = f.ava || DEFAULT_AVA;

Если у пользователя нет аватарки, автоматически подставляется стандартная картинка.

Итоговая архитектура

Проверка авторизации → если нет, выход.

Кэширование → localStorage хранит данные 24 часа.

AJAX-запрос → парсит HTML с сервера, достаёт ник, аватар, ссылку.

Сохранение в кэш → обновляет localStorage.

Рендер карточек → максимум 6 на странице.

Счётчик → показывает реальное количество друзей.

Клики → аватарка и ник ведут в профиль на той же вкладке.

Дефолтная аватарка → подставляется, если нет изображения.

Создаем глобальный блок и вставляем.

Код

<style>
/* базовый контейнер */
.vk-old-block {
  background: #fff;
  border: 1px solid #d1d5da;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
  color: #000;
  width: 100%;
  max-width: 600px;
}

/* заголовок */
.vk-old-header {
  background: #f0f2f5;
  padding: 6px 8px;
  border-bottom: 1px solid #d1d5da;
  color: #45688e;
  font-weight: bold;
}

/* контент */
.vk-old-content {
  padding: 10px 8px;
}

/* список друзей */
.vk-friends {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 20px;
  column-gap: 10px;
}

/* карточка друга */
.vk-friend {
  width: 88px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.vk-friend img {
  width: 78px;
  height: 78px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  transition: 0.3s ease;
}

.vk-friend::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 88%;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: 0.3s ease;
}

.vk-friend:hover::after {
  opacity: 1;
}

.vk-friend span {
  display: block;
  margin-top: 4px;
  color: #45688e;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* нижняя полоса */
.vk-old-footer {
  background: #f7f7f7;
  border-top: 1px solid #d1d5da;
  padding: 5px 8px;
  color: #666;
  font-size: 13px;
}
</style>

<div class="vk-old-block">
  <div class="vk-old-header">Друзья</div>
  <div class="vk-old-footer" id="friends-count">0 друзей</div>
  <div class="vk-old-content">
    <div class="vk-friends"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(function() {
    <?if(!$USER_LOGGED_IN$)?>
        $('#friends-count').text('Друзей нет');
        $('.vk-friends').empty();
        return;
    <?else?>

    const USER_ID = '$_USER_ID$';
    const CACHE_KEY = 'friends_' + USER_ID;
    const CACHE_TIME_KEY = CACHE_KEY + '_time';
    const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 часа

    const $container = $('.vk-friends');
    const $counter = $('#friends-count');

    // Рендерим карточки друзей
    function renderFriends(friends) {
        $container.empty();
        if(!friends.length) {
            $counter.text('Друзей нет');
            return;
        }

        const DEFAULT_AVA = '/.s/src/profile/img/profile_photo_thumbnail.png';
        
        // Ограничиваем отображение карточек до 6 друзей
        friends.slice(0,6).forEach(f => {
            const avatar = f.ava || DEFAULT_AVA;
            const name = f.nick || 'Без имени';
            const profile = f.profile || '#';

            const $card = $(`
                <div class="vk-friend">
                    <img src="${avatar}" alt="${name}">
                    <span>${name}</span>
                </div>
            `);

            // Сохраняем ссылку на профиль
            $card.data('profile', profile);

            // Клик по аватарке или нику → переход в профиль в той же вкладке
            $card.on('click', function() {
                const url = $(this).data('profile');
                if(url && url !== '#') window.location.href = url;
            });

            $container.append($card);
        });

        // Счетчик показывает реальное количество друзей
        $counter.text(friends.length + ' друзей');
    }

    // Получаем друзей с кэшированием
    function fetchFriends(forceUpdate = false) {
        const cached = localStorage.getItem(CACHE_KEY);
        const cacheTime = localStorage.getItem(CACHE_TIME_KEY);

        if(!forceUpdate && cached && cacheTime && (Date.now() - cacheTime < CACHE_TTL)) {
            renderFriends(JSON.parse(cached));
        }

        $.get('/blog/0-0-1-0-17-' + USER_ID, function(html) {
            const $data = $('<div>').html(html);
            const $items = $data.find('.friend');
            if(!$items.length) {
                renderFriends([]);
                return;
            }

            const friends = [];
            $items.each(function() {
                const $el = $(this);
                friends.push({
                    nick: $el.find('.nick').text().trim(),
                    ava: $el.find('.ava').text().trim(),
                    profile: $el.find('.url').text().trim() || '#'
                });
            });

            // Сохраняем в кэш
            localStorage.setItem(CACHE_KEY, JSON.stringify(friends));
            localStorage.setItem(CACHE_TIME_KEY, Date.now());

            renderFriends(friends);
        });
    }

    // Запускаем загрузку
    fetchFriends();

    <?endif?>
});
</script>

Теоретически, мы можем реализовать функционал аналогичный ВКонтакте: скрывать эту страницу от гостей. Для этого создадим отдельную страницу авторизации. После успешного входа пользователь будет перенаправляться на эту страницу, где будет отображаться его профиль с друзьями и другими личными данными.

Мурчанн

1