Compiladores de Layout de Conteúdo

Os compiladores de layout de conteúdo são usados para saída em HTML para um layout de conteúdo quando um item de conteúdo de um tipo de conteúdo especificado é publicado.

Durante a compilação, o comando cec compile-content procurará um arquivo compile.js no mesmo local do arquivo render.js para o componente:

  • src
    • components
      • <yourComponent>
        • assets
          • render.js
          • compile.js

Se esse arquivo não existir, o layout não será compilado e será renderizado no runtime.

Se o arquivo existir, ele precisará implementar uma interface compile(), que retorna uma Promessa. Por exemplo, a seguir está um compilador de layout de conteúdo, seguido pela saída layout.html resultante:

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;

O layout.html resultante pode ser inserido em um aplicativo web ou onde quer que você precise de saída HTML estática do layout de conteúdo. O layout.html é produzido no mesmo diretório do arquivo 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}}