This schema setup guide is for someone who has completed the Quickstart Guide and is ready to set up their first actual project.
Before starting, be sure to study how Pages, Collections, and Relationships work to form the Schema & Data Model of a project built with Airship.
Before you set up anything in the CMS, sketch a sitemap of key pages, collections, and the data contained on each page and collection of your project. If items from one section should reference another section, map out those relationships as well. If you cannot think of a particular project, you can use this sitemap:
Sketch out a wireframe for each page and collection to show what data will be editable and connected to the CMS.
Example "Homepage" and "News" Collection:
The new "Homepage" will contain the following data:
- Header Image (
image
) - Header (
text
) - Section 1 Image (
image
) - Section 1 Header (
text
) - Section 1 Description (
textarea
) - Section 2 Image (
image
) - Section 2 Header (
text
) - Section 2 Description (
textarea
) - Section 3 Image (
image
) - Section 3 Header (
text
) - Section 3 Description (
textarea
) - News (3 posts from "News" collection,
related
) - Products (2 items from "Products collection,
related
)
Each item in the "News" collection will contian the following data:
- Header Image (
image
) - Header (
text
) - Author (
text
) - Body (
richtext area
) - Short Description (
textarea
)
For more examples, see some Use Cases.
Log in to the Airship CMS admin panel (https://mysite.airshipcms.io/admin)
for your project.
The root
page (title "Homepage") is the only page you cannot delete in an Airship project. In Airship CMS, click the to Modify the page.
Delete all the demo fields. Only the uneditable properties should be left:
Modify the "Homepage" fields to add fields appropriate for your project. This example shows the fields added for the Homepage mocked up above.
Save the page.
Create additional pages and define the fields for those pages.
The permalink defines the url for your page. When developing locally, the url will read as http://localhost:9001/permalink
. When your site is launched, the url will read as http://mysite.airshipcms.io/permalink
(where mysite is your site subdomain).
Set the existing application.html
layout for every page. This means all pages in the site will reference the same outer "container" markup typically used for the header and footer of the page. You can change this later, though it's easiest to set it to use the default application.html
layout for now.
Create a new unique template for each new page.
Define the fields for each page.
These fields will contain all of the data that will be rendered on your site using Airship Propellers. You can create as many fields as needed as long as each variable name
is unique. By default, the variable name
is the title
in lowercase, with spaces converted to underscores. You may customize each variable name, however, keep in mind that having consistency between the title and variable name makes it easier to remember what value to use when rendering data with Propellers.
While the variable name and field type are not editable, you can edit the field title
by clicking the at the right of the field. Each field can also be reordered by clicking and dragging the field into the desired position within the list.
Pages that share the same template should have consistent fields in order to use the same Propeller markup.
For more information about each field type, check out the documentation on Datafields.
Create collections and define the fields for items in those collections.
For each collection, add a Title, Public Path, and Name.
The public path defines the url for the collection. When developing locally, the url will read as http://localhost:9001/public_path
. When your site is launched, the url will read as http://mysite.airshipcms.io/public_path
(where mysite is your site subdomain).
For collections utilizing the show.html
layout, a single item in the collection will render at http://mysite.airshipcms.io/public_path/view/permalink
.
For collections utilizing the categories.html
layout, collection categories will render at http://mysite.airshipcms.io/public_path/categories
.
For collections utilizing the category.html
layout, items in a category will render at http://mysite.airshipcms.io/public_path/categories/category-permalink
.
Example News Collection:
- Title:
News
- Public Path:
news
The collection will render at yourwebsitename.com/news
, categories will render at yourwebsitename.com/news/categories
, a list of posts within a category will render at yourwebsitename.com/news/categories/category-permalink
, and a single post will render at yourwebsitename.com/news/view/permalink
.
Set the existing application.html
layout for every collection.
Create a new unique template directory for each new collection.
When you are get familiar with how pages and collections render, you can start to edit your project to more efficiently share layouts and templates accross pages and collections on your site. See Layouts, Page Templates and Collection Templates for more information.
Example News Collection:
- Layout:
application.html
- Template Directory:
news
Define the fields for an item in the collection.
Example News Collection:
The only purpose of the Primary Label
is to identify what field will be set as the "main field" in the list view of items in the CMS.
Example News Collection:
- Set "Header" as the primary label.
Relationships should be the last thing you set up for your schema. Review the Docs on Relationships if you haven't done so yet.
To set up a relationship, add a "Related Aerostats" field to the page or collection you want one or more reference posts to appear on.
Example: In this example, the Homepage pulls some posts from the News Collection. On the Homepage, add a Field called "Related News" with type "Related Aerostats" and the collection "News":
Add some placeholder content to each page you created, and add items with placeholder content to every collection you created. You need to add placeholder content so that something renders on the page when you run the site locally.
Example:
- Add some content and images to the Homepage.
- Add some posts to the News Collection.
- Go back to the Homepage, and add some posts to the Related News section:
In your terminal, login to your airship site and airship land
the templates for your new collections and pages. Be sure to git commit or backup your local files before you land. Landing will sync files from the live site to your local development site and overwrite any local files you may have. If you are not using a source control management tool, you can alernatively manually create new templates for your site. See Page Templates and Collection Templates for more on templates.
Once your pages and collections are set up and demo content is in place, you can start building out your site in your local development environment. See the Development Guide for some development guidelines.