Кастомизируем страницу блокировки регистрации
Популярные запросы: Open Graph, плагин Reading Time, тема Quebec, плагин Telegram, набор иконок Analogue
- 124 просмотра +1
- 9 марта, 2026
- Обновлено: 4 апреля, 2026
- admin
- Время чтения: 6 минут
Как вы знаете, CMS Cotonti Siena имеет “на борту” модуль Users, отвечающий за регистрацию и управление учетными записями пользователей. Это один из основных модулей системы, несмотря на то, что формально он является опциональным.
Возможностей у модуля User предостаточно для полноценного создания и администрирования пула учетных записей на сайте, но сегодня мы рассмотрим лишь небольшой аспект, касающийся блокировки регистраций. Доступ к этому конфигу обеспечивается в разделе “Конфигурация” панели управления:
Как видим, все предельно просто.
Зачем нужно отключать регистрацию?
Если ваш сайт не предполагает создание пользователями учетных записей, регистрацию лучше отключить. Если же регистрации предполагаются, то их отключение может понадобиться в случае спамерских атак, которые часто имеют место в наше нелегкое время.
При отключении регистрации спамерам (и не только им) будет отдаваться довольно скучная страница следующего содержания:
Свои задачи она, конечно, решает, но вам, вероятно, захочется слегка ее разнообразить. Возможности Cotonti Siena позволяют легко сделать это.
Кастомизируем внешний вид страницы с предупреждением об отключении регистрации
Прежде всего, напомним, что во внутреннем реестре ошибок отключение регистрации имеет номер 117:
if (Cot::$cfg['users']['disablereg'] && !Cot::$usr['isadmin']) {
cot_die_message(117, TRUE);
}
Таким образом, шаблон кастомизированной страницы должен иметь имя error.117.tpl. Остальное будет предельно просто для разработчика с минимальными навыками HTML-верстки.
Разметка
Нам понадобится немногое:
- заголовок,
- описание ситуации,
- кнопка перехода на главную.
В качестве meta title и description используем готовые lang-строки. Ресет подтянется вместе с коробочным Bootstrap’ом. Шрифт будем грузить с использованием сервиса Google Fonts, а внешний вид разнообразим анимированной текстурой для подложки в виде элемента canvas:
<!-- BEGIN: MAIN -->
<!DOCTYPE html>
<html lang="{PHP.cfg.defaultlang}">
<head>
<meta charset="utf-8">
<title>{PHP.L.msg117_title}</title>
<meta name="description" content="{PHP.L.msg117_body}">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="robots" content="noindex">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">
</head>
<body>
<canvas id="canvas"></canvas>
<div id="message" class="text-center position-absolute">
<h1 class="lh-1 text-uppercase">Регистрация отключена</h1>
<p class="lh-sm mb-4">
Решением администрации сайта регистрация пользовательских аккаунтов временно приостановлена. Вы можете просматривать наш контент без каких-либо ограничений. <br /> Благодарим за понимание.
</p>
<a href="{PHP.cfg.mainurl}" class="btn btn-outline-dark rounded-0 px-4 text-uppercase">
Вернуться на главную
</a>
</div>
<link href="lib/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="themes/{PHP.theme}/117/main.css" type="text/css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="themes/{PHP.theme}/117/main.js"></script>
</body>
</html>
<!-- END: MAIN -->
Для атрибута href кнопки перехода на главную страницу я использовал системную переменную $cfg['mainurl']. Сообщения я не стал локализовывать, поскольку переключение языков в таких случаях не предусмотрено. Но при желании вы можете сделать это.
В стандартном шаблоне регистрации пользователя автоматически выводится мета-тег noindex, блокирующий индексацию этой локации поисковыми системами. В нашем случае “автоматика” не сработает, поэтому необходимо добавить его вручную.
А вот HTTP-код ответа будет сформирован движком автоматически как 403 Forbidden.
Стили
Как видно из разметки, я максимально использовал встроенные в Bootstrap стили, поэтому в файл main.css вошло только несколько свойств:
html, body { font-family: 'Montserrat', sans-serif; height: 100%; overflow: hidden; }
div#message { top: 50%; left: 50%; transform: translate(-50%, -50%); }
div#message h1 { font-size: 2.5rem; font-weight: 900; }
@media (min-width: 768px) {
div#message h1 { font-size: 5rem; }
}
Скрипт
Для анимации элемента canvas и адаптивной подгонки его размера используем небольшой скрипт:
var livePattern = {
canvas: null,
context: null,
cols: 0,
rows: 0,
colors: [252, 251, 249, 248, 241, 240],
triangleColors: [],
destColors: [],
init: function() {
this.canvas = document.getElementById('canvas');
this.context = this.canvas.getContext('2d');
this.cols = Math.floor(document.body.clientWidth / 24);
this.rows = Math.floor(document.body.clientHeight / 24) + 1;
this.canvas.width = document.body.clientWidth;
this.canvas.height = document.body.clientHeight;
this.drawBackground();
this.animate();
},
drawTriangle: function(x, y, color, inverted) {
inverted = inverted == undefined ? false : inverted;
this.context.beginPath();
this.context.moveTo(x, y);
this.context.lineTo(inverted ? x - 22 : x + 22, y + 11);
this.context.lineTo(x, y + 22);
this.context.fillStyle = "rgb("+color+","+color+","+color+")";
this.context.fill();
this.context.closePath();
},
getColor: function() {
return this.colors[(Math.floor(Math.random() * 6))];
},
drawBackground: function() {
var eq = null;
var x = this.cols;
var destY = 0;
var color, y;
while (x--) {
eq = x % 2;
y = this.rows;
while (y--) {
destY = Math.round((y-0.5) * 24);
this.drawTriangle(x * 24 + 2, eq == 1 ? destY : y * 24, this.getColor());
this.drawTriangle(x * 24, eq == 1 ? destY : y * 24, this.getColor(), true);
}
}
},
animate: function() {
var me = this;
var x = Math.floor(Math.random() * this.cols);
var y = Math.floor(Math.random() * this.rows);
var eq = x % 2;
if (eq == 1) {
me.drawTriangle(x * 24, Math.round((y-0.5) * 24) , this.getColor(), true);
} else {
me.drawTriangle(x * 24 + 2, y * 24, this.getColor());
}
setTimeout(function() {
me.animate.call(me);
}, 10);
},
};
!function() {
livePattern.init();
}();
$(window).resize(function() {
livePattern.init();
});
Для его работы необходимо предварительно загрузить саму библиотеку jQuery (см. выше).
Заключение
Результат наших несложных манипуляций выглядит следующим образом:
Я считаю, стало немного веселее. Лично я сомневаюсь что надо усложнять эту страницу формой поиска или чем-то еще, традиционно используемым – например – для 404-страниц. Ситуативно более, чем кнопки возврата на главную страницу пользователю ничего не понадобится.
Ранее мы рассказывали о трендах в соцсетях 2026 года.
Новый комментарий
Ошибка
Выполнено