Добро пожаловать на сайт SEDBY

Кастомная страница 404

Популярные запросы: тема Omnis, плагин Pagelist, Cotonti 0.9.25, ЧПУ, Font Face

  • 292 просмотра
  • 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 форму поиска?

Новый комментарий

Ваш комментарий будет доступен для редактирования 10 минут
Блок пользователя
Регистрация на нашем сайте позволит вам общаться на форумах и получить доступ к другому полезному функционалу
Вы вошли как Гость
Контакты|Powered by Cotonti Siena 0.9.25