Question

我希望有人能就此提出一些意见，

我正在创建一个流星应用程序，其中我想使用bootstrap来创建管理环境，但让访问者面对使用自定义css。当我使用meteor将bootstrap包添加到我的应用程序时，它可以在每个页面上使用，有没有办法限制将引导程序加载到'/ admin'中的路由？

Answer 1

当你添加bootstrap包时，它是不可能的。但是，您可以将引导程序库添加到public目录，然后将它们加载到标题子模板中，只有当您在仪表板中时才会呈现它。

编辑

但是接下来你将如何创建单独的头模板？

易：

<head>
    ...
    {{> adminHeader}}
    ...
</head>


<template name="adminHeader">
    {{#if adminPage}}
        ... // Put links to bootstrap here
    {{/if}}
</template>



Template.adminHeader.adminPage = function() {
    return Session.get('adminPage');
}


Meteor.router.add({
    '/admin': function() {
        Session.set('adminPage', true);
        ...
    }
});

Answer 2

免责声明：我不确定这是一种“流星方式”，所以这就是我用普通JS做的方式。

的jQuery

$("link[href='bootstrap.css']").remove();

JS - 归功于javascriptkit

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
 var allsuspects=document.getElementsByTagName(targetelement)
 for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
  if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
   allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
 }
}

removejscssfile("bootstrap.css", "css")

然而，这样做会完成将其从页面中删除。我不确定当用户转到另一个页面时，流星是否会尝试读取它。如果没有自动获取，那么当有人从管理部门进入主站点时，你就会遇到一个引导程序问题，这会破坏网站的外观。

我想解决的方法是禁用和启用样式表：

Meteor.autorun(function(){
  if(Session.get('nobootstrap')){
    $("link[href='bootstrap.css']").disabled = true;
  }else{
    $("link[href='bootstrap.css']").disabled = false;
  }
});

我可能需要删除其他引导资源，看看你的页面正在加载什么。

要以相同的方式使用jQuery但是对于javascript文件，请记住更改脚本链接并将href更改为src

根据我的测试，Meteor一旦删除就不会自动重新添加文件，因此如果您希望同一用户能够在两者之间来回切换，您需要找到一些动态重新添加它们的方法主站点和管理站点。或者，如果主站点的http引用来自管理员，强制重新加载页面，然后加载引导资源，一切看起来都很漂亮。

P.S。确保你获得jQuery版本的href正确

Answer 3

如果有人对包含任何js / css文件感兴趣，我已经为它写了一个帮手：

if (Meteor.isClient) {

  // dynamic js / css include helper from public folder
  Handlebars.registerHelper("INCLUDE_FILES", function(files) {
    if (files != undefined) {
      var array = files.split(',');
      array.forEach(function(entity){
        var regex = /(?:\.([^.]+))?$/;
        var extension = regex.exec(entity)[1];
        if(extension == "js"){
          $('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>');
        } else if (extension == "css"){
          $('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />');
        };
      });
    }
  });
  Router.onStop(function(){
    $("[data-dynamicJsCss]").remove();
  });

}

然后简单地使用：

{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}

在任何已加载的模板中：）

从Meteor中的特定路线中排除引导程序

3 个答案: