Εργαλεία μεταγλώττισης διάταξης περιεχομένου

Τα εργαλεία μεταγλώττισης διάταξης περιεχομένου χρησιμοποιούνται για την παραγωγή HTML για μια διάταξη περιεχομένου κατά τη δημοσίευση ενός στοιχείου περιεχομένου ενός καθορισμένου τύπου.

Κατά τη μεταγλώττιση, η εντολή cec compile-content θα αναζητήσει ένα αρχείο compile.js στην ίδια θέση με το αρχείο render.js για το συστατικό στοιχείο:

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

Εάν αυτό το αρχείο δεν υπάρχει, η διάταξη δεν μεταγλωττίζεται και θα αποδοθεί κατά τον χρόνο εκτέλεσης.

Εάν το αρχείο υπάρχει, χρειάζεται να υλοποιήσει ένα περιβάλλον εργασίας compile(), το οποίο επιστρέφει μια τιμή Promise. Στο ακόλουθο παράδειγμα εμφανίζεται ένα εργαλείο μεταγλώττισης διάταξης περιεχομένου μαζί με το παραγόμενο 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 μπορεί να εισαχθεί σε μια εφαρμογή web ή οπουδήποτε αλλού χρειάζεται στατικό 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}}