Hello, everyone. This is the latest edition of Learning Python. What can YOU do? Django tutorials from scratch to finally successfully deploy live projects. In this section, we’re going to optimize the program we wrote.

Peekpa.com official address: Peekpa.com

PI ye each article, are configured with the corresponding code. The code Tag for this article is Post_021

In the last few videos, we basically developed all the functions of the website, and in this video, we need to

  • Page optimization for Dashboards;
  • Develop article list page;
  • The top navigation bar has other functions.

Dashboard optimization

Currently, our Dashboard looks like this:

The list on the left is too long, we need to fold it up, and when we click on each page, the TAB on the left doesn’t turn blue. Those are the two features we’re working on.

Functional bit folding

By folding, we mean we have Category, Tag, Post, and ExchangeLink. We can fold it into four items, and then we have sub-menus underneath each item. This feature is actually implemented in the AdminLTE example:

Let’s implement the following on our side. CMS /base/sidebar. HTML code to edit it again, we think Post example:

<li class="nav-item has-treeview">
    <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{% url 'cms:post_publish_view' %}" class="nav-link">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>
Copy the code

At the moment, our page looks like this:

Next, we add “active” to each item. Click on the page and its corresponding TAB is highlighted. Again, we use “Post” as an example:

{% url 'cms:post_manage_view' as post_manage_view %}
{% url 'cms:post_publish_view' as post_publish_view %}
<li class="nav-item has-treeview {% if request.path == post_manage_view or request.path == post_publish_view %}menu-open{% endif %}">
    <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view or request.path == post_publish_view %}active{% endif %}">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view %}active{% endif %}">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ post_publish_view }}" class="nav-link {% if request.path == post_publish_view %}active{% endif %}">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>
Copy the code

Why do you do that? Because after Django1.3, our urls can be dynamically bound. We bind the post_manage_view variable to CMS :post_manage_view, and then use the if tag in the class where we want to add active.

Dynamic binding is fully implemented.

This is the perfect way to display the blue label.

Article list page

Next, we have a front page, and an article details page, but we’re missing an article list page. So we took advantage of what we had already done to quickly develop an article detail page.

Using the development logic of the refactoring front page, our article list page looks a bit like the article list at the bottom left of the front page. So, we create a list. HTML file in the template/post/ directory to write our list page.

This page also inherits the base/index_base.html page, just like any other page. Then we can move the home page layout directly to here:

{% extends 'base/index_base.html' %}
{% load post_filters %}

{% block title %}
Peekpa Post List
{% endblock %}

{% block head %}

{% endblock %}

{% block main %}
<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-8">
            
            <! -- Article list -->
            <div class="row mt-3">
                <ul class="col-sm-12 d-block">
                    {% for post in list_post %}
                        <! -- -- -- > article
                        <li class="row mb-3" style="height: 180px; background-color: white">
                            <div class="col-sm-4 p-3 h-100">
                                <a href="{% url 'post:detail' time_id=post.time_id %}" class="w-100 h-100">
                                    <img src="{{ post.thumbnail }}" class="w-100 h-100">
                                    <div class="position-absolute mt-3"
                                         style="top:0; Background - color: rgba (32120255,0.5)">
                                        <p class="small m-1 text-light">{{ post.category.name }}</p>
                                    </div>
                                </a>
                            </div>
                            <div class="col-sm-8 d-flex flex-column">
                                <p class="h5 mt-3 border-bottom mb-0 pb-2">
                                    <a href="{% url 'post:detail' time_id=post.time_id %}" class="text-decoration-none text-dark">{{ post.title }}
                                    </a>
                                </p>
                                <p class="small mt-2" style="font-size: 95%;">{{ post.description }}</p>
                                <div class="d-flex flex-row justify-content-between mt-auto">
                                    <p class="font-weight-light small pl-1 mb-3">{{ post.author.username }}</p>
                                    <p class="font-weight-light small pr-1 mb-3">Read ({{post.read_num}})</p>
                                    <p class="font-weight-light small pr-1 mb-3">{{ post.publish_time_show | time_since }}</p>
                                </div>
                            </div>
                        </li>
                    {% endfor %}

                </ul>
            </div>

        </div>

        {% include 'base/right_section.html' %}

    </div>
</div>
{% endblock %}

Copy the code

Copy the index.html, then delete the code, and the entire page creation process is less than 30 seconds, super fast.

Now that the page is created, we need to write the view function. The view function is also very simple. It just reads all the data and passes it to the page.

def post_list_view(request):
    list_post = Post.objects.all()
    context = {
        'list_post': list_post
    }
    context.update(get_read_most_post())
    context.update(get_exchange_link())
    return render(request, 'post/list.html', context=context)
Copy the code

Then configure it in the urls.py file:

urlpatterns = [
    path("list/", views.post_list_view, name="post_list"),]Copy the code

Finished, we directly enter http://localhost:8000/list/ in the browser and then look at the article list:

It’s perfect, and every post supports a jump.

This page was developed in less than 2 minutes. This is the programmer’s thinking, as long as the structure is good, the future extension is very easy.

Top navigation bar optimized

Finally, the top navigation bar is optimized. We have seen in the navigation bar at the top of file templates is/base/navbar. HTML, there are two kinds of thoughts to optimize:

  1. Write the A tag directly in the navebar.html file. Just like:< li class = "nav - item Mr - 4" > < a class = "nav - link" href = "#" > home page < / a > < / li >The same;
  2. Create a tag model in the background, back-end management tools, and then the front-end request is exactly the same as before the friend chain. Just stuff the data into a variable and pass the variable to the front end.

Both types of development have their own advantages:

  1. The first development benefit is that it’s very fast, you can write to death, you just need to modify the HTML file; Disadvantages: inflexible, inflexible, inconvenient dynamic maintenance;
  2. The second kind of development benefits, of course, is convenient and flexible; On the downside, you have to develop a lot of code.

Here, specific how to achieve, I will not do too much explanation, we can refer to my source code, because this piece of things, whether it is to write dead or write live, the previous chapter has a very detailed description (write live method directly refer to friends chain development chapter).

So, our page ended up like this (note the active highlight at the top), the home page:

List of articles:

Technical summary

So just to conclude,

Dashboard page optimization:

  1. The Dashboard page optimization is mainly based on the AdminLTE official example;
  2. The difficulty is that after clicking TAB item, the item is highlighted;
  3. Use the URL tag and if tag in Django’s DLT template to maintain the URL in a variable. Then determine if the path matches the URL. If so, add active to the class.
  4. To complete.

Article List page:

  1. Observation, and the home page structure;
  2. So just make a copy of index.html and remove the article at the top left;
  3. Since the logic is the same as the home page, all we need to do is copy the home page view function and also remove the top article;
  4. To complete.

Implementation of NavBar:

  1. Method one, write dead;
  2. Method two, write background management program, front-end request interface, equivalent to write live;
  3. There’s a better way, of course, to write the front end dead and the back end alive, which is the most flexible, and we’ll talk about that next time;
  4. To complete.

The only way to get the code: follow “PI Ye Lu code” and reply “code” to get it.

Long press the two-dimensional code below to pay attention to, if the article is inspiring to you, welcome to look at and forward.