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>

问题 -

当我向容器页面（index.html）添加更多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>

....它也显示在about，directory，archive＆amp;贡献页面。

我希望这是有道理的。

非常感谢提前！

Answer 1

我认为不可能在pagify.js的单个页面上显示不同的段，因为单页应用程序的重点是创建一个页面使用的框架。

您可能会受益于使用C＃等后端语言，您可以使用 using ，并且 partials 。或者，PHP， includes 。这样，您就可以表示您想要包含的其他页面的部分。

作为JavaScript替代方案，您可以使用JavaScript条件来表示哪些页面应使用jQuery的$.load()来显示哪些附加内容以加载多个“段”。只需将您想要在某些页面上显示的内容放在独立文件中，然后根据该网址$.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");
}

希望这有帮助！：）

pagify.js正在将我的索引页面内容添加到其他页面

1 个答案: