Skip to content

3.1. Content Elements

Antonio Bašić edited this page Mar 4, 2020 · 2 revisions

Content elements are the basic building block of content inside Tailor. They are contained inside of containers. This feature gives an easy way to develop and configure new content elements.

Development

Set up

A template exists which can be used to create the basic structure for a content element. It can be found here along with instructions on how to get started with it.

Files

Below is a rundown of all the files located in the template and what their purpose is.

index.js

index.js is the file used by Tailor's front-end build process to include the content element. This file must exist.

info.js

info.js is a file that contains basic information about this content element which can be useful to the front-end and the back-end. This file does not need to exist but then its contents need to be found in any file that needs them (index.js and util.js in this template use it).

util.js

util.js is a file used by the back-end to handle unique, not trivial statics resolution scenarios. This file is not necessary if the content element follows the statics structure used in Tailor by default. If the content element has a different structure then this file and the handleStatics method inside of it need to exist in order to correctly handle statics.

edit/index.vue

index.vue is the file used by the front-end to display the content element. This file needs to exist in some form but it does not need to be in an edit folder or with this name. The only requirement is that it is imported in the index.js file as Edit.

Configuration

There needs to be an index.js file inside of the content-elements folder for Tailor to load any custom content elements. If such file does not exist it needs to be created first and it should look like this:

module.exports = [];

For Tailor to use any custom element the name of the folder that contains the custom content element. It should look something like this:

module.exports = ['<name-of-folder-given-to-degit>'];