Как включить внешний HTML-заголовок? - PullRequest
1 голос
/ 10 октября 2019

Я вернулся к кодированию веб-сайта для малого бизнеса, и кажется глупым иметь около 40% дублирующего кода (заголовок и меню) на 10 HTML-страницах. С другой стороны, кажется слишком излишним бросать что-то вроде Next.js в такой маленький проект.

Существует ли простой способ смягчения дубликата кода путем включения head.html в каждую страницу на стороне сервера или клиента?

Ответы [ 3 ]

1 голос
/ 11 октября 2019

Я предпочитаю PHP. Измените ваши .html (статические) страницы на .php (динамические) страницы. Просто «сохранить как». Вы можете разделить все что угодно на шаблоны.

У вас есть следующая упрощенная файловая структура:

index.php

header.php

home.php

footer.php

style.css

index.php содержит + вызывает header.php + home.php + footer.php

В header.php есть ваши меню и т. Д.

* home.php может иметь ваш ползунок и другие разделы и т. Д.

в footer.php есть вашменю + авторское право и т. д.

у style.css есть ваши стили, и вы можете иметь много .css файлов в зависимости от того, что вы хотите стилизовать.

Вы можете расширить это на другие страницы: about.php, services.php, contact.php и т. Д.

В файл index.php вы добавляете что-то вроде

<?php require ('your-folder-for-content/header.php'); ?>

<?php require ('your-folder-for-content/home.php'); ?>

<?php require ('your-folder-for-content/footer.php'); ?>

Закрыть </html> скобку в конце нижнего колонтитула.

Одна страница или несколько повторяющихся разделов вызывают другую, и избыточность исключается.

1 голос
/ 12 октября 2019

Jekyll довольно хорош и прост в использовании. Вы можете удалить все функции, которые вам не нужны. Также доступно заполнение шаблона. Он выводит статический html для всего сайта, поэтому вам не нужно, чтобы на вашем сервере работали демоны.

1 голос
/ 10 октября 2019

Вы не можете сделать это с клиентским JavaScript, потому что он работает после разбора заголовка. Вы должны использовать серверные технологии для этого. Из SSI в PHP:)

...