jquery 每个HTML页面中的页眉和页脚文件

1l5u6lss  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(127)

我正在使用GitHub Pages创建一个网站,我想将页眉和页脚放入单独的文档中,然后在我制作的每个页面上链接到它们。GitHub页面只支持静态网站,所以我不能使用PHP或类似的东西。我试着用我在上面找到的建议:
Make header and footer files to be included in multiple html pages
https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez
https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing
它使用jQuery,但它对我不起作用。有人能告诉我我哪里做错了吗?
我的文件层次结构:

- index.html
- html
    - header.html
    - footer.html
    - otherfiles.html
- css
    - header.css
    - footer.css
    - otherfiles.css

在index.html文件中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(function() {
  $("#header").load("html/header.html"); 
  $("#footer").load("html/footer.html"); 
});
</script>

</head>

<body>

<!-- Header-->
<div id="header"></div>
 
<!--main section-->

<!-- Footer -->
<div id="footer"></div>

我把这个放在footer.html和header.html的body中:

<body>
<a href="http://www.google.com">click here for google</a>

这是我能告诉你的,我应该做的,但它根本不起作用。只是没有页眉或页脚出现在我的网站。

wgmfuz8q

wgmfuz8q1#

可能会考虑使用iframe对象来引用页面,在您发布的最后一个链接(评论之一)上有一个示例

或者尝试从html文件夹中删除页眉/页脚文件,并将它们放在与index.html相同的目录中,以消除文件引用是问题的可能性。
查看使用handlebars.js库。这个库可用于实现MVC布局(基本上文件由家庭控制器引用以显示内容)。它可以和GithubPages一起使用,我以前做过。

希望这能帮上一点忙,至少能为你指明正确的方向。

相关问题