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.
Odpowiedzi:
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.
źródło
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)
źródło
Ponieważ HTML nie ma dyrektywy „include”, mogę wymyślić tylko trzy obejścia
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:
<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
content
wł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ę.źródło
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.
źródło
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>
źródło
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.
źródło
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>
źródło
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.
źródło
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.
źródło
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')); });
źródło
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.
źródło
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.
źródło
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
sed
lubm4
i wysyłania wyniku na serwer, nie, potrzebujesz przynajmniej SSI.źródło
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.
źródło