Django搭建博客網站(三)
Django搭建博客網站(三)
第三篇主要記錄view層的邏輯和template.
Django搭建博客網站(一)
Django搭建博客網站(二)
結構
網站結構決定我要實現什麽view.
我主要要用view展示首頁,標簽頁,網站管理員(也就是本人啦)信息頁,以及文章詳情頁.
settings.py
因為到這個階段需要編寫html文件了,但是每一個網頁的每一行代碼都靠自己去寫,各種渲染也靠自己去寫的話,太麻煩了,Django提供了html模板功能,可以在settings.py裏面進行配置.
# settings.py
TEMPLATES = [
{
‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘ 其實在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上面.
Django搭建博客網站(三)