カスタム・コンポーネント・コンパイラはページ・コンパイラと同じモデルにすべて従い、セクション・レイアウト、カスタム・コンポーネントおよびコンテンツ・レイアウト用に作成できます。
コンパイル時に、cec compile-template
コマンドは、コンポーネントのrender.js
ファイルと同じ場所でcompile.js
ファイルを検索します。
src
components
<yourComponent>
assets
render.js
compile.js
このファイルが存在しない場合、コンポーネントはコンパイルされず、実行時にレンダリングされます。
ファイルが存在する場合、約束を返すcompile()
インタフェースを実装する必要があります。たとえば、次の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;