Un compilador de diseño de página es un módulo NodeJS (CommonJS) de JavaScript que compila el diseño de página correspondiente.
El compilador de diseño de página de un diseño de página específico se define con la asociación de nombre a una extensión -compile.js
:
src
themes
<yourTheme>
layouts
<yourPageLayout>.html
<yourPageLayout>-compile.js
Si no existe ningún -compile.js
para un diseño de página, no se aplicará ninguna compilación personalizada.
Un compilador de diseño de página debe implantar una interfaz compile()
, que devuelve una promesa, como, por ejemplo, about-compile.js
:
var mustache = require('mustache'); var PageCompiler = function () {}; PageCompiler.prototype.compile = function (args) { var self = this, layoutMarkup = args.layoutMarkup; self.SCSCompileAPI = args.SCSCompileAPI; return new Promise function (resolve, reject) { var compiledPage = layoutMarkup, id = self.SCSCompileAPI.navigationRoot; // page is compiled so there is no FOUC, can remove the opacity workaround compiledPage = compiledPage.replace('opacity: 0;', 'opacity: 1;'); // remove the dynamic menu creation, we'll be compiling it here compiledPage = compiledPage.replace('<script src="_scs_theme_root_/assets/js/topnav.js"></script>', ''); // add link to Home page. . . var homePageURL = (self.SCSCompileAPI.getPageLinkData(id) || {}).href; if (homePageURL) { compiledPage = compiledPage.replace('class="navbar-brand" href="#"', 'class="navbar-brand" href="' + homePageURL + '"'); } // build the menu and add it to the page var navMenu = self.createNavMenu(); compiledPage = compiledPage.replace('<!-- navigation menu goes in here -->', navMenu); // return the compiled page resolve(compiledPage); }); }; // Create the navigation menu that was previously dynamically generated on each page PageCompiler.prototype.createNavMenu = function () { . . . } module.exports = new PageCompiler();