3. Most useful Volto settings – Volto Customization for JavaScript Beginners

Most useful Volto settings

3. Most useful Volto settings#

You can configure Volto by modifying settings in a js-file.

In our add-on we can modify the index.js

const applyConfig = (config) => {
  return config;
};

export default applyConfig;

Here three settings are changed:

const applyConfig = (config) => {
  config.settings = {
    ...config.settings,
    navDepth: 3,
    openExternalLinkInNewTab: true,
    hasWorkingCopySupport: true,
  };
  return config;
};

export default applyConfig;

Note

The ... is a use of the spread-syntax that "expands" the configuration into its elements and allows to change existing values and add new ones.

Note

If you instead make your changes in the project (i.e. not using a add-on) you make the same changes in the file config.js of the project.

Some of the settings are duplicates of settings that exist in the Plone backend. For example the setting supportedLanguages must match the one set in the Plone registry as plone.available_languages and in plone.default_language.

To configure Volto as a multilingual project you do this:

const applyConfig = (config) => {
  config.settings = {
    ...config.settings,
    defaultLanguage: "de",
    isMultilingual: true,
    supportedLanguages: ["en", "de", "fr"],
  };
  return config;
};

export default applyConfig;