頁面版面配置編譯器為 NodeJS (CommonJS) JavaScript 模組,它會編譯對應的頁面版面配置。
特定頁面版面配置的頁面版面配置編譯器,是由副檔名為 -compile.js
的名稱關聯所定義。
src
themes
<yourTheme>
layouts
<yourPageLayout>.html
<yourPageLayout>-compile.js
若頁面版面配置沒有 -compile.js
存在,則不會套用自訂編譯。
頁面版面配置編譯器必須實行會傳回承諾的 compile()
介面,例如 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();