Templating

Last Updated: Aug 9, 2021
documentation for the dotCMS Content Management System

The Pages displayed on your dotCMS site are built from a combination of multiple components. dotCMS provides multiple methods for you to create your pages, depending on your needs for different types of styles, layouts and content for the different pages on your site. This document provides an overview of the main dotCMS components and features which are combined to display the pages on your site.

Note: Although this information is helpful to understand how to build your dotCMS site and pages, it's not necessary to understand all this information before you start building in dotCMS. To jump right into a hands-on introduction to building dotCMS sites, please see the Tutorial: Day One documentation, or the Building a Basic Page Architecture section, below.

Main Architecture Components

The main components which contribute to the display of your dotCMS pages are:

ComponentDescriptionAssigned To / Contained Within
ThemeDetermines the look and feel of the page, including both the styling (CSS/Sass/Less) and common/shared page elements (such as the header, footer, and top or bottom navigation).
Note:
  • Themes are used with Standard (Template Builder) Templates only; Advanced Templates do not use Themes.
    • For Advanced Templates, the header, footer, navigation, and styling must be included in the Advanced Template directly.
    • However Advanced Templates may include files from Themes in order to share common elements.
Standard Templates
TemplateThere are two types of Templates in dotCMS:Regardless of the type, the Template determines the layout of the page, including:
  • The styling of the page (through a Theme for Standard Templates, or directly for Advanced Template).
  • Whether or not the page displays common elements such as a header, footer, or navigation.
  • Location and layout of the side bar (if any).
  • Which Containers are included on the page, and where the Containers are located in the layout.
Pages
ContainerThere are two types of Containers in dotCMS:
  • Zero Content Containers allow you to create code which can be shared/included in multiple Templates.
  • Content Containers determine both:
    • What Content Types can be added to the Page (at the location in the layout where the Container is placed), and
    • How Content of each Content Type will be displayed in the Container.
Containers of both types can be added to both Standard Templates and Advanced Templates.
Templates
WidgetContains Velocity code which can both pull content from the dotCMS data store and display content on the page.
Since Widgets contain code, they are extremely flexible in what Content or other information they can display, and in how the content can be displayed and styled.
Containers
Content TypeDetermines what information is contained in each individual content item of the given Content Type, including specific fields that can be entered, acceptable values, location of content items, whether individual content items can be accessed via their own unique URLs, and more.Containers (or Widgets)
ContentIndividual content items (otherwise known as “contentlets”) of a specific Content Type.
What Content Types can be added to a Page are determined by the Containers on the Page (which are in turn determined by the Template assigned to the Page).
Pages (via Containers or Widgets)

Please also read the Content as Data section of the Content documentation to understand the relationship among Content Types, Content Type fields, and Content.

Reusing Components

With the exception of Pages, all of the above components are re-usable within the appropriate context. For example:

  • The same content item can be added to multiple different Pages.
  • The same Content Type can be added to multiple different Containers.
  • The same Container(s) can be added to multiple different Templates.
  • The same Theme can be shared by multiple Templates.
  • etc.

This makes it easy to reuse all elements of your Pages, including:

ElementShared via Component(s)
ContentContent items
LayoutTemplates
StylingThemes or Advanced Templates
CodeWidgets, Containers, Templates, and/or Themes
Common or shared elements
(Headers, Footers, Navigation)
Themes or Advanced Templates

Page Architecture Diagrams

The following diagrams illustrate how each of these components is combined to display a Page.

Using a Standard Template

Page Architecture - Standard Template

Using an Advanced Template

Page Architecture - Advanced Template

Building a Basic Page Architecture

In general, as demonstrated by the Tutorial: Day One documentation, the following is a common process to build out the basic architecture for your dotCMS site:

  1. Create your Content Types to represent the content you wish to display.
    • For example, you may have content types for “Products”, “Blog”, “Events”, “Promotions”, etc.
    • Please see the dotCMS starter site or demo site for examples of some commonly used Content Types.
  2. Create or import some sample content.
    • You do not need to create content items for all content you will eventually display on your site, but you will need at least a few sample content items to be able to properly format and display your content in the following steps.
  3. Create a Container to display content of your Content Type.
    • Alternately, you can modify an existing Container (included with the dotCMS starter site) to allow display of your new Content Types created in step 1, above.
  4. Create a Template to include your Container.
    • Alternately, you can modify an existing Template (included with the dotCMS starter site) to include the Container you created in step 3, above.
  5. Create a Page to include your Template.
    • Make sure to select your Template (from step 4, above) when entering your Page properties.
  6. Edit your page and add one or more of your content items (from step 2, above) to your page.

Adding Content to a Page

Your content contributors can add the following to a Page built using a given Template:

  • Content allowed by any Container in the Template assigned to the Page:
    • The New Content option simultaneously creates a new Content item (contentlet) and displays it on the Page.
    • The Reuse Content displays an existing (previously created) Content item on the page.
  • A Widget
    • Any Widget that a content creator has Permissions for may be added to any Container on a Page.

Additional Architecture Considerations

The steps above provide a quick, minimal set of steps for you to begin building and displaying Pages in dotCMS; performing these basic steps for 1 or 2 new Content Types can usually be done in as little as half an hour and give you a solid foundation to understand dotCMS and how some of the more advanced dotCMS features work.

Once you've gotten your feet wet building some content and pages, it's helpful for you to consider a number of additional topics before you fully build out your Content Types and other portions of your architecture. Please see the Planning your Content Architecture documentation for important considerations to think about in advance; this will help you to make good choices about your architecture as you proceed in your site implementation.

On this page

×

We Dig Feedback

Selected excerpt:

×