Question

我是Meteor的新手，我很难在Google上找到允许我使用Bootstrap导航栏并使用模板的代码，这样我就不必添加{{＆gt;脚注}}到我的所有模板。这是我的代码，我不认为我的css文件是必要的，但是如果他们有帮助就大喊大叫！

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',
  });
});

Answer 1

您可以使用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以获取演示。

如何使用引导程序导航栏构建Meteor Blaze UI

1 个答案: