{"id":2233,"date":"2019-07-07T18:25:01","date_gmt":"2019-07-07T16:25:01","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=2233"},"modified":"2019-09-20T18:14:16","modified_gmt":"2019-09-20T16:14:16","slug":"flask-8-templates","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/flask-8-templates\/","title":{"rendered":"Flask 8 &#8211; Templates"},"content":{"rendered":"<p>This time we are gonna see how to use the same &#8216;style&#8217; for all the pages of our blog.<\/p>\n<h2>The template.html page, a base for all pages<\/h2>\n<pre class=\"lang:default decode:true \">&lt;html&gt;\r\n\r\n    &lt;style&gt;\r\n    \r\n    body {\r\n    margin-left: 10%;\r\n    margin-right: 10%;\r\n    font-size: 2em;\r\n    color: coral;\r\n    background-color: black;\r\n    }\r\n    h3 {\r\n        color: white;\r\n        background-color: coral;\r\n    }\r\n    &lt;\/style&gt;\r\n    &lt;body&gt;\r\n\r\n    {% block page %}\r\n    {% endblock %}\r\n\r\n\r\n\r\n&lt;\/body&gt;&lt;\/html&gt;<\/pre>\n<p>We added the {% block page %} and {% endblock %} to the base page, called template.html, so that the &#8216;decoration&#8217; of every page will be this page, while the content will be in each page of the site like in the following example of the homepage.html<\/p>\n<pre class=\"lang:default decode:true \">{% extends 'template.html' %}\r\n\r\n{% block page %}\r\n\r\n&lt;h1&gt;Welcome to our Homepage&lt;\/h1&gt;\r\n\r\n{% for post in posts %}\r\n    &lt;h3&gt; {{ post.title }}&lt;\/h3&gt;\r\n    &lt;p&gt;{{ post.body }}&lt;\/p&gt;\r\n\r\n    {% if author %}\r\n    &lt;span style=\"font-size:0.5em;color:yellowgreen\"&gt;{{ post.author }} &lt;\/span&gt;\r\n    {% endif %}\r\n    \r\n    {% if date %}\r\n    &lt;span style=\"font-size:0.5em;color:yellowgreen\"&gt;{{ post.date }}&lt;\/span&gt;\r\n    {% endif %}\r\n {% endfor %}\r\n\r\n{% endblock %}<\/pre>\n<p>Now, take a look at the video to have a better comprehension about how it works.<\/p>\n<p><iframe loading=\"lazy\" title=\"Fask 8 - a blog with Python - templates\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/zBIc0SgN8sI?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<script>\r\n\tif (typeof title != \"undefined\")\r\n\t{\r\n\t\tlet title = \"Flask\";\r\n\t\tlet links = []\r\n\t}\r\n\telse \r\n\t{\r\n\t\ttitle = \"Flask\";\r\n\t}\r\n\r\nlinks = [\r\n\t\t\t\/\/ -------------------20.9.2019 ---------------------------------\r\n[\"https:\/\/pythonprogramming.altervista.org\/how-to-render-html-into-flask-variables-passed-to-the-pages\/\",\r\n \"Render HTML in Flask\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-12-add-a-navigation-bar-to-the-blog\/\",\"Add a menu (11)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-flask-on-glitch-edited-with-visual-studio-code\/\",\"Visual Studio Code on Glitch (with flask)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-11-bootstrap\/\",\"Bootstrap with Flask(10)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/put-our-flask-blog-on-glitch-com-for-free\/\",\"Free blog with Flask and Glitch.me\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-9-use-css-in-the-template\/\",\"Css on Flask (9)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-8-templates\/\",\"Templates in Flask (8)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-7-the-if-condition\/\",\"The if condition - Flask 7\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-6-jinga2-and-code-into-html-pages\/\",\"jinga2 and code in Html page in Flask (6)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-and-flask-blog-part-5\/\",\"Python and flask 5\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/setting-up-flask-to-make-our-blog\/\",\"Setting up Flask 5\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-p-3-lets-make-the-first-web-pages\/\",\"Flask 1st web page 4\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/flask-2-use-visual-studio-code-in-the-environment\/\",\"Visual code and Flask 3\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/install-flask-in-a-brand-new-environment\/\",\"Flask in a new Python environment 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/on-the-web-with-python-and-flask-1\/\",\"Web with flask 1\"]\r\n];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"How to use templates in flask to make all the pages look alike.\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/flask-8-templates\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":2234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-2233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-examples"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=2233"}],"version-history":[{"count":4,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2233\/revisions"}],"predecessor-version":[{"id":3706,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/2233\/revisions\/3706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/2234"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=2233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=2233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=2233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}