Coding Journal

In this post I'm still writing about html files in Django. 

Plan:

1. Adding links between Home and About pages 

2. Creating detail_page.html and _comments.html 

 

1. Adding links between Home and About pages 

 

In the second part of this tutorial, I created the first views and urls to show the views online. 

Now I want to use those urls to create easy navigation on the page. 

So far I have 2 pages: Home (blog/index.html) and About (blog/about.html) and I want to have active links in the navbar, in the footer and in the sidebar. 

My blog/urls.py file looks like:

The most important part for us at the moment is the name of each path. Using this name we can easily create an active link to a homepage or about page. Instead of writing full website address we can use the Jinja tag with word url inside and the name of the view/path in question marks. 

In partials/_navbar.html I commented out most of the nav code and now I have only two li objects. 

So I’m adding the link in href in such a way:

partials/_navbar.html (I’m showing not the whole file but only the part with links)

I’m doing the same in the partials/_footer.html file

 

In sidebar I'm creating  short about me section where I'm adding  the link to the About page like this:

Now, I can check if the links work and if I can move from one page to another clicking the words Home and About. 

As we can see, even if we click ABOUT in the navbar and the about page is displayed, we still have the HOME link highlighted. 

 

It is because our link to Home page in navbar has got “current” class. 

How can we have a current link highlighted?

I will add if-else clauses using jinja tags. 

First, in partials/_navbar.html, let’s find the li with class="current" and write:

These lines of code say that if the main page is in request path, the class current is used and then the HOME link will be highlighted. 

Then I’m adding some code to the About link 

It says that if about is in our web address, now this li element has class current and ABOUT will be highlighted. Reload the page and check:

Important: when we use if statements in Jinja we have to close each statement using {% endif %} tag.

 

2. Creating individual post template and comments template. 

 

It is not possible to finish all the templates before starting creating models but I want to write only a bit about using KeepItSimple theme in individual posts and comments. 

First, I’m creating a new html file in templates/blog folder:

touch templates/blog/post_detail.html 

I’m writing here:

I’m not going to create any urls or views now. So we won’t be able to access this page on our development server. We can only check how it looks like (but without CSS) copying the full path to this file in our folder and pasting this address into the browser. 

Now I’m opening KeepItSimple folder and single.html file in this folder and copying code that starts with <div id="main" class="eight columns"> - in Content part 

until 

closing </div> just above the Sidebar part. 

I’m pasting it between {% block content %} and {% endblock %} tags. 

Now I’m creating a new html file in partials folder:

touch templates/partials/_add_comment.html 

First, I’m adding here Jinja tags:

And between the {% block content %} and {% endblock %} I’m pasting the form part from blog/post_detail.html 

When I’m working on a Post model and a post_detail view I will change a lot of this blog/post_detail.html file. For the time being I leave it as it is. Check how the code of this page looks like HERE

You  can find all the code from this part on Github in branch called thirdTem