Во время верстки очень удобно иметь возможность видеть сайт в целом - то есть ходить по ссылкам, отправлять формы. Очень удобно видеть структуру сайта так, как если бы он уже был разработан и находился в интернете
Но как это сделать? Как сделать так, чтобы это работало, не приносило неудобств и быстро интегрировалось программистами в разрабатываемое приложение?
Вспомним Server Side Includes!
Да, здесь нам поможет SSI! Конечно, нам потребуется веб-сервер Apache, чтобы наша верстка работала, и еще кое что. В windows xp лучше всего воспользоваться denwer’ом, чтобы не было лишних головняков.
Так как же сделал я? Очень просто - я создал в каталоге www файл index.html и перенаправил в него все виртуальные запросы при помощи mod_rewrite. У меня получился вот такой .htaccess файл:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.html/$1 [QSA,L]
</IfModule>
AddType text/html .shtml
AddHandler server-parsed .shtml
Options +IncludesКак видно из листинга, я включил SSI и перенаправил все виртуальные запросы на index.html так, как если бы это была точка входа в приложение.
Дальше я создал папку /www/pages, в этой папке мы будем хранить все остальные страницы нашего сайта, которые будут встраиваться в контент-зону сайта, то есть текстовое наполнения нашего сайта.
Например, при запросе адреса http://example.com/how-to-rob-caravans, будет запрошена страница /www/pages/how-to-rob-caravans.shtml.
Как выглядит index.html?
Выглядит он достаточно просто:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
</head>
<body>
<header>header</header>
<article>
<!--#if expr="$REQUEST_URI = '/'" -->
<!--#include virtual="/pages/mainpage.shtml" -->
<!--#elif expr="$REQUEST_URI = '/how-to-rob-caravans'" -->
<!--#include virtual="/pages/how-to-rob-caravans.shtml" -->
<!--#else -->
<h1>404 Page Not Found!</h1>
<!--#endif -->
</article>
<footer>footer</footer>
</body>
</html>