swiftvaporserver-side-swiftleaf

How to add a class to the body tag in a Leaf base template

I'm building a site with Vapor and using the Leaf templating engine. Say I have the following base template defined in Base.leaf:

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>#(title)</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    </head>
    <body>
        #import("content")

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    </body>
</html>

On some pages, I want a different background color, so I need to apply the bg-body-secondary bootstrap class to the body tag.

What is the recommended approach for applying different classes to the body tag for pages that extend the base template? Include any body classes in the context passed to render the page (<body class="#(bodyClasses)>)? Move the <body> out of the base into each page so classes can be added there? Something else I'm missing?

Thanks for any pointers!

Solution

  • The easiest way is to pass the class as a context value when you render the view.

    return req.view.render(“view”,[“class”: “class1”])

    Then in you leaf:

    <div class=“#(class)”>