Кастомная страница 404
- 210 просмотров
- 10 апреля, 2024
- Обновлено: 29 июня, 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.cfg.mainurl}/{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.cfg.mainurl}/{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. Если хотите поделиться вашими вариантами, оставляйте ссылки на репозиторий в комментариях или на форуме.
Нескучной верстки!
Все правильно, надо перенаправлять в локацию плагина Search. Исправил здесь и в репозитории.
Поиск с 404 страницы все равно не работает(
Обновил документ. О глобальной форме поиска можно почитать здесь.
Спасибо за подробное описание. А как можно добавить на страницу 404 форму поиска?
Новый комментарий