Django搭建博客网站(三)
Django搭建博客网站(三)
第三篇主要记录view层的逻辑和template.
结构
网站结构决定我要实现什么view.
我主要要用view展示首页,标签页,网站管理员(也就是本人啦)信息页,以及文章详情页.
settings.py
因为到这个阶段需要编写html文件了,但是每一个网页的每一行代码都靠自己去写,各种渲染也靠自己去写的话,太麻烦了,Django提供了html模板功能,可以在settings.py里面进行配置.
# settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
其实在python的众多package里面还有一个叫Jinja2的模块,也是实现html模板功能,不过这里我觉得没必要改成Jinja2,Django本身提供的模板功能已经够用了.
首先创建一个母模板base.html,不过在创建模板之前还需要在post下面创建个templates文件夹专门用来放html模板,这个是必须操作,因为在view的方法里面对模板进行引用时,Django只会在这个叫templates的文件夹下面找模板.然后在templates文件夹下面创建一个post文件夹,post这个app的模板就放在这里面了.
<!-- post/base.html -->
{% load static %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
{% block title %}<title></title>{% endblock %}
</head>
{% block body %}
{% block navbar %}
<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="{% url 'post:index' %}">Chain</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="{% url 'post:index' %}">Home<span class="sr-only">(current)</span></a></li>
<li><a href="{% url 'post:user' 'chain'%}">Profile</a></li>
</ul>
</div>
</div>
</nav>
{% endblock %}
{% block content %}
{% endblock %}
{% endblock %}
没错了,base.html使用了Bootstrap,在第一篇文章做准备工作时就已经将Bootstrap的资源放到了static文件夹下面,所以你这里先加载了static文件夹,紧接着就对bootstrap进行导入.
base.html只是给网站固定实现了一个导航栏,后面每一个继承了这个模板的html模板都会有这个模板,而不需要再把导航栏的代码重写一遍.
可以看到,base.html里面定义了两个block,我们后面写的子模板就是要在content这个block里面写我们想展示的内容.
再看,在导航栏的代码里面有一些可点击的链接,href属性都是用的模板的url方法动态生成的,具体怎么生成就不说了,拿url 'post:user' 'chain'举例说明一下:
url是模板功能提供的处理url的方法post:user可以在post的urls.py里面找到相对应的,post是在urls.py里面的app_name属性,user肯定就是urls.py里面注册url地址时设置的name属性.chain,这个只是传到view层的一个参数而已.
具体的.在实现view逻辑的时候就明白了.
View
首页
首页主要是展示文章列表以及一个历史标签列表.
先从数据库获取所有的文章整合到一个list里面传到html进行显示.同样的,要获取标签列表也是一样的方法.
# post/views.py
class IndexView(generic.TemplateView):
template_name = 'post/index.html'
def get_context_data(self, **kwargs):
context=super().get_context_data(**kwargs)
context['posts']=Post.objects.all()[:3]
context['tags'] = PostTag.objects.all()
return context
def tag(request,tag_name):
tags = PostTag.objects.filter(tag_name=tag_name)
posts = tags[0].post_set.all()
return render(request,'post/tag_index.html',{'posts':posts,'tag_name':tag_name})
对于view逻辑的实现,可以定义一个方法,也可以定义一个类,其实定义成类的话,比定义成方法要好很多,但是因为还不是很熟悉View的各种基类,就先大部分用定义方法的方式了.
在templates/post文件夹下面创建index.html和tag_index.html:
<!-- index.html -->
{% extends 'post/base.html' %}
{% block title %}
<title>Chain's Blog</title>
{% endblock %}
{% block content %}
{% if not posts %}
<div class="container">
<div class="page-header" align="center">
<h1>欢迎来到Chain的博客网站！！！</h1>
</div>
<div align="center">
<h1>Chain don't have blog....Sorry...</h1>
</div>
</div>
{% else %}
<div class="container">
<div class="page-header" align="center">
<h1>欢迎来到Chain的博客网站！！！</h1>
</div>
<div class="col-md-6">
<ul class="list-group">
{% for post in posts %}
<li class="list-group-item" style="box-shadow: 5px 5px 5px #3c3c3c">
<div>
<a href="{% url 'post:post' post.id %}" style="color: black;text-decoration: none">
<h2>{{ post.post_title }}</h2></a>
</div>
<hr>
<div>
<h4>{{ post.post_description }}</h4>
</div>
<br>
<a class="btn btn-success" href="{% url 'post:post' post.id %}">查看全文
</a>
</li>
<br>
{% endfor %}
</ul>
</div>
<div class="col-md-6">
<div class="col-md-4">
</div>
{% if tags %}
<div class="col-md-4" style="box-shadow: 5px 5px 5px #3c3c3c">
<h3>History Tags</h3>
<ul class="list-group">
{% for tag in tags %}
<a href="{% url 'post:tag' tag.tag_name %}" style="text-decoration: none">
<li class="list-group-item"># {{ tag.tag_name }}</li>
</a>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="col-md-4"></div>
</div>
{% endif %}
{% endblock %}
<!-- tag_index.html -->
{% extends 'post/base.html' %}
{% block title %}
<title>Tag:{{ tag_name }}</title>
{% endblock %}
{% block content %}
<div class="col-md-3"></div>
<div class="container col-md-6">
<div class="page-header"><h1 align="center"># {{ tag_name }}</h1></div>
<ul class="list-group">
{% for post in posts %}
<li class="list-group-item" style="box-shadow: 5px 5px 5px #3c3c3c">
<div>
<a href="{% url 'post:post' post.id %}" style="color: black;text-decoration: none">
<h2>{{ post.post_title }}</h2></a>
</div>
<hr>
<div>
<h4>{{ post.post_description }}</h4>
</div>
<br>
<a class="btn btn-success" href="{% url 'post:post' post.id %}">查看全文
</a>
</li>
<br>
{% endfor %}
</ul>
</div>
<div class="col-md-3"></div>
{% endblock %}
可以看见两个模板都继承了base.html,因为在base.html里面已经引入了Bootstrap,所以这里可以直接使用Bootstrap对页面进行渲染.
其他的页面的实现,和首页差不多,只不过在文章详情页面为了加入Markdown有些小细节要注意,下一篇文章再做详细解释.
完章项目已经push到我的github上面.
