Создание страниц ошибок 404, 401, 503 в MODX

Создание страниц ошибок 404, 401, 503 в MODX MODX Revo

Сегодня мы создадим основные сервисные страницы MODX Revo, а именно — для ошибок 404, 403, 503

Создание документов и категорий

Щелкаем правой кнопкой мыши (ПКМ) по Website (находиться в дереве Ресурсы) и выбираем Создать документ (либо просто щелкаем на +)

Создание документа

На открывшейся странице прописываем заголовок system, выбираем пустой шаблон, убираем галку с опубликован, ставим галку напротив — не показывать в меню и переходим во вкладку настроек.

Создание пустой категории

В настройках ставим галки на контейнер и очистить кэш (остальные снимаем) и сохраняем.

пустой контейнер

Это мы создали пустой не опубликованный контейнер, а в него уже поместим все наши сервисные страницы.

Создание страницы 404 ошибки в modx

Щелкаем ПКМ по нашему пустому контейнеру и выбираем создать документ.

Создание страниц с ошибками

Заполняем:

  • Заголовок — error404;
  • Шаблон — (пустой шаблон);
  • Псевдоним — error404;
  • Опубликован;
  • Не показывать в меню.

Создание страницы 404 ошибки в MODX

На вкладке Настройки: снимаем все галки, после чего на против пункта «Заморозить URL» ставим галку и устанавливаем значение: error404 (при условии что вы убрали расширение html и настроили ЧПУ, в противном случае прописываем error404.html) и сохраняем.

modx страница 404

В поле содержимое помещаем следующий код (взят из бесплатного шаблона и немного переработан):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex" />
    <meta name="description" content="Ошибка 404 - скорее всего страница была удалена или у нее сменился URL адрес!">
    <title>Ошибка 404 - данной страницы не существует</title>
    <!-- Bootstrap CDN CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <!-- Custom CSS -->
    <style>
    @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);
    body{font-family:Rubik,sans-serif;margin:0;overflow-x:hidden;font-weight:300}
    #wrapper{width:100%}error-box{height:100%;position:fixed;top:20%;width:100%}
    .error-box .footer{width:100%;left:0;right:0}
    .error-body{padding-top:5%}
    .error-body h1{font-size:210px;font-weight:900;line-height:210px}
    .text-center{text-align:center}
    .text-danger{color:#f33155}
    .text-muted{color:#8d9ea7}
    .m-b-40{margin-bottom:40px!important}
    .m-t-30{margin-top:30px!important}
    .m-b-30{margin-bottom:30px!important}
    @media only screen and (max-width: 520px){.error-body h1{font-size:110px;font-weight:700;line-height:110px}}
    </style>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Preloader -->
    <section id="wrapper" class="container-fluid">
        <div class="error-box">
            <div class="error-body text-center">
                <h1 class="text-danger">404</h1>
                <h3>Страница не существует !</h3>
                <p class="text-muted m-t-30 m-b-30">Скорее всего страница была удалена или у нее сменился URL адрес!</p>
                <a href="/" class="btn btn-danger btn-rounded m-b-40">Перейти на главную страницу</a>
            </div>
        </div>
    </section>
</body>
</html>

и снова сохраняем.

modx 404 страница

Далее идем в Системные настройки — сайт — и указываем ID созданной страницы с 404 ошибкой (Страница ошибки 404 «Документ не найден» — error_page = id страницы).

Назначаем страницу 404 ошибки

Теперь можно проверить как она отрабатывает. Для этого введем несуществующий адрес в браузере (например: site.ru/adresa-net), перейдем по нему — должна открыться страница с нашей ошибкой.

404 modx

Создание страниц ошибок 401 и 503

Для создания страниц для ошибок 401 и 503 просто сделайте копию страницы 404, введите новый заголовок (так сделать дважды).

Создание копии страницы с ошибкой

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

Для 401 ошибки:

<meta name="description" content="Ошибка 401 - доступ к данной странице запрещен">
<title>Ошибка 401 - доступ запрещен</title>

и в контенте:

<h1 class="text-danger">401</h1>
<h3>Доступ запрещен !</h3>
<p class="text-muted m-t-30 m-b-30">У вас недостаточно прав для просмотра данной страницы.</p>

Создаем системную страницы ошибки 401

После чего переходим во вкладку «настройки» замораживаем URL (error401) и сохраняем.

Для 503 ошибки:

<meta name="description" content="Ошибка 503 - сайт временно недоступен, зайдите немного позже">
<title>Ошибка 503 - сайт недоступен</title>
<h1 class="text-danger">503</h1>
<h3>сайт недоступен !</h3>
<p class="text-muted m-t-30 m-b-30">Сайт временно недоступен, зайдите немного позже!</p>

и из кода можно удалить строки:

<meta name="robots" content="noindex" />
<a href="/" class="btn btn-danger btn-rounded m-b-40">Перейти на главную страницу</a>

Не забудьте заморозить URL и сохранить изменения.

После этого возвращаемся в системные настройки (вкладка сайт) и указываем id созданных страниц ошибок.

  • Страница ошибки 401 «Доступ запрещен» — unauthorized_page = id созданной страницы;
  • Страница ошибки 503 «Сайт недоступен» — site_unavailable_page = id созданной страницы.

Вносим системные настройки

Далее начнем заниматься непосредственно разработкой сайта: перенесем html шаблон, разобьем его на чанки и т.д.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru