靜態網站路由問題提取常見的HTML後分開的文件

我需要開發一個完全靜態的網站。這個網站有很多子頁面。由於標題部分對所有子頁面都是通用的，因此我將標題部分放在header.html中，並在每個子頁面完成加載時使用jquery加載它。這個header.html也從圖像文件夾加載圖像。如果我將所有的子頁面保留在根目錄下，沒有任何問題。靜態網站路由問題提取常見的HTML後分開的文件

但是，由於有很多子頁面，我想重新排列它們在子文件夾中。但是，加載子頁面時，我的header.html不會加載圖像，除非我將路徑更改爲'../images/image.png'。在此路徑更改後加載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>

page1.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>

來源

2017-06-13 starlight

只需使用指向域根的路徑，以斜槓開始。 – CBroe

-1

通過使用腳本，試試這個：

<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>

告訴我，如果它的工作，你可以創建一個js文件爲您的代碼更清潔

瞭解，

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"), " ");

這個許可證讓服務器知道哪個頁面被加載，剩下的就是使用最好的url來獲得你的圖像。如果它不是「索引」，它將使用路徑"../images/image.png"

來源

2017-06-13 10:05:26

它的工作原理！謝謝你的建議！ – starlight

我很高興知道！：D 您是否可以通過驗證答案來結束該問題，以避免下面的其他評論？ –

靜態網站路由問題提取常見的HTML後分開的文件

回答

相關問題