Frontend Developer Manual / Version 2406.0
Table Of Contents
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:
|
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:
| |
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
Scripts will always end with |
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 |
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.
|
runtime
| Non-Empty String |
commons
|
The attribute only applies if 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
