Compilatoarele machetei de conţinut sunt utilizate pentru a produce HTML-ul unei machete de conţinut, atunci când este publicat un element de conţinut din tipul de conţinut specificat.
În timpul compilării, comanda cec compile-content
va căuta un fişier compile.js
în aceeaşi locaţie ca şi fişierul render.js
pentru respectiva componentă:
src
components
<yourComponent>
assets
render.js
compile.js
Dacă acest fişier nu există, macheta nu este compilată şi va fi randată la runtime.
Dacă fişierul există, acesta trebuie să implementeze o interfaţă compile()
, care returnează o Promisiune. De exemplu, ceea ce urmează este un compilator al machetei de conţinut, urmat de ieşirea layout.html care rezultă:
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 care rezultă poate fi inserat într-o aplicaţie Web sau oriunde altundeva unde aveţi nevoie de o ieşire HTML statică a machetei de conţinut. Layout.html este un rezultat în acelaşi director cu fişierul 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}}