Wspólny nagłówek / stopka ze statycznym kodem HTML

Czy za pomocą statycznego HTML / XHTML istnieje dobry sposób tworzenia wspólnych plików nagłówka / stopki, które będą wyświetlane na każdej stronie witryny? Wiem, że możesz to oczywiście zrobić za pomocą PHP lub dyrektyw po stronie serwera, ale czy istnieje sposób na zrobienie tego bez absolutnie żadnych zależności od serwera, który zszywa wszystko razem za Ciebie?

Edycja: Wszystkie bardzo dobre odpowiedzi i tego się spodziewałem. HTML jest statyczny, kropka. Nie ma prawdziwego sposobu, aby to zmienić bez czegoś działającego po stronie serwera lub klienta. Odkryłem, że dołączenia po stronie serwera wydają się być moją najlepszą opcją, ponieważ są bardzo proste i nie wymagają skryptów.

Istnieją trzy sposoby robienia tego, co chcesz

Skrypt serwera

Obejmuje to coś takiego jak php, asp, jsp ... Ale odmówiłeś

Dołączenia po stronie serwera

Twój serwer obsługuje strony, więc dlaczego nie skorzystać z wbudowanych dołączeń po stronie serwera ? Każdy serwer ma na to swój własny sposób, skorzystaj z tego.

Uwzględnij po stronie klienta

To rozwiązanie wymaga oddzwonienia do serwera po załadowaniu strony na kliencie.

Funkcja load () JQuery może służyć do dołączania wspólnego nagłówka i stopki. Kod powinien być podobny

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

Możesz znaleźć demo tutaj (zarchiwizowane)

Ponieważ HTML nie ma dyrektywy „include”, mogę wymyślić tylko trzy obejścia

1. Ramy
2. Javascript
3. CSS

Mały komentarz do każdej z metod.

Ramki mogą być standardowymi ramkami lub iFrame. Tak czy inaczej, będziesz musiał określić dla nich stałą wysokość, więc może to nie być rozwiązanie, którego szukasz.

Javascript to dość obszerny temat i prawdopodobnie istnieje wiele sposobów, w jaki można go użyć, aby osiągnąć pożądany efekt. Ale myślę, że przychodzą mi do głowy dwa sposoby:

1. Pełne żądanie AJAX, które żąda nagłówka / stopki, a następnie umieszcza je w odpowiednim miejscu strony;
2. <script type="text/javascript" src="header.js"> który ma w sobie coś takiego: document.write('My header goes here');

Robienie tego przez CSS byłoby naprawdę nadużyciem. CSS ma contentwłaściwość, która pozwala na wstawianie zawartości HTML, chociaż tak naprawdę nie jest przeznaczona do tego. Nie jestem też pewien, czy przeglądarka obsługuje tę konstrukcję.

Możesz to zrobić za pomocą javascript i nie sądzę, żeby to było takie wymyślne.

Jeśli masz plik header.js i footer.js.

Wtedy zawartość header.js mogłaby wyglądać jak

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

Pamiętaj, aby uciec przed wszelkimi zagnieżdżonymi znakami cudzysłowu w pisanym ciągu. Możesz wtedy wywołać to ze swoich szablonów statycznych za pomocą

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

i podobnie dla footer.js.

Uwaga: nie polecam tego rozwiązania - to hack i ma wiele wad (słabe dla SEO i użyteczności tylko na początek) - ale spełnia wymagania pytającego.

możesz to łatwo zrobić za pomocą jquery. nie potrzeba php do tak prostego zadania. umieść to tylko raz na swojej stronie internetowej.

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

teraz użyj ładowania danych na dowolnym elemencie, aby wywołać jego zawartość z zewnętrznego pliku html, wystarczy dodać wiersz do kodu HTML, w którym chcesz umieścić zawartość.

przykład

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

Najlepszym rozwiązaniem jest użycie statycznego generatora witryn, który obsługuje szablony / obejmuje obsługę. Używam Hammera na Maca, jest świetny. Jest też Guard, rubinowy klejnot, który monitoruje zmiany plików, kompiluje sass, konkatenuje wszystkie pliki i prawdopodobnie zawiera.

Najprostszym sposobem na to jest użycie zwykłego kodu HTML.

Możesz użyć jednego z tych sposobów:

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

lub:

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

Najbardziej praktycznym sposobem jest użycie dołączenia po stronie serwera . Jest bardzo łatwy do wdrożenia i oszczędza mnóstwo pracy, gdy masz więcej niż kilka stron.

Ramki HTML, ale nie jest to idealne rozwiązanie. Zasadniczo uzyskujesz dostęp do 3 oddzielnych stron HTML jednocześnie.

Myślę, że inną opcją jest użycie AJAX.

Możesz użyć narzędzia do uruchamiania zadań, takiego jak łyk lub chrząknięcie.

Istnieje pakiet NPM gulp, który obsługuje pliki w locie i kompiluje wynik do wyjściowego pliku HTML. Możesz nawet przekazywać wartości do swoich podrzędnych.

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

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

przykład zadania łyka:

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'));
    });

Możesz spróbować załadować je po stronie klienta, na przykład:

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

UWAGA: zawartość zostanie załadowana od góry do dołu i zastąpi zawartość pojemnika, do którego ją załadujesz.

Nie. Statyczne pliki HTML nie zmieniają się. Potencjalnie możesz to zrobić za pomocą jakiegoś fantazyjnego rozwiązania JavaScript AJAXy, ale byłoby to złe.

Oprócz korzystania z lokalnego systemu szablonów, takiego jak wiele setek, istnieje teraz w każdym języku skryptowym, a nawet przy użyciu domowej roboty z sedlub m4i wysyłania wyniku na serwer, nie, potrzebujesz przynajmniej SSI.

Jedynym sposobem dołączenia innego pliku ze statycznym kodem HTML jest ramka iframe. Nie uważałbym tego za dobre rozwiązanie w przypadku nagłówków i stopek. Jeśli twój serwer nie obsługuje PHP lub SSI z jakiegoś dziwnego powodu, możesz użyć PHP i wstępnie przetworzyć go lokalnie przed załadowaniem. Uznałbym to za lepsze rozwiązanie niż ramki iframe.