极客教程Django – 创建一个多页面的网站
Django是一个基于python的开源框架，用于网络开发。Django允许使用M-T-V（模型-模板-视图）架构模式来创建和部署一个功能性网站。
本文旨在使用Django创建一个多页面的个人简介网站，解释Django框架的所有主要概念和方面。
注意：下面的文章中的HTML和CSS代码是初级的。
实现:
首先，在任何支持Python的IDE中创建一个新项目。
- 打开终端，用以下命令开始安装Django。
pip install django
- 用以下命令创建一个Django项目（我们称之为profile ）。
django-admin startproject Profile
- 一旦项目被完全创建，导航到该项目文件。
cd Profile
- 在项目中创建一个应用程序（让我们称它为基地）（这对大型多面体网站很方便）。
django-admin startapp base
导航到profile/profile目录下的settings.py文件，寻找一个名为INSTALLED_APPS的列表。
- 在列表的最后添加以下元素。(这是必要的，因为该项目是与简介项目相联系的基本应用)
'base.apps.BaseConfig',
向下滚动到settings.py文件中一个名为TEMPLATED的列表中
- 在 “DIRS “列表中添加以下元素。(这对于添加HTML代码是必要的）
BASE_DIR / 'templates',
进一步向下滚动，你会发现一个名为STATIC_URL的变量。
- 在STATIC_URL变量后一行添加以下列表
STATICFILES_DIRS = [
BASE_DIR / 'static'
]
这就是你的settings.py应该是的样子。
"""
Django settings for Profile project.
Generated by 'django-admin startproject' using Django 4.0.2.
For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-%y9#-d_f74fdq6t6qal(51b4-j1v7f)g+c&7cb1g_wuz_94xq%'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'base.apps.BaseConfig',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Profile.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
BASE_DIR / 'templates',
],
'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',
],
},
},
]
WSGI_APPLICATION = 'Profile.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / 'static'
]
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
现在，导航到Profile/Profile目录下的urls.py文件。
- 在文件中导入一个额外的函数。
from django.urls import include
- 在urlpatterns列表中添加一个额外的元素。
path('', include('base.urls')),
这就是你的urls.py文件应该是的样子。
"""Profile URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/4.0/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('base.urls')),
]
现在，导航到Profile/base目录下的views.py文件。
在这里，我们创建了不同的页面，并分配了各自的HTML文件（我们将在后面创建）。
- 将以下代码粘贴到_views.py _文件中。
from django.shortcuts import render
def home(request):
return render(request, "home.html")
def projects(request):
return render(request, "projects.html")
def contact(request):
return render(request, "contact.html")
在Profile/base目录下创建一个名为urls.py的新文件。
这个文件创建了指向views.py文件中提到的各自网址的URL。
- 在_base/urls.py _文件中添加以下代码。
from django.urls import path
from . import views
urlpatterns = [
path("", views.home, name="home"),
path("projects/", views.projects, name="projects"),
path("contact/", views.contact, name="contact"),
]
现在，对于静态文件（包含.css文件和图片的文件）。
在主Profile项目文件中创建一个名为static的新目录。static文件应该与manage.py文件处于同一层次。
在这个文件中，再创建两个目录，分别称为样式和图像
- 在style目录中添加一个_style.css _文件，并在style.css文件中添加以下代码。
navbar {
width: 100%;
margin:0px 0;
}
navbar ul{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
navbar ul li{
width: 33%;
float: left;
}
navbar ul li a{
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
padding: 20px 0;
display: block;
width: 100%;
background-color: rgb(160, 236, 145);
}
navbar ul li a:hover {
background-color: rgb(11, 221, 29);
}
.home{
margin-right: 5%;
margin-top: 15px;
margin-left: 15px;
margin-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 15px;
border-radius: 10px;
box-shadow: 15px 15px 15px black;
text-align: justify;
color: white;
background-image: linear-gradient(rgb(129, 196, 235), rgb(5, 44, 151));
}
.project-area {
background-repeat: no-repeat;
background-position: left;
box-sizing: border-box;
}
.project-item {
width: 75%;
margin-top:5px;
margin-bottom:15px;
margin-left: 5%;
margin-right: 5%;
padding-top:5px;
padding-bottom:5px;
padding-left: 30px;
padding-right: 30px;
border-radius: 10px;
box-shadow: 10px 10px 40px gray;
text-align: justify;
color: white;
background-color: black;
}
#project {
border-left: 15px solid;
border-image: linear-gradient(purple, tomato);
border-image-slice: 1;
}
#contact .contact-item {
background-color: aquamarine;
float: left;
width: 20%;
padding: 20px;
text-align: center;
border-radius: 10px;
padding: 30px;
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 15px 15px 15px black;
}
在 “图像 “目录下添加一张自己的图片，并将其重命名为 “简介_img”。
对于HTML文件，在主Profile项目文件中创建一个名为templates的新目录。模板文件应该与manage.py文件处于同一层次。
- 为导航栏创建一个名为navbar.html的文件，并在其中添加以下代码。
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<navbar>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</navbar>
<hr>
上述代码中的前两行是必要的，以从静态目录中加载CSS代码，并将CSS文件中的代码链接到HTML文件中。
- 创建一个名为home.html的文件，并在其中添加以下代码。
{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Home</title>
<section class="home">
<center>
<font size="6">
ABOUT ME
</font>
<img src="{% static 'images/Profile_img.png' %}" width="200" height="200">
<font size="4">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</font>
</center>
</section>
上述代码中的第一行用于直接将导航栏添加到当前页面。
- 创建一个名为projects.html的文件，并在其中添加以下代码。
{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Projects</title>
<section class="project-area">
<center>
<font size="6">
PROJECTS
</font>
<div id="project" class="project-item">
<h2>PROJECT 1 NAME</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum dignissim, sapien et efficitur vulputate,
felis blandit metus, vitae eleifend nisl justo sed nunc.
Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
Morbi eget nisl non tellus posuere iaculis.
Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
Sed pellentesque sem a diam rhoncus, eu semper neque efficitur.
</div>
<div id="project" class="project-item">
<h2>PROJECT 2 NAME </h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum dignissim, sapien et efficitur vulputate,
felis blandit metus, vitae eleifend nisl justo sed nunc.
Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
Morbi eget nisl non tellus posuere iaculis.
Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
Sed pellentesque sem a diam rhoncus, eu semper neque efficitur.
</div>
</div>
</center>
</section>
- 创建一个名为 contact.html 的文件，并在其中添加以下代码。
{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Contact</title>
<section id="contact">
<center>
<font size="6">
CONTACT INFO
</font>
<div class="contact-item">
<h1>Phone Number</h1>
<h2>+xx-xxxxxxxxxx</h2>
</div>
</div>
<div class="contact-item">
<h1>Email</h1>
<h2>xyz@example.com</h2>
</div>
</div>
<div class="contact-item">
<h1>Address</h1>
<h2>City, State, Country</h2>
</div>
</div>
</div>
</div>
</center>
</section>
现在，对于最后一步，打开一个新的终端，运行以下命令。
cd profile
python manage.py runserver