콘텐츠 레이아웃 컴파일러를 사용하여 지정된 콘텐츠 유형의 콘텐츠 항목을 게시할 때 콘텐츠 레이아웃용 HTML을 출력할 수 있습니다.
컴파일 동안 cec compile-content
명령은 구성요소의 render.js
파일과 동일한 위치에서 compile.js
파일을 찾습니다.
src
components
<yourComponent>
assets
render.js
compile.js
이 파일이 없으면 레이아웃이 컴파일되지 않고 런타임에 렌더링됩니다.
파일이 존재하면 Promise를 반환하는 compile()
인터페이스를 구현해야 합니다. 예를 들어, 다음 콘텐츠 레이아웃 컴파일러를 실행하면 결과 layout.html이 출력됩니다.
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; } try { // add in style - possibly 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 }); } }; module.exports = ContentLayout;
결과 layout.html은 웹 애플리케이션 또는 그 밖에 콘텐츠 레이아웃의 정적 HTML 출력이 필요한 곳에 삽입할 수 있습니다. layout.html은 compile.js 파일과 동일한 디렉토리에 출력됩니다.
{{{style}}} {{#fields}} <div class="author-container"> <span class="author-name" onclick='{{scsData.contentTriggerFunction}}("starter-blog-post_author eq \"{{author_id}}\"")'>{{starter-blog-author_name}}</span> {{/fields}}