Develop Mini Blog with Directus - Part 2

directus | Directus, Headless CMS NextJS | 2024-10-21

We are setting up Directus

On the default screen (Content tab) - we can start to create collection.

Screenshot1

We are going to create a blog collection, name blog, set type to Generated UUID

and tick all Optional Fields

Screenshot2

Collection Setup

Screenshot3

Optional Fields

For the blog fields

Field	Type	Interface	Setting
title	String	Input	Required
type	String	Dropdown (News, Campaign)	Required
slug	Text	Input (Trim, Slugify)	Required
external	Text	Input	Validation `{"and":[{"external":{"regex":"^(https):\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]6(\:[0-9]+)?(\/[a-zA-Z0-9-])(\?[a-zA-Z0-9_&%=+-])?(#[a-zA-Z0-9_-])?$"}}]}`
image	UUID	Image
start	Date	DateTime	Default - Set true for Hide on Details Condition: SHOW if TYPE = Campaign `{"_and":[{"type":{"_eq":"campaign"}}]}` Set false - Hidden on Details Set true - Required
end	Date	DateTime	Default - Set true for Hide on Details Condition: SHOW if TYPE = Campaign `{"_and":[{"type":{"_eq":"campaign"}}]}` Set false - Hidden on Details Set true - Required
published	Date	DateTime	Default - Set true for Hide on Details Condition: SHOW if TYPE = News `{"_and":[{"type":{"_eq":"news"}}]}` Set false - Hidden on Details Set true - Required
content	Text	WYSIWYG