idontgetit
@idontgetit
Начинающий дед

Что делать если на многостраничном сайте повторяется header и footer?

У меня три макета состояния сайта
about us, блоги и при клике на какой то из блогов открывается статья
При всех трех состояниях общий дизайн повторяется, навигация, хедер и футер одинаковые
Как быть? для каждого файла html нужно повторять код или есть какие то другие способы ?
  • Вопрос задан
  • 2094 просмотра
Пригласить эксперта
Ответы на вопрос 4
Chefranov
@Chefranov
Новичок
Собирайте через сборщик типа Gulp, header и footer будут компонентами. Будете только в компоненте править, а применятся будет ко всем страницам
Ответ написан
Комментировать
AleksandrB
@AleksandrB
Совсем недавно вывел "Hello world"
Это можно сделать через php.
Создаете файл .php, в переменную записываете html, делаете require файла и выводите через echo контент. Пример:
index.php
<?php
require 'default.php';
echo $header; ?>
Какой-то контент
<?php echo $footer; ?>

default.php
$header = '<div class="header">Shapochka.com</div>';
$footer = '<div class="footer">Podvalchik</div>';

Так же можно делать file_get_contents у другого html на сервере и вставлять его, можно через js, способов куча. Приведен один из возможных.
Ответ написан
Комментировать
Можете посмотреть видео, там встречается такой случай:
Pug tutorial. Ускорь свою верстку в несколько раз....
Ответ написан
Комментировать
Вообще говоря, это абсолютно стандартная ситуация. Наилучшим способом ее решения является использование паттерна MVC. Для Вашего случая (как я понимаю Вы только начинаете создавать сайты) есть простейший прием.
Любая страница Вашего сайта имеет структуру:
<!DOCTYPE html>
<html lang="en"> <!-- Здесь можно lang="ru" -->
<head>
Здесь Вы даете глобальные настройки meta, подключаете JavaScript и CSS модули, выводите титул страницы
<head>
<body>
<header>
Код Вашего хэдера
</header>
Контент страницы
<footer>
Код Вашего футера
</footer>
</body>
</html>

Поскольку хэдер и футер выводятся одинаковыми на всех страницах, было бы логично сделать их одни раз, а потом подключать на каждой странице.
Делается это просто, с помощью PHP: создаете 2 отдельных файла, например, header.html и footer.html, в которые помещаете html-коды хэдера и футера, соответственно.
Для хэдера прописываете простую конструкцию внутри тэгов :
<?php include("путь_к_файлу_header.html/header.html") ?>

Ясен пень, что путь_к_файлу_header.html указываете свой. Если файлы хэдера и футера хранятся там же, где index.html, пишете просто include header.html.
Для футера - аналогично.
Таким образом, изменяя только контент страницы Вы получаете неограниченное количество страниц сайта на одном и том жже шаблоне.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы