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上面.