Список пользователей

1
Админ
Постов: 288
2
VIP
Постов: 75
3
Элита
Постов: 62
4
Проверенные
Постов: 46
5
Проверенные
Постов: 45
6
Проверенные
Постов: 39
7
VIP
Постов: 36
8
VIP
Постов: 35

  • Страница 1 из 1
  • 1
VK Комментарии v6.1 — новый функционал для uCoz ...Июнь 2026
Дата: Суббота, 13.06.2026, 15:10 | Сообщение # 1 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

Современная система комментариев для uCoz: скорость, удобство и умное кэширование

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

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

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

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

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

Не остались без внимания и инструменты управления комментариями. Реализована возможность удаления сообщений, а также полноценная система рейтинга с поддержкой лайков и дизлайков. Изменение рейтинга отображается практически мгновенно, а обновлённые данные автоматически синхронизируются с локальным кэшем.

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

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

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

Несмотря на большое количество возможностей, скрипт остаётся лёгким и быстрым. Отсутствие тяжёлых графических библиотек, минимальный объём CSS и оптимизированная логика JavaScript позволяют форме работать быстро даже на страницах с большим количеством материалов. В сочетании с продуманным кэшированием система демонстрирует высокую производительность и практически мгновенный отклик интерфейса.

Разработка продолжается, и в ближайших обновлениях планируется расширение функциональности. Уже сейчас система комментариев представляет собой полноценное решение для современных сайтов на uCoz, объединяющее высокую скорость работы, удобство пользователей и эффективное использование серверных ресурсов.



Каталог статей
Вид материалов



Исходный код:

Код
<!-- ЛЕНТА НОВОСТЕЙ -->
<link rel="stylesheet" href="https://bro.usite.pro/css/broUcozCommentForm.v5.css?v=2" media="all">

<div class="vk-modern-feed">
<div class="vk-modern-post">

<!-- HEADER -->
<div class="vk-modern-header">
<div class="vk-modern-avatar">
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="$USERNAME$"><?else?><img src="https://bro.usite.pro/icon/p1_3004531_da07dd0f.jpg"><?endif?>
</div>

<div class="vk-modern-author">
<div class="vk-modern-name"><a href="$PROFILE_URL$">$USERNAME$</a></div>
<div class="vk-modern-time" title="$TIME$">
<img src="https://bro.usite.pro/icon/clock-icon.png" alt="Дата публикации" height="22">
<span>$DATE$</span>
</div>
</div>

<?if($MODER_PANEL$)?><div class="entry-moder-container">$MODER_PANEL$</div><?endif?>

<script>
(function() {
function initMPanels(root = document) {
root.querySelectorAll('.u-mpanel').forEach(panel => {
if (panel.querySelector('.custom-edit-btn')) return;

const btn = document.createElement('div');
btn.className = 'custom-edit-btn';
btn.textContent = '•••';
panel.prepend(btn);

btn.addEventListener('click', function(e) {
e.stopPropagation();
const toggle = panel.querySelector('.u-mpanel-toggle');
if (toggle) toggle.click();
});
});
}

document.addEventListener('DOMContentLoaded', () => initMPanels());

const observer = new MutationObserver(mutations => {
for (const m of mutations) {
if (m.addedNodes.length) {
m.addedNodes.forEach(node => {
if (node.nodeType !== 1) return;
if (node.classList?.contains('u-mpanel')) initMPanels(node.parentNode);
if (node.querySelectorAll) {
const panels = node.querySelectorAll('.u-mpanel');
if (panels.length) initMPanels(node);
}
});
}
}
});

observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

</div>

<!-- TEXT -->
<?if($MESSAGE$)?><div class="vk-modern-text">
<div class="post" data-id="$ID$">$MESSAGE$</div>
</div><?endif?>

<!-- IMAGE -->
<?if($COVER_IMAGE$)?><div class="vk-modern-attach">
<picture>
<source srcset="$COVER_SMALL_URL$" media="(min-width:769px)">
<img src="$COVER_URL$" alt="$TITLE$" loading="lazy">
</picture>
</div><?endif?>

<!-- ACTIONS -->
<div class="vk-modern-actions">
<div class="vk-actions-left">

<div class="vk-like" data-entryid="$ID$">
<span class="likeHeart" title="Поставить лайк"></span>
<span class="uLikeCount">$RATED$</span>
</div>

<script src="/js/likeSystem.js" defer></script>

<?if($COMMENTS_URL$)?>
<a class="vk-action vk-comment-toggle" href="$COMMENTS_URL$" data-bro-ucoz-comment-toggle data-bro-ucoz-comments-url="$COMMENTS_URL$" aria-expanded="false" title="Комментарии">
<svg viewBox="0 0 24 24">
<path d="M21 6h-18v10h4v4l4-4h10z"/>
</svg>
<span>$COMMENTS_NUM$</span>
</a>
<?endif?>

<div class="vk-action">
<button class="vkShareBtn" onclick="vkShare(event)" aria-label="Поделиться" title="Поделиться">
<span class="vkShareRipple"></span>
<svg viewBox="0 0 24 24" class="vkShareIcon">
<path d="M11.996 3.725A2.15 2.15 0 0 0 10 5.87l-.001 2.117-.02.005a9.904 9.904 0 0 0-7.827 10.721c.083.811 1.116 1.103 1.611.455l.187-.237a9.08 9.08 0 0 1 5.836-3.265l.213-.026.001 2.494a2.15 2.15 0 0 0 3.476 1.692l7.824-6.132a2.15 2.15 0 0 0 0-3.384l-7.824-6.132a2.15 2.15 0 0 0-1.326-.458z"
fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<script>
function vkShare(e){
const btn = e.currentTarget;
const url = location.href;
const rect = btn.getBoundingClientRect();
const ripple = btn.querySelector('.vkShareRipple');
ripple.style.left = (e.clientX - rect.left) + 'px';
ripple.style.top = (e.clientY - rect.top) + 'px';
ripple.classList.remove('show');
void ripple.offsetWidth;
ripple.classList.add('show');

if (navigator.share) {
navigator.share({ url });
} else {
window.open('https://vk.com/share.php?url=' + encodeURIComponent(url),'_blank');
}
}
</script>

</div>
</div>

<a class="vkViewBtn" href="$ENTRY_URL$" title="Перейти к новости">
<svg viewBox="0 0 24 24" class="vkViewIcon" width="20" height="20">
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="3" fill="currentColor"/>
</svg>
<span class="vkViewCount"> $READS$ </span>
</a>
</div>

<?if($COMMENTS_URL$)?>
<div class="bro-ucoz-comment-panel" data-bro-ucoz-comment-panel >

<!-- БЛОК ПРЕВЬЮ КОММЕНТАРИЕВ -->
<div class="bro-ucoz-comments-preview"
data-bro-ucoz-comments-preview
data-bro-ucoz-comments-url="$COMMENTS_URL$"
data-post-id="$ID$"> <!-- ← Очень важно! -->

<div class="bro-ucoz-comments-preview__state"
data-bro-ucoz-comments-state
hidden></div>

<div class="bro-ucoz-comments-preview__list" data-bro-ucoz-comments-list></div>
<button class="bro-ucoz-comments-preview__more" type="button" data-bro-ucoz-comments-more hidden>Загрузить ещё</button>
</div>

<!-- ФОРМА ОТПРАВКИ КОММЕНТАРИЯ -->
<div class="bro-ucoz-comment" data-bro-ucoz-comment-form data-bro-ucoz-comment-url="$COMMENTS_URL$">
<div class="bro-ucoz-comment__editor" data-bro-ucoz-comment-editor>
<img class="bro-ucoz-comment__avatar" data-bro-ucoz-comment-avatar src="/.s/src/profile/img/profile_photo_thumbnail.png" alt="Аватар">

<div class="bro-ucoz-comment__field-wrap">
<textarea class="bro-ucoz-comment__textarea" data-bro-ucoz-comment-message rows="1" placeholder="Написать комментарий"></textarea>

<div class="bro-ucoz-comment__tools">
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-attach title="Вставить ссылку" aria-label="Вставить ссылку">
<svg viewBox="0 0 24 24"><path d="M8.6 17.9 18.2 8.3a3 3 0 0 0-4.2-4.2L4.6 13.5a5 5 0 0 0 7.1 7.1l8.2-8.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-photo title="Добавить фото" aria-label="Добавить фото">
<svg viewBox="0 0 24 24"><path d="M4.5 7.5h3l1.4-2h6.2l1.4 2h3a2 2 0 0 1 2 2v8.2a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="12" cy="13.3" r="3.4" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-smile-toggle title="Смайлы" aria-label="Смайлы">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.4 14.3c.8 1.2 2 1.8 3.6 1.8s2.8-.6 3.6-1.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="9" cy="10" r="1.1" fill="currentColor"/><circle cx="15" cy="10" r="1.1" fill="currentColor"/></svg>
</button>
</div>

<div class="bro-ucoz-comment__smiles" data-bro-ucoz-comment-smiles hidden>
<button type="button" data-bro-ucoz-smile=">("><img src="/.s/sm/2/angry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":D"><img src="/.s/sm/2/biggrin.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="B)"><img src="/.s/sm/2/cool.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":'("><img src="/.s/sm/2/cry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="<_<"><img src="/.s/sm/2/dry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="^_^"><img src="/.s/sm/2/happy.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":("><img src="/.s/sm/2/sad.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":)"><img src="/.s/sm/2/smile.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":o"><img src="/.s/sm/2/surprised.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":p"><img src="/.s/sm/2/tongue.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="%)"><img src="/.s/sm/2/wacko.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=";)"><img src="/.s/sm/2/wink.gif" alt=""></button>
</div>
</div>

<!-- Кнопка отправки -->
<button class="bro-ucoz-comment__send" type="button" data-bro-ucoz-comment-send title="Отправить" aria-label="Отправить комментарий">
<svg viewBox="0 0 24 24"><path d="M4.4 4.7 21 12 4.4 19.3l2.1-6.1L14 12 6.5 10.8 4.4 4.7Z" fill="currentColor"/></svg>
</button>
</div>

<!-- Модальное окно для вставки ссылки/фото -->
<div class="bro-ucoz-comment__attach-modal" data-bro-ucoz-attach-modal hidden>
<div class="bro-ucoz-comment__attach-overlay" data-bro-ucoz-attach-close></div>
<div class="bro-ucoz-comment__attach-box">
<div class="bro-ucoz-comment__attach-title" data-bro-ucoz-attach-title>Вставьте ссылку</div>
<input class="bro-ucoz-comment__attach-input" type="text" data-bro-ucoz-attach-input placeholder="https://">
<div class="bro-ucoz-comment__attach-actions">
<button class="bro-ucoz-comment__attach-cancel" type="button" data-bro-ucoz-attach-close>Отмена</button>
<button class="bro-ucoz-comment__attach-ok" type="button" data-bro-ucoz-attach-ok>OK</button>
</div>
</div>
</div>
</div>
</div>
<?endif?>

</div>
</div>

<iframe id="broUcozCommentFrame" style="width:0;height:0;border:0;position:absolute;left:-9999px;" title="comment-frame"></iframe>

<div class="bro-ucoz-comment-toast" id="broUcozCommentToast" aria-live="polite">
<span class="bro-ucoz-comment-toast__icon">✓</span>
<span class="bro-ucoz-comment-toast__text">Комментарий успешно отправлен</span>
</div>

<script src="https://bro.usite.pro/js/broUcozCommentForm.v8.js"></script>


Мурчанн

Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
  • Страница 1 из 1
  • 1
Поиск: