前言

本章主要讲述 【关于我】 页面的具体实现，以及之前咱们遗留的 【文章详情页上一篇/下一篇跳转bug的解决】

• ps：那【关于我】界面的话，就很简单，都是写死的数据，只需要配下路由，自己简单将前端文案改一下就行了
  这里我主要讲下【上一篇/下一篇】bug解决思路

---

环境：

• Pycharm
• python3.6
• mysql 5.7
• django 2.0.13

---

---

一、新功能项目概览

---

---

二、上一篇/下一篇bug解决

1、article/views.py

• 直接在原来的文章详情视图函数中添加逻辑，我在代码里面写了注释，大家可以详细看下注释里标的【第3点】

from django.shortcuts import render

# Create your views here.
from article.models import Article

"""
    文章相关视图函数
"""


def article_detail(request):
    """
    通过id查看文章详情
    :param request:
    :return:
    """
    # 拿到当前文章id
    article_id = request.GET.get('id')
    # print("当前文章id类型：", type(article_id))
    # 根据id拿到当前文章
    current_article = Article.objects.get(pk=article_id)

    # 1、浏览量同步新增：点击一次，浏览量同步加1
    current_article.click_num += 1
    current_article.save()

    # 2、查询相关文章：即对应标签里的前6条数据
    tags_list = current_article.tags.all()  # 首先拿到标签列表
    # 定义【相关文章】list
    about_article_list = []
    for tag in tags_list:
        # 遍历拿到该文章对应标签里的文章列表
        for about_article in tag.article_set.all():
            # 文章不存在list里且少于6篇，则放到list中
            if about_article not in about_article_list and len(about_article_list) < 6:
                about_article_list.append(about_article)
    # print("about_article_list:", about_article_list)

    # 3、拿到上一篇/下一篇文章对象
    all_article = Article.objects.all()  # 拿到所有文章
    print("all_article:", all_article)
    previous_index = 0
    next_index = 0
    previous_article = None
    next_article = None
    # enumerate将其组成一个索引序列，利用它可以同时获得索引和值
    for index, article in enumerate(all_article):
        # 当index为0，即当前文章为第一篇，第一篇文章没有上一篇，默认索引为0，下一篇则为index+1
        if index == 0:
            previous_index = 0
            next_index = index + 1
        # 当index为总长度-1时，即当前文章为最后一篇，上一篇为index-1，下一篇为当前文章
        elif index == len(all_article) - 1:
            previous_index = index - 1
            next_index = index
        # 否则，当index有上一篇/下一篇时，上一篇为index-1，下一篇为index+1
        else:
            previous_index = index - 1
            next_index = index + 1

        print("再次打印当前文章id：", article_id)
        # 如果遍历的id等于当前文章详情的id,这里踩了个坑，这个article_id原本的类型为str，需要转为int，不然会报错
        if int(article_id) == article.id:
            previous_article = all_article[previous_index]
            next_article = all_article[next_index]

    return render(request, 'article/info.html',
                  context={'current_article': current_article, 'about_article_list': about_article_list,
                           'previous_article': previous_article, 'next_article': next_article})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

---

2、templates/article/info.html

• 页面取值稍微改下即可

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}
    博客详情
{% endblock %}

{# css样式部分 #}
{% block mycss %}
    {# 引进样式info.css ，m.css   #}
    <link href="{% static 'css/info.css' %}" rel="stylesheet">
    <link href="{% static 'css/m.css' %}" rel="stylesheet">
{% endblock %}

{# 内容部分 #}
{% block content %}
    <div class="infos">
        <div class="newsview">
            {#  内嵌title  #}
            <h2 class="intitle">您现在的位置是：<a href="{% url 'index' %}">网站首页</a> > <a
                    href="{% url 'article:detail' %}?id={{ current_article.id }}">文章详情</a></h2>
            <h3 class="news_title">{{ current_article.title }}</h3>
            {#  作者  #}
            <div class="news_author">
                <span class="au01">{{ current_article.user.username }}</span>
                <span class="au02">{{ current_article.date }}</span>
                <span class="au03">共<b>{{ current_article.click_num }}</b>人围观</span>
            </div>
            {#  标签  #}
            <div class="tags">
                {#  遍历拿到文章所有的标签  #}
                {% for tag in current_article.tags.all %}
                    <a href="/">{{ tag.name }}</a>
                {% endfor %}
            </div>
            {#  简介  #}
            <div class="news_about">
                <strong style="font-size: large; font-weight: bold">简介：</strong>{{ current_article.description }}
            </div>
            {#  文章详情  #}
            <div class="news_infos">
                {#  注意，如果xadmin后台文章内容里面添加的p标签，那内容引用这里要加上safe进行过滤，否则就会把p标签直接显示在页面上#}
                {{ current_article.content |safe }}
                <p>
                </p>
            </div>
        </div>
    </div>

    {# 上一篇/下一篇 #}
    <div class="nextinfo">
        {#    之前我们是直接前端传参+1，-1，bug已修复 #}
        <p>上一篇：<a href="{% url 'article:detail' %}?id={{ previous_article.id }}">{{ previous_article.title }}</a>
        </p>
        <p>下一篇：<a href="{% url 'article:detail' %}?id={{ next_article.id }}">{{ next_article.title }}</a></p>
    </div>

    {# 相关文章 #}
    <div class="otherlink">
        <h2>相关文章</h2>
        <ul class="otherlink_ul">
            {% for about_article in about_article_list %}
                <li><a href="{% url 'article:detail' %}?id={{ about_article.id }}">{{ about_article.title }}</a></li>
            {% endfor %}
        </ul>
    </div>
    {# 文章评论 #}
    {#    <div class="news_pl">#}
    {#        <h2>文章评论</h2>#}
    {#        文章评论1#}
    {#        文章评论2#}
    {#    </div>#}
{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

---

---

三、关于我界面实现

• 因为关于我和用户是有关的，我就将代码统一写在user应用中了

1、urls.py

# 关于我
path('about', about_me, name='about'),
1
2

---

2、views.py

def about_me(request):
    """
    返回【关于我】页面
    :param request:
    :return:
    """
    return render(request, 'user/about.html')
1
2
3
4
5
6
7

---

3、templates/user/about.html

• user下新增一个about.html

{% extends 'base.html' %}
{% load staticfiles %}

{#  title部分 #}
{% block title %}
    Mikasa个人博客 - 一个热爱敲代码的女程序媛的个人博客网站
{% endblock %}

{# css样式部分 #}
{% block mycss %}
    <link href="{% static 'css/base.css' %}" rel="stylesheet">
    <link href="{% static 'css/about.css' %}" rel="stylesheet">
{% endblock %}

{# 内容部分 #}
{% block content %}
    <div class="container">
        <div class="banner">
            <p data-scroll-reveal="enter top over 2s">对某些事我不再有耐性，不是因为我变得骄傲</p>
            <p data-scroll-reveal="enter left over 2s after 1s">只是我的生命到了一个阶段，我不想再浪费时间在一些让我感到不开心的事情上</p>
            <p data-scroll-reveal="enter bottom over 2s after 2s">我不愿去取悦不喜欢我的人，我的爱只自私的留给我爱的人和爱我的人</p>
        </div>
        <div class="memorial_day">
            <div class="time_axis"></div>
            <ul>
                <li class="n1"><a href="/">C++入门</a>
                    <div class="dateview">2018</div>
                </li>
                <li class="n2"><a href="/">自学Java</a>
                    <div class="dateview">2019-2020</div>
                </li>
                <li class="n3"><a href="/">转战测试</a>
                    <div class="dateview">2020-2021</div>
                </li>
                <li class="n4"><a href="/">转战自动化</a>
                    <div class="dateview">2021-至今</div>
                </li>
                <li class="n5"><a href="/">技术博主一枚</a>
                    <div class="dateview">2022</div>
                </li>
            </ul>
        </div>
        <div class="about left">
            <h2>Just about me</h2>
            <ul>
                <p>
                    Mikasa，女，简单记录分享
                </p>
            </ul>
            <h2>About my blog</h2>
            <p>CSDN博客：<a href="https://blog.csdn.net/Makasa" target="_blank" class="blog_link">https://blog.csdn.net/Makasa</a>
            </p>
        </div>
    </div>
    </aside>
{% endblock %}

{# js #}
{% block myjs %}

{% endblock %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61