{# ============================================================================= index.html — Homepage Layout ============================================================================= This template renders when the user visits /. It extends layout/base.html and provides: 1. A hero section with a full-width background image, title/description sourced from content/index.md frontmatter, and two CTAs. 2. A feature-grid section where the body of content/index.md is injected via {{ content | safe }}. The Markdown file for the homepage contains HTML cards rendered inside Jinja2 blocks. Template Variables (provided by Moosey automatically): {{ title }} – from frontmatter "title" or derived from URL slug {{ description }} – from frontmatter "description" {{ content }} – rendered HTML from the Markdown body (use | safe) {{ site_data }} – the dict passed to init_cms() Waterfall Resolution: URL: / Markdown: content/index.md Template: templates/index.html (exact match for "index.html") Extends: layouts/base.html ============================================================================= #} {% extends "layout/base.html" %} {% block content %} {# ================================================================== HERO SECTION ================================================================== A full-width hero with: - Background image (from Unsplash, overlaid with opacity) - Page title ({{ title }} – pulled from content/index.md frontmatter) - Description ({{ description }} – also from frontmatter) - Two call-to-action buttons The hero uses a dark overlay (opacity-20 on the image + bg-slate-900) to ensure text remains readable regardless of the background image. ================================================================== #}
{# Semi-transparent background image #} Background
{# {{ title }} is automatically populated from the frontmatter "title" field in content/index.md. #}

{{ title }}

{# {{ description }} comes from the frontmatter "description" field. If not set, it falls back to an empty string. #}

{{ description }}

{# -- Call-to-action buttons -- #}
Read the Blog Learn more
{# ================================================================== FEATURES / CONTENT SECTION ================================================================== The {{ content | safe }} variable contains the rendered HTML from content/index.md. In this example, content/index.md contains a grid of feature cards written in HTML (wrapped inside the Markdown file). Moosey first renders any Jinja2 expressions in the Markdown, then converts the Markdown/HTML to final output. Why use | safe? Moosey renders the Markdown to HTML, which includes legitimate HTML tags. Without | safe, Jinja2 would auto-escape the HTML, displaying the raw tags to the user. ================================================================== #}

Deploy Faster

Everything you need to blog

{# The Markdown file (content/index.md) contains feature cards as raw HTML. Because we render with {{ content | safe }}, those HTML elements are output directly. Security note: content is sandbox-rendered by Moosey's Jinja2 SandboxedEnvironment, so it cannot contain dangerous code even though we use | safe here. #}
{{ content | safe }}
{% endblock %}