将常见html提取到单独文件后的静态网站路由问题_Html

将常见html提取到单独文件后的静态网站路由问题

html

将常见html提取到单独文件后的静态网站路由问题,html,Html,我需要开发一个完全静态的网站。这个站点有很多子页面。由于头部分对于所有子页面都是通用的，所以我将头部分放在header.html中，并在每个子页面完成加载时使用jquery加载它。此header.html还从images文件夹加载图像。如果我将所有子页面都保存在根目录中，那么就没有问题了但是，由于有许多子页面，我想在子文件夹中重新排列它们。但是，在加载子页面时，除非我将路径更改为“../images/image.png”，否则my header.html不会加载图像。在该路径更改后加载inde

我需要开发一个完全静态的网站。这个站点有很多子页面。由于头部分对于所有子页面都是通用的，所以我将头部分放在header.html中，并在每个子页面完成加载时使用jquery加载它。此header.html还从images文件夹加载图像。如果我将所有子页面都保存在根目录中，那么就没有问题了

但是，由于有许多子页面，我想在子文件夹中重新排列它们。但是，在加载子页面时，除非我将路径更改为“../images/image.png”，否则my header.html不会加载图像。在该路径更改后加载index.html时，这样做将导致相同的问题

每个文件的简化站点结构和代码如下所示。有谁能给我一些关于如何克服这个问题的建议吗

提前多谢

我的网站结构：

common/
 header.html
images/
 image.png
js/
 jquery-1.11.1.min.js
subpages/
 page1.html
index.html

我的页面代码： index.html

<!DOCTYPE html>
<html>
<head>
    <title>A site</title>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
</body>
<script type="text/javascript">
$('#header').load('common/header.html')
</script>
</html>

header.html

    <div id='logo'><img src='images/image.png' alt="image"></img></div>
    <h1> This is header </h1>
    <div id='subpage'><a href='subpages/page1.html'>Page 1</a></div>

页面1.html

<!DOCTYPE html>
<html>
<head>
    <title>This is a subpage</title>
    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"</script>
</head>
<body>
<div id="header"></div>
<h1> This is a subpage </h1>
</body>
<script type="text/javascript">
$('#header').load('../common/header.html')
</script>
</html>

通过使用脚本，尝试以下方法：

<script type="text/javascript">
    var nom = window.location.pathname;
    nom = nom.split("/");
    nom = nom[nom.length - 1];
    nom = nom.substr(0, nom.lastIndexOf("."));
    nom = nom.replace(new RegExp("(%20|_|-)", "g"), " ");
    if (nom == "index") {
        document.write("<div id='logo'><img src='images/image.png' alt=\"image\"></img></div><h1> This is header </h1><div id='subpage'><a href='subpages/page1.html'>Page 1</a></div>");
    } else {
        document.write("<div id='logo'><img src='../images/image.png' alt=\"image\"></img></div><h1> This is header </h1><div id='subpage'><a href='subpages/page1.html'>Page 1</a></div>");
    }
</script>

这允许服务器知道加载了哪个页面，其余的则用于使用最佳url获取图像。如果不是索引，它将使用路径../images/image.png

只需使用引用域根的路径，从斜杠开始。它可以工作！谢谢你的建议！我很高兴知道这一点！：你能不能通过验证答案来结束这个问题，以避免下面的其他评论？

var nom = window.location.pathname;
    nom = nom.split("/");
    nom = nom[nom.length - 1];
    nom = nom.substr(0, nom.lastIndexOf("."));
    nom = nom.replace(new RegExp("(%20|_|-)", "g"), " ");