🔗 Django Add Link to Details – Navigate to Detail Views from a List (2025)

🧲 Introduction – What Does “Add Link to Details” Mean?

In Django, when displaying a list of items (like blog posts or products), you often want each item to link to its detail page. This is achieved by generating dynamic links in the template using the url template tag and primary keys or slugs.

🎯 In this guide, you’ll learn:

• How to set up a detail view and URL
• How to link from a list page to a detail page
• How to use dynamic data to generate links in templates

---

🧱 Step 1: Create a Detail View

views.py

from django.shortcuts import render, get_object_or_404
from .models import Post

def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/post_detail.html', {'post': post})

---

🌐 Step 2: Add a Detail URL

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('post/<int:pk>/', views.post_detail, name='post-detail'),
]

---

🧪 Step 3: Display Links on the List Page

Assuming you have a view called post_list that passes a queryset of posts:

views.py

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'blog/post_list.html', {'posts': posts})

templates/blog/post_list.html

<h1>All Posts</h1>
<ul>
  {% for post in posts %}
    <li>
      <a href="{% url 'post-detail' post.pk %}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

✅ Clicking on the post title will take you to http://localhost:8000/post/1/ (or whichever ID is used).

---

🖼️ Step 4: Create the Detail Template

templates/blog/post_detail.html

<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
<p><small>Published on {{ post.published|date:"F j, Y" }}</small></p>
<a href="{% url 'post-list' %}">← Back to All Posts</a>

(Optional) Add a named URL for the list page to make the back link work.

---

✅ Best Practices

• Always use get_object_or_404() in detail views
• Use named URLs for maintainability (name='post-detail')
• Avoid hardcoding links—use {% url 'route-name' var %} syntax
• Add slugs for more SEO-friendly links (e.g., /post/django-tutorial/)

---

📌 Summary – Recap & Next Steps

🔍 Key Takeaways:

• Use Django’s url template tag to generate dynamic links
• Link each item from a list to its corresponding detail view
• Create a clean and intuitive navigation flow between list and detail pages

⚙️ Real-World Relevance:
This technique is fundamental for building blogs, news feeds, product listings, portfolios, and any multi-page web app.

---

❓ Frequently Asked Questions (FAQ)

❓ How do I link each list item to its detail page?

✅ Use:

<a href="{% url 'post-detail' post.pk %}">{{ post.title }}</a>

---

❓ Can I use a slug instead of ID in the URL?

✅ Yes. Update your URL path to <slug:slug> and use Post.objects.get(slug=slug).

---

❓ What if a post ID doesn’t exist?

✅ Use get_object_or_404() to handle missing data gracefully.

---

❓ Can I style the links like buttons?

✅ Yes. Add CSS classes to the <a> tag:

<a href="{% url 'post-detail' post.pk %}" class="btn">Read More</a>

---

❓ How do I go back from detail to the list?

✅ Add a back link using the reverse URL for your list view:

<a href="{% url 'post-list' %}">← Back</a>

---

Share Now :