Collection pages, filters and search

The list and item pages a collection gets, and the URL parameters that filter, sort, search and page through its items.

A collection with Pages turned on gets two ordinary Astro pages in your site: a list of its items and a template for each item's page. Both read the site's database on every request, so a published item shows up without a rebuild.

The list page a new collection gets, here with a Select field called Type.

1. Search Looks through the text fields of every item.
2. Filters One menu for each Select field.
3. Items Published items, 24 per page.

The two pages

In Pages (P) the item page is listed as "<Collection> · Template". Opening it shows the newest published item on the canvas. Each item's address is the collection's address plus the item's Address, like /blog/my-first-post.

Drafts are never on the public pages. On a site with several languages, both pages show the visitor's language where a translation exists and the original where it doesn't.

An item page

src/pages/blog/[slug].astro

---
export const prerender = false;
import Layout from "../../layouts/Layout.astro";
import { collectionEntry, localize } from "@expirio/cms";

const found = await collectionEntry(Astro.locals.cms, "blog", Astro.params.slug);
if (!found) return new Response(null, { status: 404 });
const entry = localize(found, Astro.currentLocale);
---
<Layout title={entry.data.title}>
  <h1>{entry.data.title}</h1>
</Layout>

prerender = false is what keeps the page live: it's rendered on request instead of at build time.

A list page

src/pages/blog/index.astro

---
export const prerender = false;
import { collectionQuery } from "@expirio/cms";

const query = await collectionQuery(Astro.locals.cms, "blog", Astro.url.searchParams, {
  perPage: 24,
  locale: Astro.currentLocale,
  orderBy: { field: "date", dir: "desc" },
});
---
{query.entries.map((entry) => <a href={`/blog/${entry.data.slug}`}>{entry.data.title}</a>)}

collectionQuery reads the filters, search, sort and page from the address and asks the database for just the items on that page. It also returns total, page and pages for the page links.

URL parameters

A Yes / no field takes 1, true or on and 0 or false. Only fields in the collection count: other parameters, like utm_source, and values that make no sense are ignored, never an error. Each filter takes up to 20 values and search uses up to 8 words.

What the generated list page has

The list page a new collection gets already uses these parameters, in a plain HTML form that works without JavaScript:

• a search field
• a menu for every Select field, with how many items have each value
• a checkbox for every Yes / no field
• from–to fields for a price, when the collection has a Number field called price, cost, rate or fee
• sorting by price both ways and by title A–Z
• page links, 24 items per page

A collection without Select, Yes / no or price fields, like a blog or a team, gets search and page links only. The texts on the page — Search, Filter, Clear, the page links — are in your site's language. The page stays a readable .astro file: change it on the canvas, with the agent, or in code.

Search engines

All filtered, sorted and searched versions of the list point search engines to the plain list as the one canonical address. The second and later pages are their own pages, linked to each other with rel="prev" and rel="next". The generated list page sets this up for you.