{"id":8472,"date":"2020-09-14T16:08:35","date_gmt":"2020-09-14T16:08:35","guid":{"rendered":"https:\/\/www.askpython.com\/?p=8472"},"modified":"2021-06-24T01:09:10","modified_gmt":"2021-06-24T01:09:10","slug":"flask-templates","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/flask\/flask-templates","title":{"rendered":"Flask Templates – Set up Templates in Python Flask"},"content":{"rendered":"\n

Hey Guys!! Welcome to another tutorial of our Flask series. In this article, we will learn about Templates in the Flask web framework<\/a> and how to use them. So let\u2019s get started!<\/p>\n\n\n\n

What are templates?<\/strong><\/h2>\n\n\n\n

Templates are the HTML, CSS, JS files that are used to display content on the website. Templates beautify the web pages and make them presentable. <\/p>\n\n\n\n

Hence all the websites comprise of Front-end (consisting of Templates) and Back-end(Flask framework codes and applications)<\/p>\n\n\n\n

Web Templating System<\/h2>\n\n\n\n

A web templating system comprises a template engine, data source, and a template processor.<\/p>\n\n\n\n

In many cases, the website also displays data from the DB on their webpages. Web Templating Systems do this. It combines the data from the file\/DB and the HTML (using Template languages) and then displays it on the webpage.<\/p>\n\n\n\n

The exact working of a web template system is as follows:<\/strong><\/p>\n\n\n\n

  1. Extracts required data from DB<\/li>
  2. Combine the Data into the HTML file(using the template language) with the template engine<\/li>
  3. Template Processor then processes it and outputs the resulting template file<\/li><\/ol>\n\n\n\n

    Flask uses Jinja2<\/strong> as its default templating engine<\/strong>. We will look at it further in the next section.<\/p>\n\n\n\n

    Jinga Templating Language (JTL)<\/strong><\/h2>\n\n\n\n

    The template engine provides a template language with which we can add data into the HTML files. <\/p>\n\n\n\n

    Jinja2 is a modern and designer-friendly templating language for python, modeled after Django\u2019s Templates.<\/p>\n\n\n\n

    We will now see the syntax of this template language. It consists of 4 types:<\/p>\n\n\n\n

    Types<\/th>Syntax<\/th><\/tr><\/thead>
    1) Statement Tags<\/strong><\/td>{% %}:<\/strong> {% if…..else %} – {% endif %}<\/td><\/tr>
    2) Variable Tags<\/strong><\/td>{{ }}:<\/strong> {{ variable }}<\/td><\/tr>
    3) Commenting Tags<\/strong><\/td>{#…..#}:<\/strong> {# comment ….para #}<\/td><\/tr>
    4)Line Comment Tags<\/strong><\/td>#:<\/strong> #comment line<\/td><\/tr><\/tbody><\/table>
    Jinja2 Templating Language<\/figcaption><\/figure>\n\n\n\n

    Adding Templates in our application<\/strong><\/h2>\n\n\n\n

    Flask searches for templates stored in a folder named – templates<\/strong> located beside the main application file. So create the folder before we move on to the next section.<\/p>\n\n\n\n

    \"Templates
    Templates Folder<\/figcaption><\/figure><\/div>\n\n\n\n
    \"Image
    Contents of the templates folder<\/figcaption><\/figure><\/div>\n\n\n\n

    1. Render_template()<\/strong> function<\/h3>\n\n\n\n

    Flask application renders templates using the function render_template()<\/p>\n\n\n\n

    The syntax is:<\/p>\n\n\n

    \nrender_template('<template_file_name.html>', variables = <values> )\n<\/pre><\/div>\n\n\n
    2. Coding our Flask app<\/strong><\/h3>\n\n\n\n
    Add the code into your file flask main file (see introduction to flask<\/a>)<\/p>\n\n\n
    \nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('\/blogs\/<int:id>')\ndef blogs(id):\n    return render_template('blog.html', number=id)\n\napp.run(host='localhost', port=5000)\n<\/pre><\/div>\n\n\n
    Create the template blog.html<\/strong>:<\/p>\n\n\n
    \n<html>\n    <body>\n        <h1>This is a Blog Webpage<\/h1>\n        <h2>Blog {{number}}<\/h1>\n        <h3>Test Blog<\/h1>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Notice<\/strong> how we used the variable tag of jinja2 language.<\/p>\n\n\n\n
    3. Running the Flask application<\/strong><\/h3>\n\n\n\n
    Run the server and hit the URL<\/p>\n\n\n\n
    \"Blog
    Blog 2<\/figcaption><\/figure><\/div>\n\n\n\n
    Voila!<\/p>\n\n\n\n
    Conclusion<\/strong><\/h2>\n\n\n\n
    That\u2019s it, guys, for this article! This was all about Flask Templates. Try doing the above examples on your own for a better understanding. Till then, Happy coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Hey Guys!! Welcome to another tutorial of our Flask series. In this article, we will learn about Templates in the Flask web framework and how to use them. So let\u2019s get started! What are templates? Templates are the HTML, CSS, JS files that are used to display content on the website. Templates beautify the web […]<\/p>\n","protected":false},"author":13,"featured_media":8478,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-8472","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flask"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/8472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/comments?post=8472"}],"version-history":[{"count":0,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/8472\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media\/8478"}],"wp:attachment":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media?parent=8472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/categories?post=8472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/tags?post=8472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}