Environnement CSS créé en 10 minutes avec Django
prologue
Créez un environnement d'étude CSS avec Django.
Si Django est déjà installé, 10 minutes sont attendues.
Je pense que cela n'affectera pas le contenu, mais c'est l'environnement d'exécution OS : Windows10 python : Python 3.7.6 django : 3.1
procédure
Création de dossier, création de projet, création d'application
C:\work\02_la mise en oeuvre>mkdir 20200919_htmlcss
C:\work\02_la mise en oeuvre>cd 20200919_htmlcss
C:\work\02_la mise en oeuvre\20200919_htmlcss>django-admin startproject htmlcss
C:\work\02_la mise en oeuvre\20200919_htmlcss>cd htmlcss
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss>python manage.py startapp test_app
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss>dir
Le lecteur C n'a pas d'étiquette de volume.
Le numéro de série du volume est D48D-C505
C:\work\02_la mise en oeuvre\20200919_htmlcss\répertoire htmlcss
2020/09/19 19:38 <DIR> .
2020/09/19 19:38 <DIR> ..
2020/09/19 19:38 <DIR> htmlcss
2020/09/19 19:38 685 manage.py
2020/09/19 19:38 <DIR> test_app
1 fichier 685 octets
4 répertoires 8,932,749,312 octets d'espace libre
Reconnaissance des applications (ajoutez le nom de l'application défini dans les applications à setting.py)
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss>cd htmlcss
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
from django.apps import AppConfig
class TestAppConfig(AppConfig):
name = 'test_app'
htmlcss/setting.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'test_app.apps.TestAppConfig',
]
Accéder aux paramètres de destination (définis dans le projet urls.py et app urls.py)
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
htmlcss/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('test_app.urls')),
]
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
J'ai copié un fichier.
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py
test_app/urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('', views.index),
]
Spécifiez et créez le code HTML de la destination d'accès
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
test_app/views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
<html>
<head>
</head>
<body>
<p>hello, world</p>
</body>
</html>
Enfin CSS (reconnaissance et création css, appel depuis html)
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
htmlcss/setting.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css
style.css
.T1 {
background-color: #99cc00
}
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
{%load static%}
<html>
<head>
<link href="{% static 'css/style.css'%}" rel="stylesheet">
</head>
<body>
<div class='T1'>
<p>hello, world</p>
</div>
</body>
</html>
Démarrez le serveur Web et vérifiez avec le navigateur
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserver
C:\work\02_la mise en oeuvre\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000
Achevée! !! !!
épilogue
Maintenant, vous pouvez essayer CSS comme vous le souhaitez
Recommended Posts