共通のHTMLを別のファイルに解凍した後の静的なWebサイトのルーティングの問題

完全に静的なWebサイトを開発する必要があります。このサイトには多くのサブページがあります。ヘッダー部分はすべてのサブページに共通であるため、header.htmlにヘッダー部分を置き、各サブページのロードが完了するとjqueryを使用してロードします。このheader.htmlはimagesフォルダから画像を読み込みます。すべてのサブページをルートディレクトリに置いても問題ありません。共通のHTMLを別のファイルに解凍した後の静的なWebサイトのルーティングの問題

しかし、多数のサブページがあるので、私はサブフォルダでそれらを再配置したいと思います。しかし、サブページをロードするとき、私のパスを '../images/image.png'に変更しない限り、私の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>

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>

012スクリプトを使用して

出典

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>

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

、それが働いている場合は教えてください、そして、あなたが理解し

きれいにするためにあなたのコードのためのjsファイルを作成することができます

これは、サーバーにどのページが読み込まれているかを知ることを許可し、残りの部分はあなたの画像を持つために最適なURLを使用するためのものです。 "索引"でない場合は、パスを使用します。"../images/image.png"

出典

2017-06-13 10:05:26

それは動作します！アドバイスありがとうございます！ – starlight

私はそれを知ってうれしい！：D 以下のコメントを避けるために、答えを検証するだけで問題を閉じることができますか？ –

共通のHTMLを別のファイルに解凍した後の静的なWebサイトのルーティングの問題

答えて

関連する問題