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

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

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

12 67
html

12 ответов:

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

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

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

Серверная Часть Включает

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

На Стороне Клиента Включают В Себя

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

32

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

23

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

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

вы можете найти демо здесь

22

Вы можете сделать это с помощью JavaScript, и я не думаю, что это должно быть фантазии.

Если у вас есть заголовок.js файл и нижний колонтитул.js.

затем содержимое заголовка.js может быть что-то вроде

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

Не забудьте экранировать любые вложенные символы кавычек в строке вы пишете. Затем вы можете вызвать это из своих статических шаблонов с помощью

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

и аналогично для нижнего колонтитула.js.

примечание: Я не рекомендовать это решение-это хак и имеет ряд недостатков (плохо для SEO и юзабилити только для начала) - но он соответствует требованиям вопрошающего.

7

вы можете сделать это легко с помощью jQuery. нет необходимости в php для такой простой задачи. просто включите это один раз на своей веб-странице.

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

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

пример 

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

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

4

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

3

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

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

2

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

1

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

1

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

существует пакет NPM gulp, который делает файл в том числе на лету и компилирует результат в выходной 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'));
    });
1

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

0