如何使用 bootstrap 在单滚动页面导航和另一页面之间导航？

Question

我为一个多页面网站构建了一个 "one-scroll" 主页。我用 bootstrap 骨架构建它。这样设计后我想再添加一个页面来建一个博客

Link 到网站： http://werkbaar.net/

Link 回购： https://github.com/bomengeduld/boilerplate

问题：我用的是scrollspy，所以导航设置为滚动。每当我导航到 new_page 时，我都无法导航回 home_page

我的目标： 为我的单滚动条制作一个下拉菜单 home_page 并导航到其他页面和博客。

主要问题：如何导航到另一个页面？

我找到了这个答案，但不确定如何应用它：

Can I create a link to another page using ScrollSpy in bootstrap, while also keeping default functionality?

导航结构：

   <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
      <div class="container">
        <div class="navbar-header page-scroll">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
     </button>

    <a class="navbar-brand page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"><img class="img-responsive" alt="logo"
                            src="/img\logo_200x38px_t.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>
        </li>
        <li>
          <a class="page-scroll" href="#welkom" data-toggle="collapse" data-target=".navbar-collapse.in">Welkom</a>
        </li>
        <li>
          <a class="page-scroll" href="#gasten" data-toggle="collapse" data-target=".navbar-collapse.in">Onze Gasten</a>
        </li>
        <li>
          <a class="page-scroll" href="#kaart" data-toggle="collapse" data-target=".navbar-collapse.in">Het Menu</a>
        </li>
        <li>
          <a class="page-scroll" href="#gastvrouw" data-toggle="collapse" data-target=".navbar-collapse.in">De Gastvrouw</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact" data-toggle="collapse" data-target=".navbar-collapse.in">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

结构default.html

<!DOCTYPE html>
<html lang="en">
    {% include head.html %}

    <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
        {% include nav.html %}
        {% include header.html %}

    {{ content }} 

        {% include footer.html %}
        {% include scripts.html %}
    </body>
</html>

Answer 1

使用这个 HTML:

<ul class="nav navbar-nav">
  <li><a href="{% if page.layout == 'home' %}#top{% else %}/{% endif %}">Home</a></li>
  <li class="{% if page.layout == 'verzorging' %}active{% endif %} hidden-sm"><a href="/verzorging">Verzorging</a></li>
  <li class="{% if page.layout == 'collectie' %}active{% endif %}"><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#collectie">Collectie</a></li>
  <li><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#top" id="logo"><img src="/img/urbanwildlogo.png" /></a></li>
  <li class="hidden-sm"><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#luchtzuiverend">Luchtzuiverend</a></li>
  <li class="{% if page.layout == 'jmplants' %}active{% endif %}"><a href="/jmplants">JM Plants</a></li>
  <li class="{% if page.layout == 'contact' %}active{% endif %}"><a href="/contact">Contact</a></li>
</ul>

...和动画滚动脚本 (jQuery):

//make anchor tags scroll
$('.navbar a').click(function(){
    if($('body').hasClass('home') && $(this).attr('href')) {
        el = $.attr(this, 'href').replace('/','');
        $('html, body').animate({
            scrollTop: ($( el ).offset().top - 100)
        }, 500);
        if($('.navmenu.offcanvas').hasClass('in')) $('.navbar-toggle').click();
        return false;
    }
    else if (!$('body').hasClass('home')) {
        if($(this).attr('href').charAt(0)!='/' && $(this).attr('href').charAt(0)=='#') $(this).attr('href', '/'+$(this).attr('href'));
    }
});

... 和 scrollspy:

的脚本

/* SCROLLSPY NAVBAR */
$('#navbar').on('activate.bs.scrollspy', function (e) {
    $pageTitle = $(e.target).children("a").text();
    $pagehref = $(e.target).children("a").attr('href').replace("#","").replace("/","");
    if( $("#header").attr('class') != $pagehref){
        $('.navbar li a').blur();
        $("#header").removeClass().addClass($pagehref);
    }
    function delayupdate(){
        history.pushState({}, $pageTitle , '#'+$pagehref)
    };
    setTimeout(delayupdate,500)
});

Answer 2

您需要将菜单项添加到导航栏并修复您的相对路径。

在_includes.header.html中：

-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{site.baseurl}}/css/bootstrap.min.css" rel="stylesheet">
-    <link href="css/style.css" rel="stylesheet">
+    <link href="{{site.baseurl}}/css/style.css" rel="stylesheet">

在 _includes/header.html 中修复所有带有 baseurl 的菜单项：

-          <a class="page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>
+          <a class="page-scroll" href="{{site.baseurl}}/#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>

并添加新的菜单项：

+       <li>
+           <a href="{{site.baseurl}}/foobar#foo" data-target=".navbar-collapse.in">Foobar</a>
+       </li>

最后创建另一个 post 您的新导航项将导航到的位置，例如 /foobar.md:

---
title: I'm other page
layout: default
---

## Foo

Hello World!

现在您的 link 到 foobar 将显示为向下滚动导航栏的一部分。

Answer 3

这就是 html 使它顺利运行的原因。

<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
      </button>

       <a class="navbar-brand" href="{% if page.layout == 'header' %}{% else %}/{% endif %}#header" id="logo"><img class="img-responsive" src="/img\logo_200x38px_t.png" /></a>
</div>


  </div>

 <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">

            <li class="{% if page.layout == 'welkom' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#welkom">Welkom</a></li>

            <li class="{% if page.layout == 'gasten' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#gasten">Onze Gasten</a></li>

            <li class="{% if page.layout == 'kaart' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#kaart">Het Menu</a></li>

            <li class="{% if page.layout == 'gastvrouw' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#gastvrouw">De Gastvrouw</a></li>

            <li class="{% if page.layout == 'contact' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#contact">Contact</a></li>

            <li class="{% if page.layout == 'blog' %}active{% endif %}"><a href="/blog">Blog</a></li>


          </ul>

    </div>
  </div>
</nav>

如何使用 bootstrap 在单滚动页面导航和另一页面之间导航？

How to navigate between one-scroll-page-navigation & another page with bootstrap?

navbar

jekyll

twitter-bootstrap

scrollspy

导航结构：

结构default.html