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.
2条答案
按热度按时间z4bn682m1#
有几种方法来遵循它，在初学者的水平，你可以有一个方案，其中的内容是动态的，也就是说，页眉和页脚部分填充了一个变量或代码插入，在高级水平有模板引擎，如果你想开始，与php是非常容易配置
woobm2wo2#
我使用了W3方法：https://www.w3schools.com/HOWTO/howto_html_include.asp
到目前为止，它不是工作与页眉和页脚，只有页眉是工作。我不知道为什么。将是下一个问题解决。