Blog Layout
A clean and minimal blog layout with a header and title block.
The BlogLayout provides a clean and minimal layout for blog posts.
It looks like this:
Tip: Toggle the theme on this page to see the light / dark mode variant of this layout.
The example above is achieved using the following content and code:
---
title: "Building blogs with Jaspr"
keywords: ["jaspr", "blog"]
author: "Kilian Schulte"
date: "26 April 2025"
readTime: "5 min"
authorImage: https://avatars.githubusercontent.com/u/13920539?s=96&v=4
tags: ["Dart", "Jaspr", "Blog"]
---
<DropCap />
Building blogs with `jaspr_content` offers a modern and efficient approach to creating dynamic and interactive websites. [...]
<PostBreak />
Getting started with `jaspr_content` is straightforward. You can write your blog posts in Markdown and render them using Dart components. [...]
ContentApp(
parsers: [
MarkdownParser(),
],
components: [
DropCap(),
PostBreak(),
],
layouts: [
BlogLayout(
header: Header(
title: 'Jaspr Blog',
logo: 'https://raw.githubusercontent.com/schultek/jaspr/refs/heads/main/assets/logo.png',
items: [
ThemeToggle(),
GithubButton(repo: 'schultek/jaspr'),
],
),
),
]
)
Usage
The BlogLayout takes the following parameters:
headerComponent?The header component to render on the page, usually a Header.
Title Block
In addition to the header, it renders a title block based on the page data (i.e. frontmatter data).
It uses the title, author, date, readTime and authorImage values as shown above.
Tags
Below the content, the layout shows an optional tags list based on the tags value from the page data.
Meta
The layout also adds appropriate meta tags to the <head> of the page, like title, description, keywords and more. For more info, read the Page Layouts docs.