In this lesson you will learn how to add more pages to your flask website.
We will quickly add an About page.
For that, you need to create an
about.html file inside the
templates folder. The HTML code would be as follows:
<!DOCTYPE html> <html> <body> <h1>About me</h1> <p>This is a portfolio site about anything that can be put in a portfolio.</p> </body> </html>
Second, you need to render the HTML with Python by adding a second function to the
hello.py Python script.
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('home.html') @app.route('/about/') def about(): return render_template('about.html') if __name__ == '__main__': app.run(debug=True)
Run the Python script and go to
localhost:5000/about and you will see the new page.
That’s it! You could add more pages by adding more Python functions to your script.
One last thing we could improve before we close this lesson would be to wrap our heading and paragraph tags inside div tags. That will keep them grouped inside the same section in the HTML document so that we can later apply CSS styling to that section. Here is how the updated
about.html would look like:
<!DOCTYPE html> <html> <body> <div class="about"> <h1>About me</h1> <p>This is a portfolio site about anything that can be put in a portfolio.</p> </div> </body> </html>
Please do the same for the
home.html document as well.
<!DOCTYPE html> <html> <body> <div class="home"> <h1>About me</h1> <p>This website was built with Python via the Flask framework.</p> </div> </body> </html>
Running the Python script should output the same results as before when opening the two URLs.
Cool, but there is something missing that you have probably started to notice and that is the website navigation menu.
Let’s add one in the next lecture.