django搭建一个个人博客（Python全栈开发日记）第五天：文章详情页面

1.文章页面搭建

{% extends 'index.html' %}
{% load my_tag %}
{% block title %}
<title>文章详情页</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="/static/editor-md/css/editormd.css">
    <link rel="stylesheet" href="/static/my/css/article.css">
{% endblock %}

{% block banner %}
    {% banner article_object %}
{% endblock %}

{% block content %}
 <div class="main">
        <div class="slide_or_actions show">
            <div class="slider_bar">
                <div class="title">
                    <span>关闭悬浮目录</span>
                    <el-switch
                            active-color="#13ce66"
                            inactive-color="#9e9e9e"></el-switch>
                </div>
                <div class="body">
                    <el-scrollbar id="el_scrollbar">
                        <p>标题一</p>
                        <p>标题2</p>
                    </el-scrollbar>
                </div>
            </div>
            <div class="article_actions">
                <div class="item" title="文章点赞">
                    <i class="fa fa-thumbs-up"></i>
                    <span>520</span>
                </div>
                <div class="item" title="文章收藏">
                    <i class="fa fa-star"></i>
                    <span>23</span>
                </div>
                <div class="item" title="回到顶部">
                    <i class="fa fa-angle-double-up"></i>
                </div>
            </div>
        </div>
        <div class="article">
            <div class="article_title">
                <h2>文章标题</h2>
                <p>
                    <span>发布时间：<i>2024-05-6</i></span>
                    <span>作者：<i>樱花树下小八</i></span>
                    <span>来源：<i>十一点必早睡</i></span>
                </p>
                <div>
                    <i title="文章标签" class="fa fa-tags"></i>
                    <i>python</i>
                    <i>django</i>
                    <i>博客</i>
                </div>
            </div>
            <div class="article_content" id="article_content">
                <textarea style="display:none;">{{ article_object.content }}</textarea>
            </div>

            <div class="comment_submit">
                <div class="title">
                    你觉得文章怎么样
                </div>
                <div class="body">
                <textarea rows="8"
                          class="add_comment"
                          placeholder="写下你想说的话，开始我们的对话 (支持markdown语法)"></textarea>
                    <button class="submit_comment">发布评论</button>
                </div>
                <div class="footer">
                    <p><span>104</span> 人参与，<span>45</span> 条评论</p>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block js %}
<script src="/static/editor-md/lib/marked.min.js"></script>
<script src="/static/editor-md/lib/prettify.min.js"></script>
<script src="/static/editor-md/editormd.min.js"></script>
<script type="text/javascript">

    $(function () {
        // 调用editormd.markdownToHTML的方法进行md格式的预览
        editormd.markdownToHTML("article_content", {
            width: "100%",
            height: "100%",
            path: "/static/editor-md/lib/",  // lib文件的路径，一定不要错了
        });
    });
</script>
{% endblock %}

2.文章页面css

main .main {
  position: relative;
  min-height: 500px;
  width: 1200px;
}

.slide_or_actions {
  width: 180px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s;

  .slider_bar {

    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: white;
    overflow: hidden;

    .title {
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        margin-right: 10px;
      }
    }

    .body {
      background-color: white;
      padding: 10px 20px 20px 20px;

      p {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        transition: all 0.3s;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;

        &:hover {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }

      p[tagname='H1'] {
      }

      p[tagname='H2'] {
        padding-left: 10px;
      }

      p[tagname='H3'] {
        padding-left: 15px;
      }

      p[tagname='H4'] {
        padding-left: 20px;
      }
    }
  }

  .article_actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .item {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: white;
      margin-bottom: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;

      i {
        font-size: 23px;
        cursor: pointer;
        color: #555;
      }

      i.show {
        color: #3a8ee6;
      }
    }
  }

}


.slide_or_actions.show {
  width: 250px;

  & ~ .article {
    width: calc(100% - 270px);
  }

  .title {
    border-bottom: 1px solid #f0eeee;
  }

}

.slide_or_actions.fixed {
  position: fixed;
  top: 80px;
}


.article {
  width: calc(100% - 200px);
  transition: width 0.3s;

  .article_title {
    background-color: white;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    h2 {
      margin: 10px 0;
    }

    p {
      font-size: 14px;
      color: #333333;

      span {
        margin-right: 10px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    > div {
      margin: 10px 0;

      i {
        font-size: 14px;
        margin-right: 5px;
        color: #3a8ee6;

        &:first-child {
          color: #333333;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .article_content {
    margin-top: 1px;
    border-radius: 0 0 5px 5px;
  }

  .comment_submit {
    margin-top: 20px;
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;

    .title {
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #f0eeee;
      position: relative;
      color: #333333;

      &::after {
        content: '';
        display: block;
        width: 8rem;
        height: 2px;
        background-color: #999999;
        position: absolute;
        bottom: -1px;
      }
    }

    .body {
      padding: 20px;
      position: relative;
      border-radius: 5px;
      box-shadow: inset 0 0 10px rgb(0 0 0 / 8%);

      textarea {
        resize: none;
        padding: 0;
        border: none;
        text-indent: 0;
      }

      button {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: #409eff;
        color: white;
        border: none;
        border-radius: 5px;
      }
    }


    .footer {
      margin-top: 10px;
      font-size: 14px;
      color: #555555;

      span {
        color: #ff9800;
      }
    }
  }

}

3.配置文章的路由以及视图函数

def article(request,nid):
    article_object=Articles.objects.filter(nid=nid).first()
    if not article_object:
        return redirect('/')
    return render(request,'article.html',locals())

from django.conf import settings  ##新增
from django.views.static import serve
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
    path('index/',views.index),
    path('login/',views.login),
    path('sign/',views.sign),
    path('get_random_code/',views.get_random_code),
    re_path(r'^api/',include('api.api_urls')),
    re_path(r'^article/(?P<nid>\d+)/',views.article),
]