From Nunjucks to Astro Component Syntax
Template Variables
Nunjucks
{{ title }}Astro
{title}Conditional Rendering (if/else)
Nunjucks
{% if url == '/' %}
<h1>Home</h1>
{% else %}
<h1>Not Home</h1>
{% endif %}Astro
{url === '/' && (<h1>Home</h1>)}
{url !== '/' && (<h1>Not Home</h1>)}Loops
Nunjucks
{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}Astro
{posts.map(post => (
<h2>{post.title}</h2>
))}Raw HTML
Sometimes you need to render HTML from an external source, like a CMS. In Nunjucks, you can use the safe filter to render raw HTML.
Nunjucks
<div>{{ post.content | safe }}</div>Astro
<div set:html={post.content} />Template Partials / Components
Nunjucks
{% include "partials/example.njk" %}Astro
---
import Example from '@components/Example.astro';
---
<Example />