代码之家 › 专栏 › 技术社区 › Gino Jan Ludikhuyze

如何在一个滚动页面导航和另一个引导页面之间导航?

scrollspy navbar jekyll twitter-bootstrap

Gino Jan Ludikhuyze · 技术社区 · 8 年前

我为一个多页网站建立了一个“一卷”主页。我用引导框架构建它。在这个设计之后,我想添加另一个页面来建立一个博客。

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

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

我正在使用scrollspy,因此导航设置为滚动。每当我导航到新页面时,我都无法导航回主页

我的目标:

主要问题: 我怎样才能浏览到另一个页面?

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

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>

结构默认值。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>

3 回复 | 直到 8 年前

marcanuy 8 年前

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

在里面 _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 将显示为向下滚动导航栏的一部分。

Mr. Hugo 8 年前

使用此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)
});

Gino Jan Ludikhuyze 8 年前

这是 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>