Frontend Developer Manual / 6.2 Theme Config

Frontend Developer Manual / Version 2401

6.2 Theme Config

The Theme Config is an JSON file named theme.config.json located in the root folder of a theme. It defines meta information and build options for the theme.

Attribute	Type	Default	Description
`name`	Non-Empty String		Specifies the technical name of the theme.
`description`	Non-Empty String	`null`	The description of the theme. The first paragraph will be displayed to editors in Studio.
`thumbnail`	Non-Empty String	`null`	A path to a thumbnail image relative to the theme's root folder. It will be displayed to editors in Studio. Minimum and recommended image size is 82 x 50 pixels.
`targetPath`	Non-Empty String	`null`	Specifies the output path of the build theme. If not set the 'target' folder of the surrounding frontend workspace (or if not present the theme's) root folder will be used.
`l10n`	L10N	see below	The attribute `l10n` contains configuration for localization. Its attributes are described below.
`scripts`	Script or Array<Script>	[]	Define `script` elements which should be included in the theme here. The order of the elements also specifies the load order of the files.
`styles`	Style or Array<Style>	[]	Define `style` elements which should be included in the theme hero. The order of the elements also specifies the load order of the files.

Table 6.5. Root attributes of the theme configuration

Attribute	Type	Default	Description
`masterLanguage`	String	"en"	The language id of the master language. For further information see Section 4.6, “Localization”.
`bundleEncoding`	String	"ISO-8859-1"	The encoding of the resource bundle. Possible values are: "ISO-8859-1" Resources are processed with "ISO-8859-1" encoding. "UTF-8" Resources are processed with "UTF-8" encoding.
`bundleNames`	Array<N-E String>	[]	An array of non-empty strings containing the names (for example, ${bundleName}_en.properties) of resource bundles.

Table 6.6. Attributes of the L10N type

Attribute	Type	Default	Description
`type`	Enum		Specifies the type of the script or style. Possible values are: "webpack" Specifies that the script or style will be build with webpack. "copy" Specifies that the script or style will just be copied over to the target directory without any transformation. "externalLink" The script or style is an external link.
`src`	Non-Empty String or Array<N-E String>		The source of the script or style. If `type` is set to `"externalLink"` the source must start with "http://", "https://" or "//" otherwise the source must match a path relative to the theme root directory.
`target`	Non-Empty String		The attribute only applies if `type` is set to `"copy"`. The value represents a relative path from theme's target directory to specify where the file specified in `src` should be copied to.
`entryPointName`	Non-Empty String	<calculated>	The attribute only applies if `type` is set to `"webpack"`. The value influences the base name of the generated script or style file. If it is not set it will be generated from the base name of the provided `src` attribute. If it is an array the first value will be used. Scripts will always end with `.js` while styles will always end with `.css` after the webpack build regardless of the initial type (for example, `.scss`).
`include`	Boolean	`true`	If `false` the script or style will not be included in the list of scripts or styles of the `CMTheme` content item which means that it will not be loaded automatically if you use our default templates.
`smartImport`	Non-Empty String or null	`"default"`	Bricks can define in which contexts their smart import mechanism is applied (see Section 4.1, “Structure of the Workspace”). By using this config this context can be set to a different value (e.g. "preview") so only certain styles and scripts will be automatically loaded. If set to `null` all styles and scripts regardless of context will be included (not recommended).

Table 6.7. Shared attributes of the Script and Style type

Attribute Type Default Description

defer Boolean false If true, loading of the script file is deferred meaning it will be loaded on document ready.

inHead Boolean false If true, the JavaScript file is included in the document's head otherwise it will be loaded at the end of the document's body.

Attribute	Type	Default	Description
`defer`	Boolean	`false`	If `true`, loading of the script file is deferred meaning it will be loaded on document ready.
`inHead`	Boolean	`false`	If `true`, the JavaScript file is included in the `document`'s `head` otherwise it will be loaded at the end of the `document`'s `body`.
`runtime`	Non-Empty String	`commons`	The attribute only applies if `type` is set to `"webpack"`. In order to reduce the size of the individual entry points and to share a single instance for ES6 modules the runtime chunk of webpack will be shared among all entry points and put into a common file. There are cases where this behavior is not desired, e.g. when embedding a JavaScript file into a website that does not load the entire theme. By changing the config to a different name the script will be bundled in a way that it will not share code and instances with scripts using a different configuration (e.g. "commons"). Important: Loading scripts with different runtimes on the same website can lead to problems if e.g. third party libraries are loaded twice which are not meant to be loaded twice.

runtime

Non-Empty String

commons

The attribute only applies if type is set to "webpack".

In order to reduce the size of the individual entry points and to share a single instance for ES6 modules the runtime chunk of webpack will be shared among all entry points and put into a common file. There are cases where this behavior is not desired, e.g. when embedding a JavaScript file into a website that does not load the entire theme.

By changing the config to a different name the script will be bundled in a way that it will not share code and instances with scripts using a different configuration (e.g. "commons").

Important: Loading scripts with different runtimes on the same website can lead to problems if e.g. third party libraries are loaded twice which are not meant to be loaded twice.

Table 6.8. Additional attributes of the Script type

Search Results

Table Of Contents

Filter

Frontend Developer Manual / Version 2401

6.2 Theme Config

Search Results