Airship Schema

Before you can do the Angular Tutorial, complete this tutorial for recreating the Airship Schema for this project.

Login to Airship CMS

In your browser, navigate to yourdomain.airshipcms.io/admin and login with your credentials.

airship-admin-login

Modify the _root_ page

Click the wrench Modify Link for the "Landing Page".

homepage

Check that the layout for the page is set to application.html and the template for the page is set to root.html.

homepage-page-rendering

Modify the Page Fields:

  • Remove the initial page fields from the Page Fields section.
  • Add a textarea field titled "Description".
  • Add a link field titled "Github".
  • Add a textarea field titled "Body".

homepage-fields

Click the Modify Page button.

Create the Airship Schema, Airship Templating, and Styling Pages

  • Navigate to Pages and click the New Page button.
  • Enter "Airship Schema" into the Title field.
  • The permalink "airship-schema" will generate.

airship-schema

You don't need to set anything in the Template Rendering section, since the contents of the project are all rendered in the single-page application on the root page.

In the Page Fields section, add a textarea field titled "Body".

page-field-body

Click Create Page. Repeat, for the "Airship Templating" and "Styling" pages.

all-pages

Create the Elements Collection

  • Navigate to Collections and click the New Collection button.
  • Enter "Elements" in the Title field.
  • Refer to a single item in this collection as a(n)... "element".
  • The public path "elements" will generate.

elements-collection-setup

In the Collection Rendering section, you'll see Layout, Template Directory, Items Per Page with 50 as the default value, Sort Property with permalink as the default value and Sort Order with ascending as the default value.

Select application.html from the Layout dropdown then click Set Layout.

Select Create New Directory from the Template Directory dropdown.

Enter elements then click Add Directory.

Items Per Page determines the number of items rendered on the page and must be a number. Change the value to 1000.

Sort Property determines what property the items will be sorted by. The avaliable options are permalink, created at, published on and sorting position. For this project select sorting position.

Sort Order determines the order the items will be sorted. The options are ascending and descending. Leave the value as ascending. In the Collection Settings section, check "Show Permalink".

elements-collection-settings

In the Post Fields section, add a text field titled "Name", an image field titled "Image", and a textarea field titled "Description".

elements-collection-fields

Set the Primary Label to "Name".

elements-collection-primary-label

Click the Create Collection button.

Add some Elements

  • In the list view of the Elements Collection, click the New Item button.
  • Enter the element "Name", "Image" and "Description".
  • Click the Save & Close button.
  • Create a few more elements.

If you have a local copy of this repository, the graphics for all the elements in this demo are included in a directory outside of compartments.

Local Development

Return to the Setup Instructions Step #3 for instructions on developing locally, setting up the Airship Templates, and deployment.