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:
| Component | Description | Assigned To / Contained Within |
|---|---|---|
| Theme | Determines 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:
| Standard Templates |
| Template | There are two types of Templates in dotCMS:
| Pages |
| Container | There are two types of Containers in dotCMS:
| Templates |
| Widget | Contains 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 Type | Determines 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) |
| Content | Individual 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:
| Element | Shared via Component(s) |
|---|---|
| Content | Content items |
| Layout | Templates |
| Styling | Themes or Advanced Templates |
| Code | Widgets, 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
Using an 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:
- 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.
- 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.
- 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.
- 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.
- Create a Page to include your Template.
- Make sure to select your Template (from step 4, above) when entering your Page properties.
- 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.
