Jump to content
View in the app

A better way to browse. Learn more.

IPBMafia.ru - поддержка Invision Community, релизы, темы, плагины и приложения

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Кастомизируем немного страницы ошибок 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;">

t_reks

Актив

Расширение экрана долдно быть не менее 1600 Х ...

Всё, что меньшее, ниже на скрине ...

☹️

image2.png

image.png

aLEX49566

Актив
(edited)
On 10.06.2025 at 15:13, t_reks said:

Расширение экрана долдно быть не менее 1600 ХХ..

Всё, что меньшее, ниже на скрине ...

☹️

image2.png

image.png

Особо не заморачивался с этой страницей. В сети много подобных страниц (шаблонов) с ошибками 5*

Edited by aLEX49566

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
Добавить комментарий...

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.