Как сделать единый шаблон для страниц?

232

31 декабря 2018, 08:20

Делаю небольшой сайт состоящий не более чем из 10 страничек на html+css+js+jquery, других технологий пока что не знаю. Встал вопрос, если допустим я сделал изменение в одном документе, ну к примеру поменял логотип, как сделать изменения во всех других файлах, не внося изменения в каждый файл? что необходимо знать для осуществления этого?

Answer 1

1) Простое SPA

Можно сделать простое SPA, которое получает через AJAX страницы исходя из location.hash в url и делает единый шаблон.

Сделал для вас очень простой пример, скачать ЗДЕСЬ. Также там можно делать сколько угодно шаблонов и указывать какой странице какой принадлежит.

Однако, поскольку spa использует AJAX для динамической загрузки представлений, для локальной разработки Вам необходимо настроить локальный сервер.

Самый простой способ сделать это - глобальная установка http-сервера с использованием npm или yarn: npm install -g http-server

Затем запустите http-сервер в вашем кодовом каталоге и откройте свой браузер на localhost: 8080

cd /path/to/project/
http-server -o

2) Server Side Includes

Если ваш сервер HTTP (сервер apache 2 и IIS) поддерживает Server Side Includes, вы можете легко вставлять другой файл HTML:

<!--#include file="header.html"-->
Ваш контент
<!--#include file="footer.html"-->

нет необходимости в серверном языке, просто HTML

3) PHP

Можно разделить шаблон по нескольким частям: header.php и footer.php, head-tag-contents.php и в этих файлах ставите свой хтмл код который повторяется на страницах.

Теперь можно создавать страницы в таком виде:

<!DOCTYPE html>
<html>
<head>
    <!-- чтобы не повторять одинаковый код в head -->
    <?php include("includes/head-tag-contents.php");?>
</head>
<body>
<?php include("includes/header.php");?>
<div id="main-content">
    <p>Мой супер контен</p>
</div>
<?php include("includes/footer.php");?>
</body>
</html>
?>

Есть много статей на эту тему, тут не нужно особо знать PHP.

Answer 2

Можно как вариант подклюить компонент на каждую страницу через PHP, простая функция include '/path', еще как вариант использовать PUG, но там нужен Nodejs и к примеру Gulp