You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: core/files-templates.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,15 +7,15 @@ title: Files & Templates
7
7
8
8
## Files
9
9
10
-
So you've seen how to send out some basic text with a simple flask application, and the languages that are used to build the web: HTML, CSS and Javascript. Serving text isn't enough though - what if we want to serve some actual files?
10
+
So you've seen how to send out some basic text with a simple Flask application, and the languages that are used to build the web: HTML, CSS and Javascript. Serving text isn't enough though - what if we want to serve some actual files?
11
11
12
-
Luckily, Flask comes prepared. All you have to do is **create a folder** in the same directory as `hello.py` with the special name of `static`. Any file you put in that folder will be served by flask automatically!
12
+
Luckily, Flask comes prepared. All you have to do is **create a folder** in the same directory as `hello.py` with the special name of `static`. Any file you put in that folder will be served by Flask automatically! It's one of the nice functionalities provided to you by Flask's authors.
13
13
14
14
You can do this with your computer's file browser, or on the command line by typing `mkdir static`.
15
15
16
16
So, if you made a file in the static folder called `cats.gif`, and you'd normally access your application by visiting the url [http://127.0.0.1:5000](http://127.0.0.1:5000), then you can view that file by going to [http://127.0.0.1:5000/static/cats.gif](http://127.0.0.1:5000/static/cats.gif).
17
17
18
-
**Check this works** for you by downloading a funny image from the internet (there are plenty at [imgur](http://imgur.com)), putting it in the static folder, running your flask application (`python hello.py`), and browsing to your image by the right url.
18
+
**Check this works** for you by downloading a funny image from the internet (there are plenty at [imgur](http://imgur.com)), putting it in the static folder, running your Flask application (`python hello.py`), and browsing to your image by the right url.
19
19
20
20
The `static` folder is a great place to put CSS stylesheets, Javascript script files, and images. Those files don't usually change much when a website is running, hence the folder name. A common practice is that web developers will organise these files in sub-directories called, for instance, `css`, `js`, and `img` respectively.
21
21
@@ -42,9 +42,9 @@ In it, **create a file** called `index.html` and chuck some in some HTML -
42
42
43
43
{% endraw %}
44
44
45
-
This is a pretty simple HTML page, but it includes two simple bits of Flask's templating language. When Flask shows this template to your browser, it will replace `{{ author }}` and `{{ name }}` with what you assign those two variables in your application. If author was assigned to be "Bob", then the title of the page served will be "Bob's app".
45
+
This is a pretty simple HTML page, but it includes two simple bits of Flask's templating language. When Flask shows this template to your browser, it will replace {% raw %}`{{ author }}` and `{{ name }}`{% endraw %} with what you assign those two variables in your application. If author was assigned to be "Bob", then the title of the page served will be "Bob's app".
46
46
47
-
In this way a template separates what the content of the page should be, from the actual actual `data` that will be used as that content. This makes things a lot easier if you have to write a lot of dynamic web pages!
47
+
In this way a template separates what the content of the page should be, from the actual actual _data_ that will be used as that content. This makes things a whole lot easier if you have to write a lot of dynamic web pages!
48
48
49
49
Flask's templates can do a good deal more than just display variables, but we can get to that in good time.
50
50
@@ -53,8 +53,8 @@ Let's **modify our flask app** to serve this template:
@@ -64,15 +64,15 @@ Let's **modify our flask app** to serve this template:
64
64
65
65
You can see we imported a new function from `flask`, called `render_template`.
66
66
67
-
Then in `hello()`, we added two variables called `author` and `name`. **Please change their values** from `"Me"` and `"You"` in your file, those are boring!
67
+
Then in `hello_world()`, we added two variables called `author` and `name`. **Please change their values** from `"Me"` and `"You"` in your file, those are boring!
68
68
69
-
Then instead of returning some text, we returned the result of calling `render_template`. First, we give it the file name of the template we wish to return. Then, we pass in the variable names that the template should know about (`author` and `name`) and what their values should be (...coincidentally, `author` and `name`!).
69
+
Then instead of returning some text, we returned the result of calling `render_template`. First, we give it the file name of the template we wish to process. Then, we pass in the variable names that the template should know about (`author` and `name`) and what their values should be (...coincidentally, `author` and `name`!). This function should load up the template, do the proocessing required to replace placeholders with values, and return the full HTML text.
70
70
71
71
Now try running and viewing your app, in all its HTML glory!
72
72
73
73
## A prettier home page
74
74
75
-
Now that we have a bit more confidence in changing the home page let's look at making something a bit prettier. We want the home page of _Cats Everywhere_ to be fun and exciting. Something that says "Yes, these people know what they are doing. I will give them my email address in hope of seeing more of their work in future."
75
+
Now that we have a bit more confidence in changing the home page we can look at making something a bit prettier. We want the home page of _Cats Everywhere_ to be fun and exciting. Something that says "Yes, these people know what they are doing. I will give them my email address in hope of seeing more of their work in future."
76
76
77
77
This means fancy fonts, large bold type, huge banner images and nice round corners and things. We are going to need some more interesting HTML and a fair bit of CSS to get it looking pretty.
0 commit comments