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

Question

请参阅附件。

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

我的问题是我想要:

1. 在所有页面中加载 global.css 文件(完成)
2. 仅在查看login.jade时加载login.css文件(问题)

我已经创建了一个工作管道配置。任务如下所示:

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
    }
}

问题是最后一个文件规则不起作用。我确信 frontendLoginCssFiles 没问题，因为如果我使用 'views/**/*.jade' 路径加载它，它就可以工作。那么这里有什么问题呢？

Answer 1

好的，解决了。基本上，这个问题与 Jade 传承并没有严格的关系。 sails-linker 真正做的是将 Assets 添加到物理文件中，无论它们是父项、子项还是部分文件。它所做的就是获取传递的文件，搜索正确的开始/结束标签并在编译实际提供的页面之前添加相关的 html。

我的问题是我没有将开始/结束标签添加到登录(子)页面。

无论如何，即使这样做，我们也会遇到所有编译页面都会加载所有资源的问题。例如，登录资源也将加载到主页上。不太好。

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

注意:由于我们谈论的是jade模板，因此在sails-linker中我们正在研究*Jade任务，因此注释是用jade语法编写的(例如 // STYLES 而不是 <!--STYLES--> )

首先，我们将隔离“全局 Assets ”>我们想要在每个页面上加载的 Assets :

1. 更改所有 // STYLES类似 // GLOBAL STYLES 的实例。都在 sails-linker 中，最终在 .jade View 中。

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

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

其次，我们将添加“页面资源”:

1. 在子 Jade 页面上，使用类似 // PAGE STYLES 的内容。评论。

2. /tasks/pipeline.js:创建特定于页面的文件列表，例如:

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

及以下:

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

/tasks/config/sails-linker.js:创建特定于页面的任务，例如:

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
   }
}

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

在jade模板中，使用 block 语法来导入styles/js，因此您可以使用append将资源附加到 block 中。例如，一般的“父”layout.jade 将具有:

 block styles
    // GLOBAL STYLES
    // GLOBAL STYLES END

而子模板login.jade将具有:

     append styles
        // PAGE STYLES
        // PAGE STYLES END

最后提示:在子模板中编写追加指令的位置并不重要，它们始终会追加到父模板定义它们的位置。因此，我会将所有附加内容写在子模板的底部(更干净)。

希望对有同样问题的人有用!