Askama - include

If there template snippets we would like to use in more than one page, we can move those snippets to a separate template file and then include that file in some of the templates. I personally like to separate such templates - that are supposed to be included - in a subfolder called incl. That’s what we did in this example.

1. We moved the form to a separate file.
2. We included the incl/echo_form.html in both the main page and the echo.html file.
3. We update the tests to verify that the form appears on both pages.

$ tree
.
├── Cargo.lock
├── Cargo.toml
├── src
│   ├── main.rs
│   └── tests.rs
└── templates
    ├── echo.html
    ├── incl
    │   └── echo_form.html
    └── main.html

[package]
name = "askama-templates"
version = "0.1.0"
edition = "2024"
publish = false

[dependencies]
askama = "0.15.6"
axum = "0.8.8"
serde = { version = "1.0.228", features = ["derive"] }
tokio = { version = "1.50.0", features = ["full"] }

[dev-dependencies]
headers = "0.4.1"
http-body-util = "0.1.3"
tower = { version = "0.5.3", features = ["util"] }

use askama::Template;
use axum::{
    Router,
    extract::Query,
    http::StatusCode,
    response::{Html, IntoResponse, Response},
    routing::get,
};
use serde::Deserialize;

struct HtmlTemplate<T>(T);

impl<T> IntoResponse for HtmlTemplate<T>
where
    T: Template,
{
    fn into_response(self) -> Response {
        match self.0.render() {
            Ok(html) => Html(html).into_response(),
            Err(err) => (
                StatusCode::INTERNAL_SERVER_ERROR,
                format!("Failed to render template. Error: {err}"),
            )
                .into_response(),
        }
    }
}

#[derive(Template)]
#[template(path = "main.html")]
struct MainTemplate {}

#[derive(Template)]
#[template(path = "echo.html")]
struct EchoTemplate {
    text: String,
}

#[derive(Debug, Deserialize)]
#[allow(dead_code)]
struct Params {
    text: String,
}

async fn main_page() -> impl IntoResponse {
    let template = MainTemplate {};
    HtmlTemplate(template)
}

async fn echo(Query(params): Query<Params>) -> impl IntoResponse {
    let template = EchoTemplate { text: params.text };
    HtmlTemplate(template)
}

fn create_router() -> Router {
    Router::new()
        .route("/", get(main_page))
        .route("/echo", get(echo))
}
#[tokio::main]
async fn main() {
    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000")
        .await
        .unwrap();
    println!("listening on {}", listener.local_addr().unwrap());
    axum::serve(listener, create_router()).await.unwrap();
}

#[cfg(test)]
mod tests;

#![allow(unused)]
fn main() {
use super::*;
use axum::{
    body::Body,
    http::{Request, StatusCode},
};
use http_body_util::BodyExt;
use tower::ServiceExt;

#[tokio::test]
async fn test_main() {
    let response = create_router()
        .oneshot(Request::builder().uri("/").body(Body::empty()).unwrap())
        .await
        .unwrap();
    assert_eq!(response.status(), StatusCode::OK);

    let content_type = response.headers().get("content-type").unwrap();
    assert_eq!(content_type.to_str().unwrap(), "text/html; charset=utf-8");

    let body = response.into_body();
    let bytes = body.collect().await.unwrap().to_bytes();
    let html = String::from_utf8(bytes.to_vec()).unwrap();

    assert!(html.contains(r#"<form method="get" action="/echo">"#));
}

#[tokio::test]
async fn test_echo_with_text() {
    let response = create_router()
        .oneshot(
            Request::builder()
                .uri("/echo?text=Hello%20World")
                .body(Body::empty())
                .unwrap(),
        )
        .await
        .unwrap();
    assert_eq!(response.status(), StatusCode::OK);

    let content_type = response.headers().get("content-type").unwrap();
    assert_eq!(content_type.to_str().unwrap(), "text/html; charset=utf-8");

    let body = response.into_body();
    let bytes = body.collect().await.unwrap().to_bytes();
    let html = String::from_utf8(bytes.to_vec()).unwrap();

    assert!(html.contains(r#"<form method="get" action="/echo">"#));
    assert!(html.contains("You wrote: <b>Hello World</b>"));
}
}

<h1>Echo</h1>

{% include "incl/echo_form.html" %}

{% include "incl/echo_form.html" %}

You wrote: <b>{{ text }}</b>

<form method="get" action="/echo">
    <input type="text" name="text" />
    <input type="submit" value="Echo" />
</form>