如何让sails-linker在子/页面中加载不同的资源？

请查看附件。

这是模板结构。 login.jade扩展了layout.jade。

我的问题是，我想要：

1. 加载到所有页面的global.css文件（完成）
2. login.css文件只有在查看login.jade时才加载（问题）

我已经创build了一个可用的pipe道configuration。 任务如下所示：

devStyles: { options: { startTag: '<!--STYLES-->', endTag: '<!--STYLES END-->', fileTmpl: '<link rel="stylesheet" href="%s">', appRoot: '.tmp/public' }, files: { '.tmp/public/**/*.html': require('../pipeline').frontendGlobalCssFiles, 'views/**/*.html': require('../pipeline').frontendGlobalCssFiles, 'views/**/*.jade': require('../pipeline').frontendGlobalCssFiles, 'views/auth/login.jade': require('../pipeline').frontendLoginCssFiles } } 

问题是最后的文件规则不起作用。 我敢肯定，前端的LoginCssFiles是好的，因为如果我加载了'views/**/*.jade'path，它的工作原理。 那么这里有什么问题？

Answer 1

好的，解决了。 基本上这个问题不是严格的与玉器的inheritance有关。 无论是父母，孩子还是部分人，无论是父母，孩子还是子女，风帆连接器真正做的是将资产添加到物理文件中。 它所做的只是传递文件，search适当的开始/结束标签，并添加相关的HTML BEFORE编译真正的服务页面。

我的问题是我没有添加开始/结束标签到login（子）页面。

无论如何，即使这样做，我们已经有了所有编译页面将加载所有资产的问题。 因此，例如，login资产也将被加载在主页上。 不太好。

为了解决这个问题，简单地说，我使用了特定页面资源的特定开始/结束标签 。 以下是“长”的故事：

注意：由于我们讲的是jade模板，所以在sails-linker中，我们正在研究* Jade任务，因此这些注释是用jade语法编写的（例如// STYLES而不是<!--STYLES--> ）

首先，我们将隔离“全球资产”>我们要在每一页上加载的资产：

1. 将所有// STYLES实例更改为// GLOBAL STYLES类的东西。 无论是在sails连接器和最终在.jade的意见。

2. /tasks/pipeline.js：将默认文件列表重命名为像globalCssFiles ，jsfiles等，并更改该名称的所有实例。

3. /tasks/config/sails-linker.js：重命名点2修改的所有实例。

其次，我们将添加“页面资产”：

1. 在孩子的玉页上，使用// PAGE STYLES评论。

2. /tasks/pipeline.js：创build页面特定的文件列表，例如：

   var frontendLoginCss = ['styles/login.css'];

及以下：

 module.exports.frontendLoginCss = frontendLoginCss.map(function(path) { return '.tmp/public/' + path; }); 

3. /tasks/config/sails-linker.js：创build页面特定的任务，如：

    devPageStylesJade: { options: { startTag: '// PAGE STYLES', endTag: '// PAGE STYLES END', fileTmpl: 'link(rel="stylesheet", href="%s")', appRoot: '.tmp/public' }, files: { 'views/auth/login.jade': require('../pipeline').frontendLoginCss } } 

4. / tasks / register / *：在你应该到的所有文件中添加相关的任务。 例如，我的linkAssets.js可能是这样的：

    module.exports = function (grunt) { grunt.registerTask('linkAssets', [ 'sails-linker:devJs', 'sails-linker:devStyles', 'sails-linker:devTpl', 'sails-linker:devJsJade', 'sails-linker:devPageJsJade', //added 'sails-linker:devStylesJade', 'sails-linker:devPageStylesJade', //added 'sails-linker:devTplJade' ]); }; 

5. 在jade模板中，使用块语法导入样式/ js，所以可以使用append将资源追加到块中。 例如，一般的“父母”layout.jade将有：

     block styles // GLOBAL STYLES // GLOBAL STYLES END 

而孩子模板login.jade会有：

  append styles // PAGE STYLES // PAGE STYLES END 

最后提示：在子模板中写入附加指令的位置确实无关紧要，它们将始终附加到父模板定义的位置。 所以我会写所有附加在我的子模板的底部（更干净）。

希望对于有相同问题的人来说是有用的！