Django搭建博客网站(三)

时间 2019-11-26

标签 django 搭建博客网站栏目 Python 繁體版

原文原文链接

Django搭建博客网站(三)

第三篇主要记录view层的逻辑和template.css

Django搭建博客网站(一)html

Django搭建博客网站(二)python

结构

网站结构决定我要实现什么view.git

我主要要用view展现首页,标签页,网站管理员(也就是本人啦)信息页,以及文章详情页.github

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自己提供的模板功能已经够用了.django

首先建立一个母模板base.html,不过在建立模板以前还须要在post下面建立个templates文件夹专门用来放html模板,这个是必须操做,由于在view的方法里面对模板进行引用时,Django只会在这个叫templates的文件夹下面找模板.而后在templates文件夹下面建立一个post文件夹,post这个app的模板就放在这里面了.bootstrap

<!-- 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进行导入.app

base.html只是给网站固定实现了一个导航栏,后面每个继承了这个模板的html模板都会有这个模板,而不须要再把导航栏的代码重写一遍.post

能够看到,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上面.