Start a blog

In this tutorial you model blog posts in the CMS, write and publish a few of them, list them on a page and design one template page that renders every post at its own address. You need a site you can edit, for example the one from the landing page tutorial.

Create the Posts collection

1. Open the CMS

   In the left sidebar, under the tabs, press CMS. The CMS workspace replaces the canvas. Press CMS again, or the x next to it, to go back to the canvas.

2. Create the collection

   Press New collection. Type Posts as the Name; the Slug fills in as posts. Press Create collection. Every collection starts with two fields, Title and Slug.

3. Add the fields

   Open the Fields tab and press Add field for each field below. Select a field in the list to change its Name in the settings panel on the right; the Key follows the name until you save.

   • Image, named Cover.
   • Text, named Excerpt. Turn on Multiple lines.
   • Rich text, named Body. Turn on Required to publish.
   • Date, named Date.

4. Save the schema

   Press Save schema in the bar at the bottom. Keys are fixed once saved, because bindings use them.

Write your first posts

1. Add an item

   Open the Items tab and press New item. The item opens in a side sheet. Type a title: the slug follows it until you edit the slug or save.

2. Fill in the fields

   Press Choose an image under Cover and upload or pick an image, then write its alt text. Write a short excerpt, pick a date, and write the body. The body editor has headings, lists, links and images.

3. Save a draft

   Press Save draft, or ⌘S. A draft is not on the site yet.

4. Publish the item

   Press Publish, or ⌘↵. The status changes to Published. Later edits keep the live copy until you press Publish changes.

5. Add two more posts

   Create two more items the same way so the list has something to show. Publish one now. For the other, open the More actions menu (...) at the bottom of the sheet, choose Schedule…, pick a time and press Schedule.

List the posts on a page

1. Insert a collection list

   Go back to the canvas and open the page that should show the posts. Select the page frame, press + in the Layers tab and choose Collection list in the CMS group. It uses your first collection and holds one frame named Item.

2. Set the query

   In the Collection list section of the inspector, keep Source on CMS query and Collection on Posts. Set Sort to Date and pick the descending arrow so the newest post comes first. Limit is 6 by default.

3. Design the card

   The first child of the list is the template: design it once and it repeats for every post. Select Item, then use + to add an Image and two Text elements inside it.

4. Bind the card to the post

   Select the image. In the Image section, press the button on the CMS image row and pick Cover under CMS fields. Select the first text and, in Typography, press on the Content row and pick Title. Bind the second text to Excerpt the same way.

Design the post page

1. Create a template page

   Open the Pages tab and press the database button, New collection page, then choose Posts. Malla adds a page with the path /posts/:slug. It renders once for every published post.

2. Pick a preview item

   Press Esc to clear the selection. The inspector shows the Page section: check that Collection is Posts and choose a post in Preview. The canvas now shows that post.

3. Add the post content

   Add a Text for the title and bind its Content to Title. Add an Image and bind CMS image to Cover. For the body, press + and choose Rich text in the CMS group, then in the Content section press on the Source row and pick Body.

4. Show the date

   Add a Text for the date. Press on its Content row, type this expression instead of picking a field, and press ↵:

   text

   fn.formatDate(item.date, 'long')
   

Link the cards to their posts

1. Wrap the card contents in a link

   Go back to the page with the list. In the Layers tab, select the image and the two texts inside Item (⇧ + click), right-click one of them and choose Wrap in link. Item itself cannot be wrapped, so wrap what is inside it. You can also insert a Link block into Item and drag the content into it.

2. Bind the link to the post page

   With the new link selected, open the Link section. Press on the Bound URL row and pick your post page under Item page. The link now points to /posts/ followed by each post's slug.

3. Try it in preview

   Press ⌘↵ and click a card. The preview opens the post page with that post. Press ⌘↵ again to go back to editing.

Add SEO and publish

1. Bind the SEO title

   Open the post page again in the Pages tab. With nothing selected, open the SEO section. Press next to Title, type item.title + ' | Blog' and press ↵. Each post page now gets its own title.

2. Bind the SEO description

   Press next to Description and pick Excerpt. Search engines and social previews now show each post's own excerpt.

3. Publish to staging

   Press Publish in the toolbar, keep Staging selected and press Publish to staging. Open the link, go to the page with the list and click a card to open its post.

What you learned

• A collection defines the fields of your content, and items are the entries you write, save as drafts, publish or schedule.
• A collection list repeats its first child once per item, and binds a layer to an item field.
• A template page renders one page per published item, with SEO fields bound to the item.
• A link bound to Item page sends each card in a list to its own item's page.

Keep going with the next tutorials, or read the guides behind this one: