pagify.js將我的索引頁面內容添加到其他頁面

Question

我目前使用pagify.js來創建一個帶有jQuery的簡單單頁面網站。

我遵循的步驟，並呼籲pagify容器頁面上（index.html的） -

<script type='text/javascript'> 
    $(document).ready(function() { 
    $('#page_holder').pagify({ 
     pages: ['about', 'directory', 'archive','contribute'], 
     animation: 'fadeIn', 
     'default': '', 
     cache: true 
    }); 
    }); 
</script> 

和

<div id='container'> 
    <header> 
     <nav class="nav"> 
     <a class="column c1" href='#about'>About</a> 
     <a class="column c1" href='#directory'>Directory</a> 
     <a class="column c1" href='#archive'>Archive</a> 
     <a class="column c1" href='#contribute'>Contribute</a> 
     </nav> 
    </header> 
    <div id='page_holder' /> 
</div> 

問題 -

當我添加更多的HTML到容器頁面（index.html）它顯示在網站的其他四個頁面上，儘管我只希望它顯示在index.html上，原因很明顯。

爲了詳細說明，我打算只我的index.html顯示以下內容，但是當我把它添加到像這樣的網頁... -

 <div id='container'> 
    <header> 
     <nav class="nav"> 
     <a class="column c1" href='#about'>About</a> 
     <a class="column c1" href='#directory'>Directory</a> 
     <a class="column c1" href='#archive'>Archive</a> 
     <a class="column c1" href='#contribute'>Contribute</a> 
     </nav> 
    </header> 
    <div id='page_holder' /> 
    </div> 


</div> 
    <div id="feed" class="feed" style="margin-top: 54px;"> 
    <div class="column c2"> 
      <p> 
       Creatives of Colour (C-oC) is an independent directory 
       that provides you with up to date information on 
       current, and future work of creatives of colour 
       being showcased in the UK. C-oC aims to contribute to the 
       necessary exaltation of talented artists within the various 
       ethnic minorities within the UK. 
      </p> 
      <p><a href="#">Find out more about Creatives of Colour..</a></p> 
    </div> 
</div> 
    <div class="column c3">    
     <span class="f-artist">Featured Artist</span> 
      <br> 
      <br> 
       <div class="item-title"> 
        <a href="#">Titles goes here</a> 
       </div> 
        <div class="item-content"> 
         <p> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
          do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco 
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
          irure dolor in reprehenderit in voluptate velit esse cillum 
          dolore eu fugiat nulla pariatur. 
         </p> 
        </div> 
    </div> 

....這是也顯示在關於，目錄，檔案&貢獻頁面。

我希望這是有道理的。

非常感謝提前！

Answer 1

我不認爲這是可能有不同的部分顯示在pagify.js各個頁面上，因爲單頁面應用程序的全部要點是創建一個頁面使用的框架。

你可能會受益於使用如C＃，在這裏你就可以使用using後端語言，並有partials。或者，PHP，有includes。通過這種方式，您可以表示您希望包含的其他網頁的部分。

作爲JavaScript的替代品，您可以使用JavaScript條件來表示哪些頁面應該顯示哪些附加內容使用jQuery的$.load()來加載多個「段」。簡單地瓜分你的內容的方式，你只希望顯示某些頁面的東西是在一個獨立的文件，然後，基於URL $.load()：

if (location.path.indexOf("index") > -1) { 
    $("#container").load("content.html"); 
} 

在上面的例子中，索引頁的#container填入content.html的內容。

請注意，在使用結構index.html#page的單頁應用程序中，您需要定位＃標籤之後的內容。若要指定網頁（這只是index.html），你可以檢查缺乏哈希標籤的有：

if(!window.location.hash) { 
    $("#container").load("content.html"); 
} 

希望這有助於！:)