我如何使用bootstrap導航欄構建我的Meteor Blaze UI

我是Meteor的新手，我努力在Google上查找代碼，使我可以擁有Bootstrap導航欄並使用模板，因此我無需添加{ {> footer}}到我的所有模板。這裏是我的代碼，我不認爲我的css文件是必要的，但如果他們會幫助的話，大喊大叫！我如何使用bootstrap導航欄構建我的Meteor Blaze UI

MyWebsite.html

<head> 
    <title>MyWebsite</title> 
</head> 

<body> 
<!-- <h1>Welcome to Meteor!</h1> 

{{> home}}--> 

    <!--{{> background1}}--> 
    {{> logoFloat}} 
    {{> navbar}} 
</body> 

<template name="main"> 
    <p>Welcome!</p> 
</template> 

<template name="background1"> 
    <div id = "backgroundDiv1"> 
    </div> 
</template> 

<template name="home"> 
    <button>Click Me</button> 
    <p>You've pressed the button {{counter}} times.</p> 
    <div id = "backgroundDiv2"> 
    </div> 
    {{> footer}} 
</template> 

<template name="highScores"> 
    <p>High Scores</p> 
    {{> footer}} 
</template> 

<template name="faq"> 
    <p>FAQ</p> 
    {{> footer}} 
</template> 

<template name="wiki"> 
    <p>Wiki</p> 
    {{> footer}} 
</template> 

<template name="about"> 
    <p>Yoooooo!</p> 
    {{> footer}} 
</template> 

<template name="logoFloat"> 
    <div id="logoFloatDiv"> 
    <img src="img/simpleLogo3_small.png" id="logoFloatImg"/> 
    </div> 
</template> 

<template name='navbar'> 
    <nav class="navbar navbar-inverse" style="border-radius:0 !important"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">My Website</a> 
     </div> 
     <ul class="nav navbar-nav"> 
      {{> navItems}} 
     </ul> 
     </div> 
    </nav> 
</template> 

<template name='navItems'> 
    <li role="presentation" class="{{ activeIfTemplateIs 'home' }}"><a href="{{pathFor route='home'}}">Home</a></li> 
    <li role="presentation" class="{{ activeIfTemplateIs 'faq' }}"><a href="{{pathFor route='faq'}}">FAQ</a></li> 
    <li role="presentation" class="{{ activeIfTemplateIs 'wiki' }}"><a href="{{pathFor route='wiki'}}">Wiki</a></li> 
    <li role="presentation" class="{{ activeIfTemplateIs 'highScores' }}"><a href="{{pathFor route='highScores'}}">High Scores</a></li> 
    <li role="presentation" class="{{ activeIfTemplateIs 'about' }}"><a href="{{pathFor route='about'}}">About</a></li> 
</template> 

<template name="footer"> 
    <footer class="footer-basic-centered"> 

      <p class="footer-company-motto">The company motto.</p> 

      <p class="footer-links"> 
       <a href="#">Home</a> 
       · 
       <a href="#">Blog</a> 
       · 
       <a href="#">Pricing</a> 
       · 
       <a href="#">About</a> 
       · 
       <a href="#">Faq</a> 
       · 
       <a href="#">Contact</a> 
      </p> 

      <p class="footer-company-name">Company Name &copy; 2015</p> 

     </footer> 
</template>

MyWebsite.js

if (Meteor.isClient) { 
    // counter starts at 0 
    Session.setDefault('counter', 0); 

    Template.home.helpers({ 
    counter: function() { 
     return Session.get('counter'); 
    } 
    }); 

    Template.navItems.helpers({ 
     activeIfTemplateIs: function (template) { 
     var currentRoute = Router.current(); 
     //console.log("currentRoute " + currentRoute + " ! " + currentRoute.lookupTemplate() ? 'active' : 'fuck'); 
     if(currentRoute === null) 
     { 
      return ''; 
     } 
     return template && 
      template.toUpperCase() === currentRoute.lookupTemplate().toUpperCase() ? 'active' : ''; 
     } 
    }); 

    Template.home.events({ 
    'click button': function() { 
     // increment the counter when button is clicked 
     Session.set('counter', Session.get('counter') + 1); 
    } 
    }); 
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
} 

Router.map(function() { 
    this.route('/main', { 
    path: '/', //overrides the default '/home' 
    }); 
    this.route('home', { 
    path: '/home', //overrides the default '/home' 
    }); 
    this.route('faq', { 
    path: '/faq', //overrides the default '/faq' 
    }); 
    this.route('wiki', { 
    path: '/wiki', //overrides the default '/wiki' 
    }); 
    this.route('highScores', { 
    path: '/highScores', //overrides the default '/highScores' 
    }); 
    this.route('about', { 
    path: '/about', 
    }); 
});

來源

2016-02-28 smuggledPancakes

你可以使用Iron Router Layouts和重用像你footer模板常用的組件。通過這種方式，你可以定義一個主佈局，其配置爲layoutTemplate：

Router.configure({ 
    layoutTemplate: 'applicationLayout' 
});

<template name="applicationLayout"> 
    <header> 
     {{> navbar}} 
    </header> 
    {{> yield}} 
    {{> footer}} 
</template>

如果你想使用applicationLayout模板只在特定的路線，你可以明確地設定相應路線中的佈局：

Router.route('/about', function() { 
    this.layout('applicationLayout'); 
    this.render('about'); 
}, { 
    name: 'about' 
});

結帳此GitHub repository爲一個演示。

來源

2016-02-28 17:31:44

非常感謝你的澄清，我都轉過身來，不能把它放在一起：/ – smuggledPancakes

我如何使用bootstrap導航欄構建我的Meteor Blaze UI

回答

相關問題