Compiladores de diseño de contenido

Los compiladores de diseños de contenido se utilizan para generar una salida HTML para un diseño de contenido cuando se publica un elemento de contenido de un tipo de contenido específico.

Durante la compilación, el comando cec compile-content buscará el archivo compile.js en la misma ubicación del archivo render.js para el componente:

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

Si no existe este archivo, el diseño no se compilará y se representará en tiempo de ejecución.

Si el archivo no existe, debe implantar una interfaz compile(), que devuelve una promesa. Por ejemplo, a continuación se muestra un compilador de diseño de contenido seguido de la salida 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;

El archivo layout.html resultante se puede insertar en una aplicación web o en cualquier otra ubicación en la que necesite una salida HTML estática del diseño de contenido. El archivo layout.html se genera en el mismo directorio que el archivo 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}}