Universal header in HTML

问题

I want to create a universal header (and footer) using HTML/CSS/Javascript so that if I update it to one page, it automatically updates on the rest. I also want to be able to choose which link is showing up with the active class on it. Also, I am using bootstrap. Here are some criteria I need to meet:

• No PHP
• No Server side (must work on github pages)

Thank you in advance,

Albert

回答1:

You can use jQuery to .load a HTML file:

HTML

<div id="header"></div>

jQuery

$('#header').load('static.html');

Alternatively, you could use iframe to load your static header. See this answer for more information regarding the available techniques.

回答2:

Maybe try Jekyll, this is a tool to generate static pages, also this is how the githup page handles your own personal page. You just follow the file structure and set the layout properties in your files, then you can use the universal layout (including header, footer etc.) in your page.

Here is a link to Jekyll.Jekyll

来源：https://stackoverflow.com/questions/42685939/universal-header-in-html