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