Reference: Django build personal blog: Write article details page

Once you have a list of articles page, you also need a details page.

Writing view functions

Open article/views.py and add the view function article_detail() to the article details page:

def article_detail(request,id) :
    # fetch the corresponding article
    article = ArticlePost.objects.get(pk=id)

    The object to pass to the template
    context = {'article':article}

    Load the template and return the context object
    return render(request,'article/detail.html',context)
Copy the code

·article_detail(request, id is added to the id function. Note that when we write model, we dont write a field called ID, which is the Primary Key (PK) Django automatically generates for indexing tables. It’s the only way to know which article to pull out. Articlepost.objects.get (id=id) getarticlePost.objects.get (id=id) getarticlepost.objects.get (id=id)

Then write article/urls.py and configure the routing address:

article/urls.py

...

urlpatterns = [
	...
	
    # Article details
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),]Copy the code
  • This part of the URL is “captured” with Angle brackets and sent to the view function as a keyword argument.
  • Of the above string:idSection defines the variable names that will be used to distinguish matching patterns, whileint:A converter determines what type of variable should match the URL path of this section.
  • Like the one up here<int:id>Capture this part of the URL and capture the data as a viewarticle_detail(request,id)In theidParameters are passed.

Write a template

Create a new detail.html file in templates/article/ and write the following code:

templates/article/detail.html

<! -- extends indicates that the page extends from the base.html file -->
{% extends 'base.html' %} {% load static %}

<! Add the title defined in base.html -->{% endblock title %}<! -- Write the content defined in base.html -->
{% block content %}

<! -->
<div class = "container">
    <div class = "row">
        <! -- Title and author -->
        <h1 class = "col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class = "col-12 alert alert-success">Author: {{article. The author}}</div>
        <! -- Text -->
        <div class = "col-12"><p> {{article.body}} </p></div>
    </div>
</div>
{% endblock content %}
Copy the code

Use {{article. XXX}} to retrieve the title, author, and body of the article.

After running development server, type http://127.0.0.1:8000/article/article-detail/1/: in your browser

Optimizing web entry

Rewrite header. HTML so that users can return to the home page via the article link on the right side of the navigation bar:

templates/header.html

...
<div>
    <ul class="navbar-nav">
        <li class="nav-item">
        
            <! Href --> 
            <a class="nav-link" href="{% url 'article:article_list' %}">The article</a>
          
        </li>
    </ul>
</div>.Copy the code

Remove hard-coded urls from templates

  • hrefDefines the address to jump to
  • {% url '...' %}Django-specified syntax for specifying an address.
  • About it'article:article_list'Explanation:
    • In front ofarticleIt is in the project root directoryurls.pyNamespace defined in.
    • At the back of thearticle_listIs in theappIn theurls.pyA specific routing address defined in

Then rewrite list.html so that the user can click the Read article button to access the details of the article:

templates/article/list.html

...

<div class="card-footer">

    <! Href -->
    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">Read this article</a>
    
</div>.Copy the code

How is id passed in the article

  • inlist.htmlthroughhref="{% url 'article:article_detail' article.id %}"That will beidPassed to thearticle/urls.py
  • inarticle/urls.pythrough<int:id>Pass it to the view functionarticle_detail()
  • In the view functionarticle_detail(), through the parameteridGot the articleidValue, and finally locate the article object to retrieve.

You can now access different pages on your site through links instead of having to manually enter urls.