Кастомная страница 404
- 71 просмотр
- 10 апреля, 2024
- Обновлено: 12 апреля, 2024
- admin
- Время чтения: 3 минуты
- 2 (Подробно)
Недавно в нашем блоге была опубликована статья о необходимости отслеживания серверной ошибки 404 и кастомизации страницы, которая должна отдаваться пользователю в таких случаях. Поскольку теория без практики имеет мало смысла, сегодня разберем вопрос создания такой страницы для сайта на движке Cotonti. Эта задача решается достаточно просто средствами самого движка и не требует никакого стороннего кода в виде расширений.
Прежде всего, создаем в папке с основной темой новый шаблон под названием error.404.tpl Шаблон имеет стандартную структуру с основным блоком MAIN:
<!-- BEGIN: MAIN --> <!doctype html> <!-- END: MAIN -->
Теперь добавим типовую html-разметку:
<!-- BEGIN: MAIN --> <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="generator" content="Cotonti https://www.cotonti.com" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> </head> <body> </body> </html> <!-- END: MAIN -->
Поскольку в данном tpl-шаблоне мы можем использовать весь функционал и переменные движка, добавим все необходимое:
<!-- BEGIN: MAIN -->
<!doctype html>
<html lang="{PHP.cfg.defaultlang}">
<head>
<meta charset="utf-8">
<title>Страница не найдена</title>
<meta name="description" content="Запрашиваемая Вами страница могла быть удалена, переименована или никогда не существовала">
<meta name="generator" content="Cotonti https://www.cotonti.com" />
<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" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/reset.css">
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/styles.css">
</head>
<body>
</body>
</html>
<!-- END: MAIN -->
В шаблоне появился код дефолтного языка из файла настроек config.php, значения мета-тегов title и description, а также ссылки на файлы со стилями reset.css и styles.css. Поскольку фреймворки типа Bootstrap мы здесь использовать не будем, желательно первым подключить reset.css, который сбросит все стили до единых для любого браузера. Файлы со стилями разместим в подпапке 404.
Теперь для примера добавим разметку:
<!-- BEGIN: MAIN -->
<!doctype html>
<html lang="{PHP.cfg.defaultlang}">
<head>
<meta charset="utf-8">
<title>Страница не найдена</title>
<meta name="description" content="Запрашиваемая Вами страница могла быть удалена, переименована или никогда не существовала">
<meta name="generator" content="Cotonti https://www.cotonti.com" />
<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" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/reset.css">
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/404.css">
</head>
<body>
<div id="w">
<span id="title">Страница не найдена</span>
<h1>Страница не найдена</h1>
<p>Запрашиваемая Вами страница могла быть удалена, переименована или никогда не существовала</p>
<ul id="actions">
<li><a href="{PHP.cfg.mainurl}">Вернуться на главную</a></li>
<li><a href="{PHP|cot_url('page', 'c=system&al=contacts')}">Сообщить об ошибке</a></li>
</ul>
<form role="form" action="{PHP|cot_url('search')}" method="get">
<input type="text" class="" placeholder="Поиск по публикациям и форумам" name="sq" />
<button class="" type="submit">{PHP.L.Search}</button>
</form>
<ul id="social">
<li><a href="{PHP.R.VK}"><span class="icon-vk"></span><i>VKontakte</i></a></li>
<li><a href="{PHP.R.Facebook}"><span class="icon-facebook"></span><i>Facebook</i></a></li>
<li><a href="{PHP.R.Instagram}"><span class="icon-instagram"></span><i>Instagram</i></a></li>
<li><a href="{PHP.R.Twitter}"><span class="icon-twitter"></span><i>Twitter</i></a></li>
</ul>
</div>
</body>
</html>
<!-- END: MAIN -->
На нашей странице 404 мы разместили блок ссылок на главную страницу и страницу контактов, форму поиска, а также ссылки на страницы в соцсетях.
Осталось только локализовать строки. Добавим их в lang-файл темы:
/** * Кастомная страница 404 ошибки */ $L['404-title'] = 'Страница не найдена'; $L['404-subtitle'] = 'Запрашиваемая Вами страница могла быть удалена, переименована или никогда не существовала'; $L['404-home'] = 'Вернуться на главную'; $L['404-report'] = 'Сообщить об ошибке';
Наш итоговый шаблон теперь выглядит так:
<!-- BEGIN: MAIN -->
<!doctype html>
<html lang="{PHP.cfg.defaultlang}">
<head>
<meta charset="utf-8">
<title>{PHP.L.404-title}</title>
<meta name="description" content="{PHP.L.404-subtitle}">
<meta name="generator" content="Cotonti https://www.cotonti.com" />
<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" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/reset.css">
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/404.css">
<link rel="stylesheet" type="text/css" href="{PHP.cfg.mainurl}/{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/404/404-font.css">
</head>
<body>
<div id="w">
<span id="title">{PHP.cfg.maintitle}</span>
<h1>{PHP.L.404-title}</h1>
<p>{PHP.L.404-subtitle}</p>
<ul id="actions">
<li><a href="{PHP.cfg.mainurl}">{PHP.L.404-home}</a></li>
<li><a href="{PHP|cot_url('page', 'c=system&al=contacts')}">{PHP.L.404-report}</a></li>
</ul>
<form role="form" action="{PHP|cot_url('search')}" method="get">
<input type="text" class="" placeholder="Поиск по публикациям и форумам" name="sq" />
<button class="" type="submit">{PHP.L.Search}</button>
</form>
<ul id="social">
<li><a href="{PHP.R.VK}"><span class="icon-vk"></span><i>VKontakte</i></a></li>
<li><a href="{PHP.R.Facebook}"><span class="icon-facebook"></span><i>Facebook</i></a></li>
<li><a href="{PHP.R.Instagram}"><span class="icon-instagram"></span><i>Instagram</i></a></li>
<li><a href="{PHP.R.Twitter}"><span class="icon-twitter"></span><i>Twitter</i></a></li>
</ul>
</div>
</body>
</html>
<!-- END: MAIN -->
Для тестирования и отладки введем в браузере ссылку на несуществующую страницу.
Конечно, наш пример – это лишь один простой вариант реализации кастомной страницы 404 на движке Cotonti. Если хотите поделиться вашими вариантами, оставляйте ссылки на репозиторий в комментариях или на форуме.
Нескучной верстки!
2. admin
Обновил документ. О глобальной форме поиска можно почитать здесь.
1. Askell
Спасибо за подробное описание. А как можно добавить на страницу 404 форму поиска?
Новый комментарий