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

Ответ 1

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

Сервер Script

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

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

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

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

В этих решениях вы можете вернуться на сервер после того, как страница уже загружена на клиент.

Ответ 2

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

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

Здесь вы можете найти демонстрацию

Ответ 3

Поскольку в 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-контент, хотя на самом деле он не предназначен для такого использования. Также я не уверен в поддержке браузера для этой конструкции.

Ответ 4

Вы можете сделать это с помощью 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 и удобства использования только для стартеров), но он соответствует требованиям опроса.

Ответ 5

Лучшим решением является использование статического генератора сайта, который имеет шаблонизацию/включает поддержку. Я использую Hammer для Mac, это здорово. Там также Guard, рубиновый камень, который отслеживает изменения файлов, компилирует sass, объединяет любые файлы и, вероятно, включает в себя.

Ответ 6

вы можете легко это сделать, используя 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>

Ответ 7

Наиболее практичным способом является использование Server Side Include. Это очень просто реализовать и экономит массу работы, когда у вас более двух страниц.

Ответ 8

Самый простой способ сделать это - использовать простой HTML.

Вы можете использовать один из следующих способов:

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

или же:

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

За исключением использования локальной системы шаблонов, такой как многие сотни, теперь существует на каждом языке сценариев или даже с использованием вашего доморощенного с помощью sed или m4 и отправки результата на ваш сервер, нет, вам понадобится хотя бы SSI.

Ответ 12

Вы можете использовать бегун задачи, например 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'));
    });

Ответ 13

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

Ответ 14

Вы можете попробовать загрузить их через клиентскую часть, например так:

<!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>

ПРИМЕЧАНИЕ: содержимое будет загружаться сверху вниз и заменяет содержимое контейнера, в который вы его загружаете.