导航结构：

Question

我建立一个＆＃34;一个滚动＆＃34;多页网站的主页。我用bootstrap骨架构建它。在此设计之后，我想添加另一个页面来构建博客。

网站链接： http://werkbaar.net/

链接到回购： https://github.com/bomengeduld/boilerplate

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

我的目标：为我的单滚动主页制作一个下拉菜单，并导航到其他页面＆amp;博客。

主要问题：如何导航到其他页面和堡垒？

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

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

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

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

最后创建新导航项将导航到的其他帖子，例如/foobar.md：

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

## Foo

Hello World!

现在，您foobar的链接将显示为滚动导航栏的一部分。

Answer 2

使用此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 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？

导航结构：

结构default.html

3 个答案: