This is the sixth day of my participation in the First Challenge 2022

The second article in this series: Power Users in Django and creating your own app turns out to be easy!

In the third article of this series: Perfecting Djangos MVT framework development, remember to add routes

Add blog details page view to display blog details

In the last section, we successfully displayed the list of blogs in the blog page. In this section, we will realize the display of blog details page. Of course, the blog page is very simple now.

First we need to add a new view, ArticleDetailView. We can open blog/views.py and add the following code:

class ArticleDetailView(DetailView) :
    model = Article
    template_name = 'article_detial.html'
Copy the code

The ArticleDetailView class inherits from DetailView so that we can easily operate on individual articles.

Once the view is added, we create a new article_detial. HTML file in templates to display the contents of the article details page.

<title>My cousin's blog</title>
<h1>{{article.title}}</h1>
<span>Author: {{article. The author}}</span>
<hr/>
<blockquote style="margin:0 0 24px; background:#eef0f4; border-left:8px solid #dddfe4;">
    {{article.summary}}
</blockquote>
<div>
    <p>{{article.content}}</p>
</div>
Copy the code

< SPAN > phrase display tag, < HR /> separator line, < blockQuote > block reference tag, mainly used for reference style creation. And set the style(label style, where you set the background color and left margin width and color), in addition

Block-level elements that are used for content separation.

To set this up, we need to configure the route, open blog/urls.py, and add a sentence

from django.urls import path
from blog import views

urlpatterns = [
    The first parameter is the route address
    The second argument is the view function, which can be called directly from views with as_view
    The third parameter: route name
    path(' ', views.HomeView.as_view(), name='home'),
    # 
       
         pk indicates the number of articles, system's own primary key
       
    path('article/<int:pk>', views.ArticleDetailView.as_view(), name='detial'),]Copy the code

Now that the routing is configured, there’s one more thing we need to do. We need to add text links to the list of articles so that clicking on the articles will take you to the templates/home.html page

<title>My cousin's blog</title>
<h1>Blog list</h1>

<ul>
{% for article in object_list %}
    <li>
        <a href="{% url 'detial' article.pk %}">{{article.title}} - {{article.author}}</a></br>
        {{article.summary}}
    </li>
{% endfor %}
</ul>
Copy the code

The main changes are to add an A tag to the title author, set a hyperlink, and route to a route address named detial via Django template parsing, with a value of article.pk, or article ID.

All set up we can run the program to see the effect ~Feeling ok, next, let’s optimize the page ~

Bootstrap front-end framework was introduced to optimize the page

In this section, we will introduce the front-end framework Bootstrap to help us beautify the front-end display page. Using the framework directly can also improve our development efficiency and spend more time on business logic rather than front-end style writing.

Bootstrap configuration and getting started are described in detail on the official website.

Official website: getBootstrap.com/

Domestic tutorial website: www.bootcss.com/

English is not very good recommend see domestic first tutorial site, basically the same, a little English foundation I recommend watching foreign website, exercise their English reading ability unceasingly, not can also directly Google translation, can be in both Chinese and English tutorial to see, in short in can improve English reading ability under the premise of how comfortable how to come.

Go to the official website and click Get Started to start the tutorial

After getting started, we can take a quick look at how to introduce CSS, JS, or individual plug-ins.

Down, you can find the Starter Template, which already contains the CSS, JS loading and HTML basic framework mentioned above.

We’ll just copy the template code, create a new base.html file in templates, paste the bootstrap starter template into the file, and base.html will be the base page for all of our pages.

Generally speaking, the head and bottom of a blog website are basically unchanged. The head is usually the navigation bar of a website, which can be connected to any place on the website, while the bottom is usually the statement of the website, some explanatory information, friendship links, etc., as shown in the screenshot below:

So we also made some simple adjustments to the basic template. First, we set the title and body content in the template so that other pages can be customized. Very simple, we added the following:

{% block block_name %} (here we can also set some defaults) {% endBlock %}Copy the code

} {% eatends ‘base. HTML ‘%} {% eatends ‘base

<! doctypehtml>
<html lang="en">

<head>
  <! -- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <! -- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <! -- Notice the block tag added to the title content, so we can customize the title in the child page -->
  <title>
    {% block title %}

    {% endblock %}
  </title>
</head>

<body>
  <! -- Notice the block tag added to the body content, so that we can customize the body content in the child page -->
  {% block content %}

  {% endblock %}

  <! -- Optional JavaScript; choose one of the two! -->

  <! -- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <! -- Option 2: Separate Popper and Bootstrap JS -->
  <! -- < script SRC = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> -->
</body>

</html>
Copy the code

In case you’re wrong, I’m going to post two other pages as well, starting with home.html:

{% extends 'base.html' %} {% block title %} {% block content %}<h1>Blog list</h1>

<ul>
{% for article in object_list %}
    <li>
        <a href="{% url 'detial' article.pk %}">{{article.title}} - {{article.author}}</a></br>
        {{article.summary}}
    </li>
{% endfor %}
</ul>
{% endblock %}
Copy the code

Article_detail.html:

{% extends 'base.html' %} {% block title %} -{{article. Title}} {% endBlock %} {% block Content %}<h1>{{article.title}}</h1>
<span>Author: {{article. The author}}</span>
<hr/>
<blockquote style="margin:0 0 24px; background:#eef0f4; border-left:8px solid #dddfe4;">
    {{article.summary}}
</blockquote>
<div>
    <p>{{article.content}}</p>
</div>
{% endblock %}
Copy the code

The {% extends ‘base.html’ %} submodule must be on the first line and must be the first tag in the submodule.

After all the above modifications are completed, we can test run the project and the results are as follows:

You may notice that there seems to be no change from the previous one. It doesn’t matter. By changing the title of the article details page and reporting no errors, we know that the configuration is successful.

Next, we will apply more Bootstrap modules and plug-ins and beautify the page.

First, let’s add a navigation bar, which we’ll open on the official websiteComponents/Navbar“, we can see the navigation bar related introduction and case, at the beginning of the introduction to give us a relatively complete navigation bar example code, we directly copy and paste into base.html.

If you don’t know where to paste it, don’t worry, you can just go to any blog site and hold DOWN F12 to review the element and see what its navigation bar is under, usually under the Body tag, so we’ll put it under the body tag as well.After saving the code, we will refresh the page and find an extra navigation bar ~Let’s modify the style and content of the navigation bar. The final result is as follows:The code for the navigation bar is shown below:

<! -- Add navigation bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">
        <img src="https://files.mdnice.com/user/16444/ed3007c0-ae8d-43a9-aa25-e17c81bdef87.jpeg" alt="" width="24" height="24">My cousin's blog</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home page</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Python</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Go</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">The program life</a>
          </li>
          
          <li class="nav-item">
            <a class="nav-link disabled">Develop ing</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
Copy the code

Like to see the message forwarding, four support, the original is not easy. Ok, see you next time, I love the cat love technology, more love si si’s old cousin Da Mian ଘ(˙꒳˙)ଓ Di Di