Question

我有三个css文件，我只想加载到特定的页面或模板上。如何在Meteor中完成。我已经尝试在创建模板时将css文件附加到头部区域，但这不起作用，因为当我离开此页面时这些文件保持加载状态。

Answer 1

我用一个非常简单的自定义布局解决了这个问题，它在第一个div中添加了模板的名称。在您的主模板上：

<head>
  <title>Your title</title>
  ...
</head>

<template name="layout">
  <div class="container-fluid {{template}}">
    <header>
      <h1>Testing</h1>
      ...
    </header>
    <div class="row">
      ...
    </div>
  </div>
</template>

添加以下模板助手：

Template.layout.helpers({
  template: function () {
    route = Router.current();
    return route? route.lookupTemplate() : 'home';
  },
  ...
});

现在可以通过简单地将模板的名称添加为根类来将您的CSS隔离到单个页面，如下所示：

.templateName header h1 { color: red; }
.templateName div.row { max-height: 300px; }
...

最后，请记住将Iron Router指向您的布局模板：

Router.configure({
  layoutTemplate: 'layout',
  ...
});

如何只在一个页面中加载Meteor中的css文件？

1 个答案: