Jump to content

Кастомизируем немного страницы ошибок 404, 403..

Доброго времени суток.

Хочу поделиться опытом кастомизации ошибок, которые возникают при тех или иных ситуациях (не найдена страница - 404, нет права на загрузку файла и т.д..).

На то, чтобы это все понять и собрать, ушло у меня около недели), я не ПРО, поэтому выкладываю все своими словами и так, как делал я, "без лишней суеты"..

Пример моей работы:

Спойлер

1583884890_01.thumb.PNG.8ee534a060bc3fa7c6de42e0c42a2555.PNG

Где я менял основную страницу:

Спойлер

error.thumb.PNG.7cfcb67015104913380d27290a252980.PNG

 

НЕ ЗАБЫВАЕМ ДЕЛАТЬ БЭКАП!!

1) Первое, что нужно сделать, это настроить общий шаблон в стилях.

Я подпишу каждый момент, который менял, чтобы вам легче было ориентироваться. Вы же все, что подписано - //отступ - у себя уберете, после своих внесении изменений, иначе это все будет видно на сайте.

Код моей страницы:

Спойлер
<section id='elError' class='ipsType_center'>
	<div class='ipsBox ipsPad'>
 <br><br>
<img class="data-fileid="206" style="width: 115px; height: auto;" src="https:вашсайт//error_pages/error_basic.png">  // ссылка на картинку
<br><br> // отступ
		<p class='ipsType_reset ipsType_light ipsType_large'>
			{lang="something_went_wrong"}
		</p>
<br><br> // отступ
		<div id='elErrorMessage' class='ipsPos_center'>
			{$message|raw}
		</div>
<br> // отступ
		{{if ( \IPS\IN_DEV or $member->isAdmin() ) and $extra}}
			{{if $faultyPluginOrApp}}
			<p class="ipsType_reset  ipsType_large ipsPos_center">
				{$faultyPluginOrApp}
			</p>
			{{endif}}

			<div class="ipsPad ipsType_left">
				<h3 class="ipsType_minorHeading">{lang="error_technical_details"}</h3>
				<textarea rows="13" style="font-family: monospace;">{$extra}</textarea>
				<p class="ipsType_small ipsType_light">
					{{if $member->isAdmin()}}
						{lang="error_technical_details_desc"}
						{{if $member->hasAcpRestriction( 'core', 'support', 'system_logs_view' )}}
							{lang="error_technical_details_logs"}
						{{endif}}
					{{elseif \IPS\IN_DEV}}
						{lang="error_technical_details_dev"}
					{{endif}}
				</p>
			</div>
		{{endif}}
		{{if ( member.isAdmin() and member.hasAcpRestriction( 'core', 'support', 'get_support' ) ) || ( member.canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' ) ) || !member.member_id}}
		<hr class='ipsHr'>

		<ul class='ipsList_inline'>
			{{if member.isAdmin() and member.hasAcpRestriction( 'core', 'support', 'get_support' )}}
				<li>
					<a href='{url="app=core&module=support&controller=support" base="admin"}' title='{lang="get_support"}' class='ipsButton ipsButton_light ipsButton_medium'>
						<i class="fa fa-lock"></i> {lang="get_support"}
					</a>
				</li>
			{{elseif \IPS\Member::loggedIn()->canUseContactUs() and !( \IPS\Dispatcher::i()->application->directory == 'core' and \IPS\Dispatcher::i()->module and \IPS\Dispatcher::i()->module->key == 'contact' )}}
				<li>
					<a href='{url="app=core&module=contact&controller=contact" seoTemplate="contact"}' title='{lang="contact_admin"}' class='ipsButton ipsButton_light ipsButton_medium'>
						{lang="contact_admin"}
					</a>
				</li>
			{{endif}}
			{{if !member.member_id}}
				<li>
					<a href='{url="app=core&module=system&controller=login" seoTemplate="login"}' class='ipsButton ipsButton_primary ipsButton_medium' title='{lang="sign_in"}'>
						{lang="sign_in"}
					</a>
				</li>
			{{endif}}
		</ul>
		{{endif}}
	</div>
</section>

<br>  //отступ
<p class='ipsPadding_top ipsType_light ipsType_reset ipsType_small ipsPos_right'>    // перемещаем ошибку вниз
{lang="error_page_code"} <strong>{$code}</strong>
</p>
<br><br>   //отступ

 

 

 

 

По сути, можно кастомизировать как угодно, но мне много не надо было, поэтому я сделал себе по простому :)

 

2) Правка текста в вкладках.

Поменял текст, который отображается при появлении ошибок 401, 404, 403, 500, ибо логично, когда выдается страница 404, то и в вкладке, должно быть соответствующий текст.

1810347271_404.png.3db161cb47d2c7cb77c48d5a1ec42e49.png

Текст меняется в переводе, это можно сделать из панели АЦ:

Спойлер

 

1974990522_.thumb.PNG.0ac2b7929dfea5c0f95c26b440ce0d61.PNG

 

 

 

Спойлер

99657152_2.thumb.PNG.6f5b2c44516d0eb832779f155b153a05.PNG

 

3) Для тех, у кого php-fpm и Nginx.

Далее, я обнаружил, что когда открываю страницу, такую как (несуществующую страницу или удаленную) вида -  https://site.blablabla.index.php  редиректит на:

130707507_notfoundphp.PNG.5949dad827cc7460e55094debb3f5a54.PNG

Я ее заменил на свою страницу (мне показалось, что это куда более правильнее)

Спойлер

644795153_error404.thumb.PNG.efc7f5cf2a1af80f2186730c487117ba.PNG

Моя страница 404 ошибки, с внутренним css стилем (она же 403) :)

404.html

 

Если у вас будет такая же ситуация, тогда:

1.1 Создаем в корне вашего сайта, скажем в директории: /html/error_pages, страницу 404.html.

1.2 Немного правим php-fpm и вносим корректировки в:

/etc/nginx/sites-available/ваш конфиг

Добавляем:

try_files $uri = 404;

В каждый раздел location ~ ^(.*\.php)$ {

 

1.3 Добавляем обращение к самой странице 404 в Nginx

server {
    .....
    error_page 404 /404.html;
    location = /404.html {
    root /путь до ПАПКИ с страницами ошибок/html/error_pages;
    }
    .....
		}
	}	
}

 

4) Редирект закрытых директорий.

И последний момент, это моя папка с файлами, она у меня была открыта для просмотра, но спустя некоторое время, я решил ее закрыть (файлы естественно все остались доступны для просмотра, а вот сам "серфинг" по ней - нет). Такого рода ошибку 403 не цепляет ни ips4 ни Nginx (по умолчанию), я сделал следующее:

Добавил в Nginx строки (аналогично ошибке 404).

server {
    .....
    error_page 403 /403.html;
    location = /403.html {
    root /путь до ПАПКИ с страницами ошибок/html/error_pages;
    }
    .....
		}
	}	
}

 

Промучился я не мало, гл вроде все стало выглядеть приятнее)

Всем удачи! :)

404.html

User Feedback

Recommended Comments

aLEX49566

Актив
<img class="data-fileid="206" style="width: 115px; height: auto;" src="https:вашсайт//error_pages/error_basic.png">  // ссылка на картинку

Исправил малехо

<img src="/error_pages/error.png" style="width: 115px; height: auto;">

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Добавить комментарий...