Docs menu

Getting started

IntroductionInstallationProject structure

Building pages

RoutingPagesLayoutsStylingMarkdownContent and dataIslands

Going live

SEO and headDeployingForms

Guides

Build a brochure site

Advanced

Running as a server

Reference

Reference

Building pages

Layouts

The tag that wraps every page, and how to use others.

src/layouts/default.imba wraps every page. The page goes where the <slot> is:

export default tag Layout
	meta = {}
	path = '/'

	<self>
		<header>
			<a href='/'> "My site"
			<a href='/about' [fw:700]=(path == '/about')> "About"
		<main> <slot>
		<footer> "© {new Date!.getFullYear!}"

A layout receives:

  • meta: the page's final meta (title, description, any extra fields you add)
  • path: the current URL path, handy for highlighting the current link
  • params: the page's URL params

Other layouts

Every file in src/layouts/ is available by name:

  • Markdown pages pick one in their front matter: layout: prose uses src/layouts/prose.imba; layout: false uses none.
  • .imba pages export it: export const layout = ProseLayout (imported), or export const layout = null for no layout at all.

A layout can wrap another one, which is handy for a "long text" variant of the default:

# src/layouts/prose.imba
import Layout from './default'

export default tag ProseLayout
	meta = {}
	path = '/'

	<self>
		<Layout meta=meta path=path>
			<article>
				<h1> meta.heading or meta.title
				<slot>

The rest of the page

The layout is everything inside <body>. The <html> and <head> around it are written by imba-pages from the page's meta and src/site.imba; see SEO and head.