Step 2
Let's explore the views of this application.
Open the views
folder and notice there are three files in there:
base.njk
index.njk
dashboard.njk
We will explore these one by one!
base.njk
This template file contains the boilerplate HTML which is the basis of every HTML file that our app will render.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouNote</title>
{% block css %}
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<!-- Our Style -->
<link rel="stylesheet" href="style.css">
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
Notice the use of Nunjucks Blocks.
A block defines a section on the template and identifies it with a name.
Blocks are used by Template Inheritance.
Further notice the stylesheets imported here; we are using a minimalist CSS framework called Milligram.
index.njk
This template file contains the homepage view which will be rendered when a user visits the YouNote web app. The template basically contains a form with a field for user to add their username.
{% extends "base.njk" %}
{% block body %}
<div class="container">
<div class="row">
<div class="column column-50">
<h1>YouNote</h1>
<form action="/dashboard">
<label for="uname">username:</label>
<input type="text" id="username" name="uname"><br><br>
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
{% endblock %}
Notice the use of Nunjucks extends to specify template inheritance. The specified template is used as a base template.
The block body
overrides the content of the block body
declared in the base.njk
template.
dashboard.njk
The "dashboard" view is rendered when the user logs in. The dashboard contains
- A welcome message.
- A text area to write notes.
- A section where user's notes are displayed.
{% extends "base.njk" %}
{% block body %}
<div class="container">
<div class="row">
<div class="column column-50">
<h1>Welcome {{ nickname }}!</h1>
<form action="/note">
<textarea name="content">Write your note here.</textarea>
<input type="submit" value="Save!">
</form>
<h2>Your Notes</h2>
{% for note in notes %}
<div class="note">{{ note.content }}</div>
{% else %}
<p>You don't have any notes yet!</p>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
Notice the use of Nunjucks for loop that allows iterating over arrays and dictionaries. It appears the template expects us to inject an array notes
which contains the user's notes.