CODEWITHSUNDEEP
swiftvaporserver-side-swiftleaf
Jake Strickler
Jake Strickler

Reputation: 374

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/[email protected]/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/[email protected]/font/bootstrap-icons.css">
    </head>
    <body>
        #import("content")

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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!

Upvotes: 1

Views: 80

Answers (1)

Nick
Nick

Reputation: 5200

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)”>

Upvotes: 1

Related Questions