文章详情页的制作
路由地址
这里由于正则匹配路径，所以在站点页面地址re_path('^(?P
#文章详情页
re_path('^(?P<username>\w+)/article/(?P<article_id>\d+)$', views.article_detail),
# 个人站点页面
re_path('^(?P<username>\w+)/', views.site),
html页面
由于文章详情页是在站点首页的基础上只改变部分区域的内容，所以这里需要用到模板层继承的知识
先建一个base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BBS</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
{% block css %}
{% endblock %}
</head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ blog.site_title }}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">新闻 <span class="sr-only">(current)</span></a></li>
<li><a href="#">博问</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他选择 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">专区</a></li>
<li><a href="#">闪存</a></li>
<li><a href="#">班级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">怀旧</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">发现</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="学习BBS">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li><a href="#">{{ request.session.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">其他功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">查看信息</a></li>
<li><a href="#">设置</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
{% endif %}
</ul>
<!-- Large modal -->
{#<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>#}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<h1 class="text-center">修改密码</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="username">username:</label>
<input type="text" id="username" class="form-control" disabled
value="{{ request.session.username }}">
</div>
<div class="form-group">
<label for="password">New password:</label>
<input type="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="re_password">Confirm Password:</label>
<input type="password" id="re_password" class="form-control">
</div>
<div class="form-group">
<label for="old_password">Original password:</label>
<input type="password" id="old_password" class="form-control">
</div>
{# <input type="button" class="btn btn-success btn-block" value="提交">#}
<botton class="btn btn-warning btn-block">提交</botton>
<br>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">文章分类</div>
<div class="panel-body">
{% for cate in cate_list %}
<p>
<a href="/{{ username }}/category/{{ cate.2 }}">{{ cate.0 }}({{ cate.1 }})</a>
</p>
{% endfor %}
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">文章标签</h3>
</div>
<div class="panel-body">
{% for tag in tag_list %}
<p>
<a href="/{{ username }}/tag/{{ tag.2 }}">{{ tag.0 }}({{ tag.1 }})</a>
</p>
{% endfor %}
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">文章时间</h3>
</div>
<div class="panel-body">
{% for date in date_list %}
<p>
<a href="/{{ username}}/archive/{{date.month|date:'Y-m' }}">{{ date.month|date:'Y-m' }}({{ date.c }})</a>
</p>
{% endfor %}
</div>
</div>
</div>
{% block content %}
{% endblock %}
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
个人站点页面site.html
{% extends 'base.html' %}
{% block content %}
<div class="col-md-9">
<ul class="media-list">
{% for article in article_list %}
<li class="media">
<h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
<div class="media-left">
<a href="">
<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." style=" width: 70px;">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<br>
{#posted @ 2020-05-06 09:05 武沛齐 阅读(13888) 评论(50) 推荐(37) 编辑#}
<div class="pull-right">
{# xiezhr 2023-05-10 08:04 1 0 121 #}
<span>posted @</span>
<span><a href="">{{ article.blog.userinfo.username }}</a></span>
<span><a href="">{{ article.create_time|date:'Y-m-d' }}</a></span>
<span><a href="">08:04</a></span>
<span><span class="glyphicon glyphicon-thumbs-up"></span>({{ article.up_num }})</span>
<span><span class="glyphicon glyphicon-thumbs-down"></span>({{ article.down_num }})</span>
<span><span class="glyphicon glyphicon-comment"></span>({{ article.comment_num }})</span>
<span><a href="">编辑</a></span>
</div>
</li>
{% endfor %}
<hr>
</ul>
</div>
{% endblock %}
文章详细页面 article.html
{% extends 'base.html' %}
{% block content %}
<h1 class="article_title">{{ article_detail.title }}</h1>
<div class="article_content">
{{ article_detail.content }}
</div>
{% endblock %}
文章标题链接
<a href="/{{ username }}/article/{{ article.pk }}">
视图函数
def article_detail(request, username,article_id):
# 先根据用户名查询用户信息
user_obj = models.UserInfo.objects.filter(username=username).first()
if not user_obj:
return render(request, '404.html')
# 根据文章id查询文章数据
article_detail = models.Article.objects.filter(pk=article_id).first()
# 读取当前文章的所有评论
comment_list = models.Comment.objects.filter(article_id=article_id).all()
return render(request, 'article_detail.html', locals())
如何拷贝文章到自己的数据库进行数据测试
首先还是来到admin
去博客园搬运几篇文章
别忘记safe过滤一下
