Learn

Instead of having an HTML file for each recipe, it would be a lot easier having one file for many recipes. Being able to pass data to template files is how we can begin to accomplish this goal.

After the filename argument in render_template() we can add keyword arguments to be used as variables within the template. These variables are assigned values or app data we would like to access within the template.

flask_variable = "Text for my template" render_template("my_template.html", template_variable=flask_variable)

In this example we’re assigning the value of flask_variable to template_variable which can be used in my_template.html. To add more than one variable separate each assignment with a comma.

render_template("my_template.html", template_var1="A string!", template_var2=100)

Our template now has access to the variables template_var1 and template_var2 which hold a string and an integer respectively.

App data can be passed as literal values or the values stored inside variables. We can pass strings, integers, lists, dictionaries or any other objects to our templates.

It is possible to give keyword arguments and the assignment variables the same name var1=var1. For these exercises all variables from our flask app will start with flask and all template variables will start with template.

To access the variables in our templates we need to use the expression delimiter: {{ }}.

{{ template_variable }}

The delimiter can be used inline with text and alongside HTML elements.

<h1>My Heading: {{ template_variable }}</h1>

Certain operations can be performed inside expression delimiters {{ }}.

With template_variable = 20.

<p>Template number plus ten: {{ template_variable + 10 }}</p> OUTPUT Template number plus ten: 30

List and dictionary elements can be accessed individually inside the expression delimiters {{ }}.

With template_list = ["A", "B", "C"]

<p>Element at index 1: {{ template_list[1] }}</p> OUTPUT Element at index 1: B

Instructions

1.

We’ve replaced the fried_egg.html template with a new template, recipe.html. This starts the process of using one template for many web pages.

In recipe.html find the first delimiter {{ }} and note the variable name template_recipe. The string inside this variable will be used as the header for the page.

Go to app.py and add a keyword argument to the recipe route’s render_template() function. Assign the value of recipes[id] to template_recipe.

2.

Good job!!. Let’s add 2 more variable assignments to render_template().

  • Assign descriptions[id] to template_description.
  • Assign ingredients[id] to template_ingredients.
3.

Great!! Navigate to the recipe page in the web browser and you’ll see the description is now showing, but the ingredients list is still empty.

Go to recipe.html and populate the ingredients list using explicit indexes for template_ingredients. Add one element per <li> statement in the template. Be sure to start your index at 0 and list all three ingredients from the list.

Don’t forget to use the delimiters {{ }}.

Once you run the code you may start to see that even though there’s currently one recipe, recipe.html can be used to display multiple recipes.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?