Site
Chautec CMS Sites is a quick way for you to get a responsive SPA site up and running.
API components are pulled from the API which represent different parts of the site.
Each Site deployed is backed by server-side rendering for better performance and SEO.
Check out our showcase to see some examples of Sites.
Pre-defined component types will help you build most of what you need for a website. They will make more sense when you start to edit them using the Admin panel.
Click on the following types to read about them:
Use components of type page to represent a webpage which you can navigate to by specifying the component's key in the URL path (e.g. https://<your-domain>/<component-key>).
Page components used on Site can render not only the page's own content, but also certain child components including blocks, html and folders.
The easiest way for you to visualize this is by checking out the Site Page Example.
Components of type block are an important type in Site. Blocks can be nested and its rich text can contain all sorts of things such as tables, images, HTML and more.
The Admin panel makes it easy to adjust a block's width and visuals. You have the option to make blocks collapsed, meaning viewers must click the block title to expand it in order to read the content.
Use a component of type html to put in any HTML you want. This could from creating your custom HTML layouts to embedding a YouTube video.
Components of type title are currently only used as dividers within a menu component.
To add titles to a page, use either a block or html component which provide good flexibility.
Components of type url are used to represent a link.
This is mainly used inside menu components where you can have a link to:
- An external site (e.g. https://www.example.com)
- Internal site page (e.g. /my-page)
- The ID of a particular component on the current page (e.g. #component-key-example if “example” was the component's key)
In addition to menus, URL components can also be rendered from inside a folder component.
Components of type folder are a great way to organize your components. You can put any type of components in a folder.
In addition, folders can also be rendered as a child component of a page. The folder will render links to file, page and URL components. Similarly to block components, you can set the frame color of the folder as well as making it collapsed.
Components of type file are a representation of an actual file you can upload. The component itself contains a link the actual resource URL as well as metadata about the file.
There are 4 useful component types which you can directly edit via the Admin code editor and immediately start using anywhere.
- txt - text file
- css - CSS stylesheet
- js - JavaScript
- xml - XML markup (useful for things like the sitemap)
These component types come with a direct URL in which you can use to consume directly.
Websites made with Site have several fixed keys it looks for in a space. You can have multiple spaces for multiple websites.
Here is a list of the keys which should exist in your space:
- site-config - A JSON component for the purposes of configuring your site.
- home - A page component which represents your homepage.
- css - A CSS component which you can use to define custom styling.
- js - A JS component which you can use to script custom JavaScript.
- sitemap - An XML component which will be read by search engine bots.
The site config allows you to configure your site. Here are the available options which are all optional:
- siteName - Name of your website.
- themeColor- Theme color for mobile.
- order - An object specifying how a particular page's child components should be ordered.
- blogs - An array of pages that are blog.
- blogsPerPage - How many blog posts to show every time the user clicks the “load more” button. This value defaults to 10.
- summaryLength - How many characters to show in blog page blocks and search results before there is a “read more” button. This value defaults to 300.
- logoKey - Key of a file component which represents the site's logo.
- mainMenuKey - Key of the site's main menu component.
- rightMenuKey - Key of the site's right menu component.
- footerKey - Key of a block or HTML component which is shown as a footer on every page.
- googleTagManager - The container ID of your Google Tag Manager account. There is limited support for this but you can use it to add analytics and other marketing scripts.
{
"siteName": "Chautec CMS",
"themeColor": "#000000",
"order": {
"announcements": { "by": "date", "direction": "desc" }
},
"blogs": ["my-blog"],
"summaryLength": 300,
"logoKey": "logo",
"mainMenuKey": "main-menu",
"rightMenuKey": "right-menu",
"footerKey": "footer",
"googleTagManager": "GTM-XXXXXXX"
}
Sites powered by Site are all mobile responsive.
By default, components in a page are ordered by the component's sequence. Configure the ordering for different pages by using the site config.
When a page is a blog, it's child components will automatically be sorted by date descending.
Only components marked as both published and visible can be seen by public users. However, users who are logged in to Admin are also able to see unpublished + visible components.
One of the problems with SPA websites is the inability for search engines to crawl the site properly. Site overcomes this by providing server-side rending while still giving visitors the good experience of an SPA site. This along with the metadata configurable for each page component provides your site with better SEO optimization.
All Sites are secured with HTTPS. You have the option of providing us your own certificate.