How to create a simple blog using Django 3 - part 7

/ #Django


In this part of the Django blog series we'll create the category pages and insert the categories in the sidebar.

Creating the category view

Open up "blog/views.py" in your editor and add the following content underneath the other views.

def category(request, category_slug):
  category = Category.objects.get(slug=category_slug)

  context = {
    'category': category
  }

  return render(request, 'blog/templates/category.html', context)

That's everything we need in the views section. We created a new view called "category". We get the category from the database based on the slug.

The category template

The data is ready, but we need a way to present it. Create a new file called "category.html" inside "blog/templates/". This is the file we referred to in the category view.

Add the following content to the template:

{% extends 'base.html' %}

{% block content %}
	<div class="container splitter">
		<div class="blog-list">
			

{{ category.title }}

{% for post in category.posts.all %} <article class="post"> <a href="{% url 'post_detail' post.slug %}"> <h2 class="subtitle">{{ post.title }}</h2> <p class="info"> <time datetime="{{ post.created_at|date:"y-m-d" }}">My name / {{ post.created_at|date:"M d, y" }} </p> <p class="description"> {{ post.intro }} </p> </a> <a href="{% url 'post_detail' post.slug %}" class="readmore">Read more</a> </article> {% endfor %} </div> <aside class="splitter-aside"> <div class="categories"> <h4>Categories</h4> </div> </aside> </div> {% endblock %}

As you can see, this is almost identical to the front page of our blog. Similar templates like this should be merged in a way to prevent code repetition (we will come back to this later).

The urls

It's time to add the view to our url pattern. Open up "myblog/urls.py" in your editor. We need to import the view we created:

# Import
from django.conf.urls import url
from django.contrib import admin

from blog.views import frontpage, post_detail, category

# Url patterns

urlpatterns = [
  path('admin/', admin.site.urls),
  
  path('', frontpage, name='frontpage'),
  path('categories/<str:category_slug/', category, name='category'),
  path('<str:post_slug/', post_detail, name='post_detail'),
]

I've imported the "category" view and added it to the urlpatterns.

If you open the blog in your browser and go to http://127.0.0.1:8000/categories/the-category-you-created/, you should see a list of blog posts in that exact category.

The category list in the sidebar

We want a way to go to the categories. Open up "blog/views.py" in your editor and make these changes:

def category(request, category_slug):
  category = Category.objects.get(slug=category_slug)
  categories = Category.objects.all()

  context = {
    'category': category,
    'categories': categories
  }

  return render(request, 'blog/templates/category.html', context)

These two lines (categories = Category.objects.all() and 'categories': categories) needs to be copied and pasted in the two other views as well. This is because we need the categories for the sidebar.

Open up all of the templates we've created so far and change the sidebar code.

Old sidebar

<aside class="splitter-aside">
	<div class="categories">
		<h4>Categories</h4>
	</div>
</aside>

New sidebar

<aside class="splitter-aside">
	<div class="categories">
		<h4>Categories</h4>

		<ul>
			{% for category in categories %}
				<li><a href="{% url 'category' category.slug %}" title="{{ category.title }}">{{ category.title }}</a></li>
			{% endfor %}
		</ul>
	</div>
</aside>

If you do this to all the sidebars, you can go back to your blog and refresh. A list of categories should be listed and you're able to click them :-)

Summary

In this part we created all we needed for the category views. The blog still looks like shit, but we'll fix this in the next part!

How to create a simple blog using Django 3 series

Part 1 - Installation
Part 2 - File structure
Part 3 - Database models
Part 4 - Admin interface
Part 5 - Creating some templates
Part 6 - Views and URLs
Part 7 - Category views
Part 8 - Media files
Part 9 - Comments
Part 10 - Search


Comments

No comments yet...

Add comment

Subscribe to my newsletter