Загальний верхній / нижній колонтитул зі статичним HTML

Чи є гідний спосіб із статичним HTML / XHTML створити загальні файли верхнього / нижнього колонтитула, які відображатимуться на кожній сторінці сайту? Я знаю, що ви, очевидно, можете зробити це за допомогою PHP або директив на стороні сервера, але чи є спосіб зробити це, не маючи абсолютно ніяких залежностей від сервера, який з’єднує все для вас?

Редагувати: На всі дуже хороші відповіді я очікував. HTML статичний, крапка. Немає реального способу змінити це без чогось, що працює на стороні сервера або клієнта. Я виявив, що Включення на стороні сервера, здається, є моїм найкращим варіантом, оскільки вони дуже прості і не вимагають сценаріїв.

Є три способи зробити те, що ви хочете

Серверний сценарій

Сюди входить щось на зразок php, asp, jsp .... Але ви сказали ні

Включає сторону сервера

Ваш сервер обслуговує сторінки, то чому б не скористатися вбудованими серверними компонентами ? Кожен сервер має свій спосіб зробити це, скористайтеся цим.

Включити на стороні клієнта

Завдяки цим рішенням ви передзвоните на сервер після того, як сторінка вже завантажена на клієнт.

Функцію JQuery load () можна використовувати для включення загального верхнього та нижнього колонтитула. Код повинен бути таким

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

Демо можна знайти тут (заархівовано)

Оскільки HTML не має директиви "включити", я можу думати лише про три обхідні шляхи

1. Рамки
2. Javascript
3. CSS

Невеликий коментар до кожного з методів.

Рамки можуть бути як стандартними, так і iFrames. У будь-якому випадку вам доведеться вказати фіксовану висоту для них, тому це може бути не тим рішенням, яке ви шукаєте.

Javascript - досить широка тема, і, ймовірно, існує багато способів, як можна використовувати його для досягнення бажаного ефекту. Зверху голови я можу думати про два шляхи:

1. Повномасштабний запит AJAX, який вимагає верхній / нижній колонтитул, а потім розміщує їх у потрібному місці сторінки;
2. <script type="text/javascript" src="header.js"> який має щось подібне до цього: document.write('My header goes here');

Робити це за допомогою CSS було б справді зловживанням. CSS має contentвластивість, яка дозволяє вставляти певний вміст HTML, хоча насправді він не призначений для використання таким чином. Також я не впевнений у підтримці браузера для цієї конструкції.

Ви можете зробити це за допомогою JavaScript, і я не думаю, що це повинно бути таким химерним.

Якщо у вас є файл header.js і footer.js.

Тоді вміст header.js може бути приблизно таким

document.write("<div class='header'>header content</div> etc...")

Не забудьте уникнути будь-яких вкладених лапок у рядку, який ви пишете. Потім ви можете викликати це зі своїх статичних шаблонів за допомогою

<script type="text/javascript" src="header.js"></script>

і аналогічно для footer.js.

Примітка: Я не рекомендую це рішення - це хак і має ряд недоліків (поганий для SEO та зручності для початківців) - але він відповідає вимогам допитувача.

Ви можете зробити це легко за допомогою jquery. немає необхідності в php для такого простого завдання. просто включіть це один раз на свою веб-сторінку.

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

тепер використовуйте навантаження даних на будь-який елемент, щоб викликати його вміст із зовнішнього html-файлу, вам просто потрібно додати рядок до вашого html-коду, де ви хочете розмістити вміст.

приклад

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Найкращим рішенням є використання статичного генератора сайтів, який має шаблонування / включає підтримку. Я використовую Hammer для Mac, це чудово. Існує також Guard, рубіновий самоцвіт, який контролює зміни файлів, компілює sass, об'єднує будь-які файли і, ймовірно, включає.

Найпростіший спосіб зробити це за допомогою простого HTML.

Ви можете скористатися одним із таких способів:

<embed type="text/html" src="header.html">

або:

<object name="foo" type="text/html" data="header.html"></object>

Найбільш практичним способом є використання серверної сторони Включити . Це дуже легко впровадити та економить багато роботи, коли у вас більше кількох сторінок.

HTML-кадри, але це не ідеальне рішення. Ви, по суті, мали б доступ до 3 окремих HTML-сторінок одночасно.

Вашим іншим варіантом є використання AJAX, я думаю.

Ви можете використовувати програму запуску завдань, таку як глотка або бурчання.

Існує пакет заглотки NPM, який робить файл, включаючи на льоту, і компілює результат у вихідний HTML-файл. Ви навіть можете передавати значення своїм часткам.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

приклад завдання ковтання:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Ви можете спробувати завантажити їх через сторону клієнта, наприклад:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

ПРИМІТКА: вміст завантажиться зверху вниз і замінить вміст контейнера, в який ви завантажуєте його.

Ні. Статичні файли HTML не змінюються. Ви могли б зробити це за допомогою якогось вигадливого рішення Javascript AJAXy, але це було б погано.

Якщо не використовувати локальну систему шаблонізації, як зараз багато сотень, існує кожна мова сценаріїв, або навіть використовувати домашню, із sedабо, m4і надіслати результат на ваш сервер, ні, вам знадобиться принаймні SSI.

Єдиний спосіб включити інший файл із лише статичним HTML - це iframe. Я не вважав би це дуже вдалим рішенням для колонтитулів. Якщо ваш сервер не підтримує PHP або SSI з якихось химерних причин, ви можете використовувати PHP і попередньо обробити його локально перед завантаженням. Я вважаю, що це краще рішення, ніж iframes.