What is Content Model, and why do I need one?
The content model describes the structure of your website's content. Stackbit uses your website's content model to allow you to edit your site's content within the site preview.
For example, assume your site's blog posts are stored in markdown files with three fields in the frontmatter - "title", "image" and "tags", and with the post content in the body of the markdown file like this:
---
title: "Content Model"
image: "/images/content-model.png"
tags: ["jamstack", "stackbit", "content-model"]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Subheader
Consequat id porta nibh venenatis cras sed felis eget.
Dui ut ornare lectus sit amet est placerat in egestas.
The content model of the blog post would describe the names and types of blog post fields:
By knowing your site's content model, Stackbit can provide an "on-page" editing experience without any additional changes to your site's code.
Of course, the names and the types of post fields are the bare minimum your content model should have. Depending on the CMS you use, you can also specify the field labels, descriptions, validation rules, and other aspects of your content model.
Your site's content doesn't have to be stored in files. If your site is powered by an API-based CMS, your content and the content model are stored within the CMS. In this case, Stackbit will use the content and the content model defined within the CMS.
As noted above, there are two ways for Stackbit to get your site's content model - from an external CMS or from stackbit.yaml
. The next section explains these two concepts.
External Content Model
File-Based CMS
If your site uses file-based CMS, then your site's content model should be defined in CMS specific configuration files. Stackbit will read these configuration files and get the content-model from there. So you won't need to define the content model in stackbit.yaml
, but only specify which CMS you use.
For example, if your site uses NetlifyCMS as its CMS, your content model is defined within the NetlifyCMS's config.yml
file. Stackbit will read NetlifyCMS configuration and use the content model from there.
API-Baed CMS
If your site uses API-based CMS, then your site's content model is defined within that CMS. Stackbit will fetch the content model via CMS API.
For example, if your site uses Contentful, the content model is defined within Contentful. Stackbit will fetch the content model via Contentful API.
stackbit.yaml
you still need to define the types of your models and the URL path of your page models. For more info, visit the models
documentation.
Stackbit Content Model
If your project does not use any headless-CMS and stores the content in plain files (.md, .json, .yaml, etc.), you can define your site's content models in stackbit.yaml
using Models and Fields.
Continuing the previous example, the post's model in stackbit.yaml
could be defined in the following way:
post:
type: page
label: Blog Post # label shown besides posts in the Stackbit editor
folder: "/blog" # the folder where all post files are stored
urlPath: "/blog/{slug}" # the url of each post, the {slug} is file name
fields:
- type: string
name: title
label: Title
required: true
- type: image
name: image
label: Featured Image
- type: list
name: tags
label: Tag List
items:
type: string