Общий верхний / нижний колонтитул со статическим HTML

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

Изменить: все очень хорошие ответы, и я ожидал этого. HTML статичен, точка. Нет реального способа изменить это без того, чтобы что-то работало на стороне сервера или на стороне клиента. Я обнаружил, что включения на стороне сервера кажутся моим лучшим вариантом, поскольку они очень просты и не требуют написания сценариев.

Есть три способа делать то, что вы хотите

Серверный скрипт

Это включает в себя что-то вроде php, asp, jsp .... Но вы отказались от этого

Серверная сторона включает

Ваш сервер обслуживает страницы, так почему бы не воспользоваться встроенными включениями на стороне сервера ? У каждого сервера есть свой способ сделать это, воспользуйтесь им.

Клиентская сторона включает

Это решение требует обратного вызова на сервер после того, как страница уже загружена на клиенте.

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

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

Вы можете найти демо здесь (в архиве)

Поскольку в HTML нет директивы include, я могу придумать только три обходных пути.

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>

Самый практичный способ - использовать Server Side Include . Его очень легко реализовать, и он экономит массу работы, когда у вас больше пары страниц.

HTML-фреймы, но это не идеальное решение. По сути, вы получите доступ к трем отдельным HTML-страницам одновременно.

Думаю, ваш другой вариант - использовать AJAX.

Вы можете использовать средство запуска задач, такое как gulp или grunt.

Существует пакет NPM gulp, который включает файлы на лету и компилирует результат в выходной HTML-файл. Вы даже можете передавать значения своим частичным.

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

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

пример задачи gulp:

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 и предварительно обработать его локально перед загрузкой. Я считаю это лучшим решением, чем фреймы.