In this tutorial, we will learn how to implement categories and breadcrumb in a Django site. Categories may be related to each other as child-parent, so categories are hierarchical data and to store and access them efficiently mptt i.e modified preorder tree traversal should be used in which the number of database queries made is minimum. There are some referral links provided at the end of the article to understand how CRUD operations are applied on hierarchical data efficiently.
And add mptt in INSTALLED_APPS in settings.py
Jump into the code
We will be implementing categories and breadcrumb for a blog website. So consider following models for my_posts app in Django project.
And category model be :
Now run migration commands to create database tables. To show categories in admin panel add following to project_name/my_posts/admin.py
Now run the following command to collect static files from mptt, provided that you’ve already defined STATIC_ROOT in settings.py
Doing these steps, you can now add some nested categories by selecting categories > ADD CATEGORY of my_posts app in Django Admin panel, there is an image below to illustrate how to create a category object.
After adding some categories, we have following category tree
If you want to change the indentation pixels i.e the space before each category object so that the relation between them can be determined easily, add the following line of code in settings.py
The category tree showed above is not collapsable and expandable, you can tweak this by changing my_posts/admin.py as
Now go to posts > ADD POST then you will find category drop-down to associate a category to that post, this field is not a required field so you may leave it untouched.
Next, we have to add URL pattern for the category, so go to urls.py and add the following line to the urlpatterns list.
Now in views.py add the following function.
Add following code in categories.html.
The CSS framework used is Zurb’s Foundation 6 you may use bootstrap as well.
Next, add following code snippet inside the postDetail.html template to implement breadcrumbs in post detail page ( you should add it above post’s title ).
Note that filter get_name is used to extract the name of categories from the slug.
To implement this filter create a directory templatetags at the same level as models.py, views.py, etc in my_post app and create a empty python file init.py to ensure the directory is treated as a Python package and create another python file namify.py, add following code in it.
Finally, we have following post detail page for recently created post
The breadcrumb above the title of the post is useful in navigation, for example, if you click web scrapping then it will take you to the catogories.html page where you can navigate posts in web scrapping as well as its sub categories as in the following image.
Modified Preorder Tree Traversal is not just limited to categories but can also be used for efficiently accessing and storing hierarchical data. Although insert and move operations are not as efficient if the tree is changing frequently. However, overall mptt is currently the best solution for database queries overhead. If you have any problem in any step discussed above, you can check our Github Repository from here.
Happy Coding :)
comments powered by Disqus