定制组件编译器都遵循与页编译器相同的模型,可以为部分布局、定制组件和内容布局创建该编译器。
编译过程中,cec compile-template 命令将在与组件的 render.js 文件相同的位置查找 compile.js 文件:
src
components
<yourComponent>
assets
render.jscompile.js如果此文件不存在,将不编译组件并将在运行时呈现组件。
如果该文件确实存在,它需要实施 compile() 接口,其返回 Promise。例如,以下 Starter-Blog-Author-Summary 是定制内容布局编译器:
var fs = require('fs'),
path = require('path'),
mustache = require('mustache');
var ContentLayout = function (params) {
this.contentClient = params.contentClient;
this.contentItemData = params.contentItemData || {};
this.scsData = params.scsData;
};
ContentLayout.prototype = {
contentVersion: '>=1.0.0 <2.0.0',
compile: function () {
var compiledContent = '',
content = JSON.parse(JSON.stringify(this.contentItemData)),
contentClient = this.contentClient;
// Store the id
content.fields.author_id = content.id;
if (this.scsData) {
content.scsData = this.scsData;
contentType = content.scsData.showPublishedContent === true ?
'published' : 'draft';
secureContent = content.scsData.secureContent;
}
// calculate the hydrate data
content.hydrateData = JSON.stringify({
contentId: content.id,
authorName: content.fields['starter-blog-author_name']
});
try {
// add in style - possible to add to <head> but inline for
simplicity
var templateStyle = fs.readFileSync(path.join(__dirname,
'design.css'), 'utf8');
content.style = '<style>' + templateStyle + '</style>';
var templateHtml = fs.readFileSync(path.join(__dirname,
'layout.html'), 'utf8');
compiledContent = mustache.render(templateHtml, content);
} catch (e) {
console.error(e.stack);
}
return Promise.resolve({
content: compiledContent,
hydrate: true // note that we want to hydrate this component using the render.js hydrate() function. This is required for when the user clicks on the author
});
}
};
module.exports = ContentLayout;