Django+admin Django博客 --- 分页标签分
1.数据字段定义
models.py
数据库数据字段 往admin后台管理进行添加数据
由于标签tag和分类category与文章是多对多的字段
所以定义tag类和category类 manaytomanyfield 多对多字段
admin.py
往管理员页面注册字段 一对一/一对多/多对多/外键字段
如下：
vierw.py进行函数编写跳转页面
article.py
静态页面文档结构
base.html 基本模板 公用模板 load static 实现加载静态页面和数据内容
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>我的个人网站</title>
<!--static\bootstrap-custom\css\custom-boostrap.css D:\DjangoBlog\my_blog\static\bootstrap-custom\css\custom-boostrap.css-->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-custom/css/custom-boostrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-custom/css/blog.css' %}" />
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">响应式导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{% url 'index' %}" class="navbar-brand">我的小屋</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li role="presentation" class="active"><a href="{% url 'index' %}">首页</a></li>
<li role="presentation"><a href="{% url 'contact' %}">联系</a></li>
<li role="presentation"><a href="{% url 'about' %}">关于我</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" method='GET' action='/article/search/'>
{% csrf_token %}
<div class="form-group">
<input name='keyword' type="text" class="form-control" placeholder="请输入文章标题或者作者名称">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</nav>
</div>
</header>
<div id="body" class="container">
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
<footer>
<div class="container">
<hr>
<p class="text-center">Copyright © Powered by Bruce</p>
</div>
</footer>
</body>
<script src="{% static 'bootstrap-custom/js/jquery-3.5.1.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>
aside.html侧边栏 实现复用
<div class="col-md-4">
<!-- RSS订阅，最新文章（5），分类，标签云，最新评论 -->
<div class="well text-center">
<p class="lead">不想错过好文章，赶紧订阅吧</p>
<button type="button" class="btn btn-primary btn-lg">订阅我的博客</button>
</div>
<!--最新文章 -->
<div class="panel panel-primary" id="mypanel">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新文章</h4>
</div>
<!-- List group -->
<ul class="list-group">
{% for article in lasted_articles %}
<li class="list-group-item"><a href="">{{ article.title }}</a></li>
{% endfor %}
</ul>
</div>
<!-- 分类目录 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>分类目录</h4>
</div>
<!-- List group -->
<ul class="list-group">
{% for categorize in category %}
<li class="list-group-item"><a href="">{{ categorize.name }}</a></li>
{% endfor %}
</ul>
</div>
<!-- 标签云 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>标签云</h4>
</div>
<!-- List group -->
<div class="panel-body">
<ul class="list-inline">
{% for tag in tags %}
<li><a href="" class="label {% cycle 'label-default' 'label-primary' 'label-success' 'label-info' 'label-danger' %}">{{ tag.name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<!-- 最新评论 -->
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">
<h4>最新评论</h4>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item"><a href="">1. 最新文章8月27日</a></li>
<li class="list-group-item"><a href="">2. 最新文章8月26日</a></li>
<li class="list-group-item"><a href="">3. 最新文章8月25日</a></li>
<li class="list-group-item"><a href="">4. 最新文章8月24日</a></li>
<li class="list-group-item"><a href="">5. 最新文章8月23日</a></li>
</ul>
</div>
</div>
index.html 主页模板 继承公共模板
{% extends 'common/base.html' %}
往页面中添加动态内容
{% block content %} content {% endblock %}
页面嵌套 {% include 'common/aside.html' %}
<!---继承自common中的基本模板 实现模板复用-->
{% extends 'common/base.html' %}
<!--往父类模板中添加内容-->
{% block content %}
<div class="col-md-8">
<h1>最新发布</h1>
<!-- 标题，标签，分类，留言总数，发布时间 -->
{% for article in articles %}
<article>
<h2><a href="{% url 'detail' article.id %}">{{ article.title }}</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span>
{% for categorize in article.category.all %}
<a href="">{{ categorize }}</a>
{% endfor%}
<span class="glyphicon glyphicon-tags"></span>
{% for tags in article.tag.all %}
<a href="">{{ tags }}</a>
{% endfor %}
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a href="">200条评论</a>
<span class="glyphicon glyphicon-time"></span> <a href="">{{ article.modified_at }}</a>
<span class='glyphicon glyphicon-eye-open'></span> {{ article.visited }}
</div>
</div>
<hr>
<img src="http://placekitten.com/900/300" class="img-responsive">
<br />
<p class="lead">{{ article.abstract }}</p>
<p>
{{ article.content | truncatechars:200 }}
</p>
<p class="text-right"><a href="{% url 'detail' article.id %}">阅读全文...</a></p>
<hr>
</article>
{% endfor %}
<!-- 分页 -->
<ul class="pager">
{% if articles.has_previous %}
<li class="previous">
<a href="?page={{ articles.previous_page_number }}"><span aria-hidden="true">←</span> 上一页</a>
</li>
{% endif %}
{% for current_page in articles.paginator.page_range %}
<li> <a href='?page={{ current_page }}'>{{ current_page }}</a></li>
{% endfor %}
<li> <a href="?page={{ articles.number }}">{{ articles.number }}</a></li>
{% if articles.has_next %}
<li class="next">
<a href="?page={{ articles.next_page_number }}">下一页 <span aria-hidden="true">→</span></a>
</li>
{% endif %}
</ul>
</div>
<!--模板套用 侧边栏复用-->
{% include 'common/aside.html' %}
{% endblock %}
single_article.py 详情页面
{% extends 'common/base.html' %}
{% block content %}
<div class="col-md-8">
<h1>最新发布</h1>
<!-- 标题，标签，分类，留言总数，发布时间 -->
<article>
<h2><a href="#">{{ article.title }}</a></h2>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-folder-open"></span>
{% for category in article.category.all %}
<a href="">{{ category }}</a>
{% endfor %}
<span class="glyphicon glyphicon-tags"></span>
{% for tag in article.tag.all %}
<a href="">{{ tag }}</a>
{% endfor %}
</div>
<div class="col-md-6 col-sm-6">
<span class="glyphicon glyphicon-comment"></span> <a href="">200条评论</a>
<span class="glyphicon glyphicon-time"></span> <a href="">{{ article.created_at }}</a>
</div>
</div>
<hr >
<img src="http://placekitten.com/900/300" class="img-responsive">
<br />
<p class="lead">{{ article.abstract }}</p>
<p>
{{article.content }}
</p>
<ul class="pager">
<li class="previous"><a href="{% url 'index' %}"> 返回主页</a></li>
</ul>
<div class="well">
<h4>评论区</h4>
<form class="clearfix">
<div class="form-group col-md-6">
<label for="username">用户名字</label>
<input type="text" class="form-control" id="username" placeholder="名字">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
</div>
<div class="form-group col-md-12">
<textarea class="form-control" id="comment" placeholder="评论内容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
<hr >
</article>
</div>
{% include 'common/aside.html'%}
{% endblock %}
contact.html 联系我页面
{% extends 'common/base.html' %}
{% block content %}
<h1>联系我</h1>
<div class="well">
有问题联系我呀
</div>
<form>
<div class="form-group">
<label for="username">用户名字</label>
<input type="text" class="form-control" id="username" placeholder="名字">
</div>
<div class="form-group">
<label for="exampleInputEmail1"> 邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
</div>
<div class="form-group">
<label for="subject">主题</label>
<input type="text" class="form-control" id="subject" placeholder="主题">
</div>
<div class="form-group">
<label for="message">消息内容</label>
<textarea class="form-control" id="message" placeholder="评论内容..."></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">提交你的消息</button>
</div>
</form>
{% endblock %}
about.html
{% extends 'common/base.html' %}
{% block content %}
<h1>关于我</h1>
<div class="row" style="margin-bottom: 10px;">
<div class="col-md-3 col-sm-3">
<img src="http://placekitten.com/300/350" class="img-thumbnail img-responsive">
</div>
<div class="col-md-9 col-sm-9">
<p>
任贤齐，1966年6月23日出生于台湾省彰化县，祖籍湖北省武汉市江夏区，中国台湾流行乐男歌手、演员、赛车手、导演 。
</p>
<p>
1990年发行音乐合辑《奔向彩虹》，以歌手身份正式出道。1991年首次出演电影《官兵捉强盗》，进入影视圈。1997年因演唱歌曲《心太软》获得广泛关注 [3] ，并凭借该歌曲荣获香港电台十大劲爆国语金曲铜奖、香港新城精选104电台国语金奖等奖项 [4] 。1998年发行专辑《爱像太平洋》，专辑中的歌曲《对面的女孩看过来》获得HITFM台北之音音乐网100单曲票选活动的第一名，该歌曲也成为了他在歌唱事业上的代表作品；同年出演古装剧《神雕侠侣》饰演杨过。
</p>
<p>
1999年主演的电影《星愿》上映；同年参加马来西亚越野摩托车比赛中夺得季军 [5] 。2000年发行专辑《为爱走天涯》 [6] 。2001年获得亚洲越野摩托车拉力赛冠军 [7] 。2005年主演的动作片《韩城攻略》在中国和韩国同期上映。2010年凭借电影《火龙对决》获得富川电影节最佳男主角。
</p>
<p>
2013年出演剧情片《下午茶》，该片入围第63届柏林电影节“电影大观”单元 [8] 。2014年执导的纪录片《妈祖迺台湾》在台湾上映，该片打破台湾纪录片上映戏院数量 [1] ；同年导演并主演爱情喜剧电影《落跑吧爱情》 [2] 。2016年出演警匪片《树大招风》 [9] ；同年再次回归小荧幕，出演饮食类电视剧《深夜食堂》 [10] 。2019年主演犯罪动作电影《沉默的证人》。
</p>
</div>
</div>
<div class="row text-center photo">
<img src="http://placekitten.com/200/200" >
<img src="http://placekitten.com/200/200" >
</div>
<p class="lead text-center">以下是我的视频课资源</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Python基础</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Django实战开发</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="http://placekitten.com/300/450" class="img-responsive">
</a>
<div class="caption text-center">
<h4>Flask实战开发</h4>
<p>课程简介</p>
<button type="button" class="btn btn-primary">立即购买</button>
</div>
</div>
</div>
</div>
{% endblock %}
页面功能展示
