Django Bootstrap开发笔记02 - 模板

朱雀 2022-06-02 06:45 223阅读 0赞

### 一、创建应用 ###

1.基于`mysite` 项目下创建名为`personal`的应用

python manage.py startapp personal

2.修改`mysite/settings.py`中的`INSTALLED_APPS`列表

INSTALLED_APPS = [
        'polls',
        'personal',
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',4
        'django.contrib.staticfiles',
    ]

3.修改`mysite/personal/views.py`视图，使用`render()`方法调用`personal/home.html`网页

from django.shortcuts import render
    
    def index(request):
        return render(request, 'personal/home.html')

4.在`mysite/personal/`文件夹下创建`urls.py`文件来管理路由，添加内容入下

from django.conf.urls import url, include
    from . import views
    
    urlpatterns = [
        url(r'^$', views.index, name='index')
    ]

5.修改`mysite/mysite/urls.py`文件来管理路由，内容入下

from django.contrib import admin
    from django.urls import path, include
    from django.conf.urls import url, include
    
    urlpatterns = [
        url('admin/', admin.site.urls),
        # '^s'表示为根目录
        url('^$', include('personal.urls'))
    ]

### 二、添加模板 ###

1.在`mysite/personal/`文件夹下创建`templates`文件夹，用于存放应用程序模板  
2.在`mysite/personal/templates/`文件夹下创建`personal`文件夹，用于存放名为`personal`的应用程序的模板内容  
3.创建`header.html`模板

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Harrison Kinsley</title>
    </head>
    <body class="body" style="background-color:#f6f6f6">
        <div>
            {% block content %}
            {% endblock %}
        </div>
    </body>
    </html>

4.创建`home.html`其内容是继承`header.html`，代码如下：

{% extends "personal/header.html" %}
    {% block content %}
    <p>Hey! Welcome to my website</p>
    {% endblock %}

### 三、运行 ###

1.使用命令行进入项目根目录，然后输入以下代码运行服务器：

python manage.py runserver

2.在浏览器输入`http://127.0.0.1:8000/`运行结果如下所示：

Hey! Welcome to my website

### 四、扩展 ###

1.在`/templates/personal`文件夹下创建`includes`文件夹  
2.创建新建的文件下添加`htmlsnippet.html`文件，内容入下：

{% block content %}
    <p>Look at me, I am include.</p>
    {% endblock %}

3.修改`home.html`，在其内容里添加一个模板内容

{% extends "personal/header.html" %}
    {% block content %}
    <p>Hey! Welcome to my website</p>
    {% include "personal/includes/htmlsnippet.html" %}
    {% endblock %}

4.启动服务器，在浏览器输入`http://127.0.0.1:8000/`  
5.运行结果如下

Hey! Welcome to my website
    Look at me, I am include.