close

Filter

loading table of contents...

Frontend Developer Manual / Version 2301

Table Of Contents

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.

ieExpression

(deprecated)

Non-Empty String null If not empty the attribute specifies if the generated script tag will be wrapped by a conditional expression evaluated by the Internet Explorer. The value of the attribute represents the expression to use.
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.
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
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.