5

我希望任何人都可以对此提供一些意见，

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

4

3 回答 3

3

当您添加引导程序包时，这是不可能的。但是，您可以将引导 csses 添加到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);
        ...
    }
});
于 2013-07-16T21:44:15.137 回答
1

免责声明：我不确定执行此操作的“流星方式”，所以这就是我将如何使用普通 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 文件，请记住将链接更改为 script 并将 href 更改为 src

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

Ps 确保你得到正确的 jQuery 版本的 href

于 2013-07-16T21:46:06.233 回答
1

如果有人有兴趣包含任何 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'}}

在您加载的任何模板中:)

于 2015-06-14T18:33:29.340 回答