Collections

Collections in Lucid allow you to define a type content. Within these collections exist documents. A collection can either contain multiple, or just a single document depending on the mode flag. Collections give you the flexibility to add fields, builder bricks and fixed bricks against them. The custom fields these contain will then be available on the document page builder.

Example

collections.ts

import { CollectionBuilder } from "@lucidcms/core/builders";
import Banner from "./bricks/banner.js";
import SEO from "./bricks/seo.js";

export const PageCollection = new CollectionBuilder("page", {
  mode: "multiple",
  details: {
    name: "Pages",
    singularName: "Page",
    summary: "Pages are used to create static content on your website.",
  },
  config: {
    useTranslations: true,
  },
  hooks: [
    {
      event: "beforeUpsert",
      handler: async (props) => {},
    },
  ],
  bricks: {
    fixed: [SEO],
    builder: [Banner],
  },
})
  .addText("pageTitle", {
    details: {
      label: {
        en: "Page title",
      },
      summary: "The title of the page.",
    },
    config: {
      isHidden: false,
      isDisabled: false,
    },
    collection: {
      column: true,
      filterable: true,
    }
  })
  .addTextarea("pageExcerpt", {
    collection: {
      column: true,
      filterable: true,
    }
  })
  .addCheckbox("pageFeatured", {
    config: {
      useTranslations: true,
    },
    collection: {
      column: true,
      filterable: true,
    }
  })
  .addUser("author", {
    collection: {
      column: true,
    }
  });

export const SettingsCollection = new CollectionBuilder("settings", {
  mode: "single",
  details: {
    name: "Settings",
    singularName: "Setting",
    summary: "Set shared settings for your website.",
  },
  config: {
    useTranslations: false,
  },
  bricks: {
    fixed: [],
    builder: [],
  },
})
  .addMedia("siteLogo", {
    details: {
      label: "Logo",
    },
  });