Администрирование

Перенаправление всех запросов на index.html

Оставить комментарий

Когда новый сайт находится в разработке, а старый сайт необходимо полностью спрятать, решением станет создание страницы-заглушки. Например, добавьте в корень сайта файл index.html (другое имя вполне подойдет, если index.html уже занят):

<!DOCTYPE html>
<html>
<head>
 <title>Сайт находится в разработке...</title>
</head>
<body>
 <h1>Сайт в разработке</h1>
 Пожалуйста, возвращайтесь после [число] [месяц].
</body>
</html>

Чтобы все обращения к сайту перенаправлялись на эту страницу, необходимо также добавить файл .htaccess (если он у вас уже имеется, просто закомментируйте лишние строки при помощи знака #):

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^(.*)$ index.html [R,L]
</IfModule>

Проблема с такой конфигурацией проявится если вам необходимо вставить в заглушку изображение — логотип, фон, или более красочный призыв посетить сайт после запуска.

Простое решение — исключить из предыдущего файла перенаправление запросов для изображений:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^.*\.(gif|jp?g|png)$ - [L] 
RewriteRule ^(.*)$ index.html [R,L]
</IfModule>

Тут возникнет только одна проблема — на сайте станут доступны все изображения, что, впрочем, легко исправляется уточнением того, какие именно изображения необходимо исключить из перенаправления:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^image1\.png$ - [L]
RewriteRule ^folder2/image2\.jpeg$ - [L] 
RewriteRule ^(.*)$ index.html [R,L]
</IfModule>

Более интересное решение — внедрить изображение в HTML. Тут тоже два варианта — при помощи JavaScript и CSS. Будем рассматривать как это сделать в CSS.

До настройки перенаправления зайдите на сайт http://tags.in.ua/StfiBYaa и сконвертируйте в Base64 все изображения, которые необходимо внедрить в HTML.

Для примера возьмем QR-код страницы, которую вы сейчас читаете:

После конвертации получим:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAABlBMVEX///8AAABVwtN+AAABLElEQVRYhe2WTW6FMAyEjVhkyRFylHczfm72jpIjsMwCxZ1JQKVVu22mEpZAwLcxtscTsyee+NtwxnvcXyWkOfClyJAD1/Q+7DU4SMLbrEMmP0Amt+BrSAu4GEFRh2yzJBnRZHZbjNRug7DPP8xBT9JUgsR/0U9PcvLdbvmqkEvBNuTongb3VYbY5EgZ28VzXA1QiGAfo9t4KBY39y3HIkOOq6gFY5iNO0aGoKKjc/MVKpjl/A8EnzEE7X+2OgqrDtm5snGnckIa7hOiQOgoZ9bcjDrEaSTUtsPk6HYmQ1o0ec+X1YmQ5nPcjO3skr95cE/Slg6fAt33ZnUCpJ2reI6vP+BJjdTE4ykUNQKfY0Xj+qlgAWK12xUuNWUdcp1HHe67fPHg/uSJJ/rHB+xLjopn+qKeAAAAAElFTkSuQmCC

Теперь вставим эту «картинку» в качестве фона в центр страницы-заглушки:

<!DOCTYPE html>
<html>
<head>
 <title>Сайт находится в разработке...</title>
 <style>
  html, body, div {
   height:100%;
  }
  div{
   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgA...);
   background-repeat:no-repeat;
   background-position:center center;
  }
 </style>
</head>
<body>
 <div>
 </div>
</body>
</html>

Так получаем страницу, в которую внедрены все необходимые изображения

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