Customizing Blog Post Layouts

How to change the design and structure of individual blog post pages.

Last updated:

Post page structure

Individual blog post pages are rendered from src/app/(marketing)/article/[slug]/page.tsx. This is where the post layout is defined: header, cover image, body, author bio, related posts.

Modify this file to rearrange sections, add new components (share buttons, Disqus comments, newsletter CTA), or change the column layout.

Article typography

Article body content (from Sanity's Portable Text) is rendered by a PortableText component in src/components/PortableTextRenderer.tsx(or similar). Customize the component map to change how headings, images, lists, and blockquotes are rendered.

Metadata display

The post header shows the author, publish date, category, and reading time. These are rendered from fields on the Sanity post document. Edit the header component in the post page file to add or hide metadata fields.

Tip

Reading time is calculated automatically from the article body word count. No manual entry needed.