Come posso archiviare l'intestazione e il piè di pagina del mio sito Web in un'unica posizione?

Question

Riscrivo sempre le intestazioni e i piè di pagina e per ogni modifica devo copiare e incollare manualmente tutto il codice nelle pagine web. Ovviamente questo è l'approccio sbagliato ma non sono sicuro di quello giusto. La mia idea attuale è di avere un div "header" e "footer" e poi con $ (document) di jquery. Caricare i div con il codice. Ho paura che sia lento perché aspetta che l'intera pagina venga visualizzata prima di eseguire il codice dell'header/footer. Qual è un modo comune per gestire questo problema?

Answer 1

Sembra che tu abbia bisogno di una tecnologia lato server. Quale delle tre opzioni scelte dipende da te e dal tuo hosting. Molto probabilmente, il tuo hosting supporterà PHP e SSI (include lato server).

Nella configurazione più semplice, in pratica inserire il codice comune in singoli file, ad esempio header.inc e footer.inc. Non importa quale sia il nome o l'estensione di questi file.

Per PHP, le pagine dovrebbero ora essere *.php invece di *.html e avete bisogno di scrivere questo codice:

<?php include('header.inc'); ?> 
<p> 
    Here is your regular document. 
</p> 
<?php include('footer.inc'); ?> 

Per SSI, non c'è bisogno di cambiare i nomi dei file, e il codice assomiglia a questo:

<!--#include virtual="header.inc" --> 
<p> 
    Here is your regular document. 
</p> 
<!--#include virtual="footer.inc" --> 

Answer 2

Il modo comune è utilizzare il linguaggio lato server come PHP. O se hai bisogno solo di footer e header puoi usare SSI

Answer 3

Comunemente, ci sono alcune tecnologie di template sul lato server in uso, come PHP, JSP o XSL. La creazione di pezzi riutilizzabili di codice che possono essere collegati è abbastanza semplice utilizzando uno di questi approcci.

Per un approccio HTML + JS puro, è possibile utilizzare un IFRAME per collegarsi a un file HTML di intestazione e piè di pagina autonomo. Ciò ti consentirebbe di mantenere tutte le informazioni di intestazione e piè di pagina in un unico posto, con la sola necessità di aggiornarle una volta.

Answer 4

Utilizza HTML o PHP include.

Answer 5

Non si vuole assolutamente farlo con Javascript. Prima di tutto, l'intestazione e il piè di pagina non verranno caricati fino all'esecuzione di Javascript, ma più importante, chiunque non abbia abilitato Javascript non li vedrà affatto (e richiedere Javascript per visualizzare una pagina statica non ha senso).

Ci sono due semplici metodi per fare questo:

1) Utilizzare un linguaggio server-side come PHP per includere i piè di pagina:

<?php 
    include('header.html'); 
?> 
The rest of the page goes here 
<?php 
    include('footer.html'); 
?> 

2) Utilizzare una build/processo che genera statica distribuire pagine. Questo sarebbe simile a 1) ma sarebbe fatto solo una volta per build, piuttosto che ogni volta che qualcuno colpisce la pagina.