There are several ways to follow it, at a beginner level you can have a scheme where the content is dynamic, that is, the Header and Footer sections are filled with a variable or code insertion, at an advanced level there are template engines, if you want to start, with php is configured very easily
Solution 1 :
Solution 2 :
I used the W3 method: https://www.w3schools.com/HOWTO/howto_html_include.asp
So far it is not working with both header and footer, only header is working. I am unsure why. Will be the next problem solve.
Problem :
At a beginner level I am trying to make a frontend page that has a header and a footer on all pages. Each page can have an identical header and footer. In the header, I’d like to add a Bootstrap navbar (or similar) and in the footer, something similar. But rather than just copying that header and footer to each page I’d like to just make that a separate thing and insert it into each page when it loads. This way if I update the header or footer it updates on all pages.
In the past, I have done this with Python, but I am only using frontend for this project and I am only going to publish on GitHub (it’s mostly for my own purposes).
I am using Visual Studio Code as my editor if this makes it any easier.
I will have CSS and JS folders too (if this makes any difference).
**Update Edit:
I have tried to do this, but I am missing something here.
This is what I attempted (after a quick Google search now I know what I am after):
<!--JQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--Include Content-->
<script>
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
</script>
</head>
<body>
<header>
<div data-include="header"></div>
</header>
It has been a while since I have done this, so I am rusty, but this doesn’t seem to be working for some strange reason.
Comments
Comment posted by Dharman
Please do not add “solved” to your question. Use the answer space below to show and explain the solution.
Comment posted by Paul Davis
Hey, thanks for that. How do I do the scheme without PHP? But I guess I could learn PHP too, I am sure there are some easy-to-follow videos.