Une série d'ingénieurs d'infrastructure amateurs touchant Django avec Docker ⑤: View, Template, CSS
TL;DR Poursuite de L'ingénieur d'infrastructure amateur touche Django avec Docker ④: urls.py. Si vous voulez lire à partir de 1, ↓ ici. Ingénieur d'infrastructure amateur touche Django avec Docker (1): Make Django avec Docker Cette fois aussi, je jouerai avec django tout en faisant un échantillon de Django Girls. En vue, les données reçues via le modèle peuvent être transmises au modèle et d'autres traitements peuvent être effectués. Le modèle est la partie qui ajuste l'apparence. html et CSS correspondent à ce modèle. Tout d'abord, regardons la structure en créant une vue simple.
view
① Modifier views.py
views.py
views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
Commentaire bien compris
from django.shortcuts import render
La fonction raccourcis définit les fonctions et les classes nécessaires pour relier chaque niveau de MTV dans Django. Cette fois, nous importons une fonction appelée render qui rend le modèle spécifié en tant qu'argument et renvoie HttpResponse.
from django.utils import timezone
from .models import Post
Le fuseau horaire, qui fournit les fonctions liées au temps incluses dans la fonction utilitaire, et le modèle Post créé lors de la création du modèle sont importés. J'ai abordé la position debout de la vue dans la partie 2, mais comme elle a également pour rôle d'acquérir les données à l'aide de la fonction de modèle et de les transmettre au modèle, importez le modèle que vous souhaitez utiliser dans la vue et utilisez le modèle. Doit être livré en option.
def post_list(request):
posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
return render(request, 'blog/post_list.html', {'posts': posts})
La partie définition de la fonction post_list. Rappelez-vous que vous avez spécifié views.post_list lorsque vous avez écrit urls.py la dernière fois? Lorsqu'une requête arrive à urls.py, la fonction dans views.py spécifiée en fonction du chemin est appelée et la requête est transférée. Ensuite, après avoir effectué le traitement nécessaire, le modèle est rendu et une réponse est renvoyée. Dans la deuxième ligne, en utilisant le modèle Post, published_date récupère les articles plus tôt que l'heure actuelle, les trie par ordre chronologique et les transmet à blog / post_list.html.
Template
① Créez un répertoire pour html
cd ~/blog/template
mkdir blog
Il existe un répertoire appelé template sous le répertoire du blog, qui est le répertoire de l'application, alors créez un autre répertoire appelé blog sous ce répertoire. Vous vous demandez peut-être pourquoi sa structure est si compliquée, mais lors de la gestion d'une application à grande échelle, il semble préférable de séparer les répertoires pour chaque fonction, même pour le html.
② Modifier post_list.html
post_list.html
blog/template/blog/post_list.html
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<div class="date">
<p>published: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
Comme ce n'est pas le but d'expliquer la partie de base du HTML, seule la partie importante sera expliquée ici.
Commentaire bien compris
{% load static %}
{% load static%} est une description du chargement de contenu statique tel que le fichier CSS décrit plus loin.
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Le CSS à lire est spécifié ici.
{% for post in posts %}
<div class="post">
<div class="date">
<p>published: {{ post.published_date }}</p>
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
Ce à quoi je voudrais faire attention dans cette partie est la partie où l'élément du modèle Post est spécifié par {{post.OBJECT}}. Les publications obtenues à l'aide du modèle de publication sont transmises à ce modèle dans le fichier views.py mentionné ci-dessus, de sorte qu'elles peuvent être appelées facilement comme ceci. Les publications acquises par le modèle Post étant sous la forme d'une liste, il est possible de réaliser plusieurs affichages en utilisant l'instruction for.
③ Créez un répertoire pour CSS
cd ~/blog/static
mkdir css
④ Modifier blog.css
blog/static/css/blog.css
.page-header {
background-color: #C25100;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1, h2, h3, h4 {
font-family: 'Lobster', cursive;
}
.date {
color: #828282;
}
.save {
float: right;
}
.post-form textarea, .post-form input {
width: 100%;
}
.top-menu, .top-menu:hover, .top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h2 a, .post h2 a:visited {
color: #000000;
}
L'explication du CSS n'est pas le point principal, donc j'espère que vous pourrez le copier en reconnaissant que vous écrivez quelque chose comme ça afin de le façonner. Il est recommandé d'étudier le HTML et le CSS dans un livre qui lui est dédié.
Lancement d'un site d'affichage de blog
docker-compose up
À ce stade, votre site Web doit être complet (bien qu'il ne s'affiche que).
Allez dans le répertoire où se trouve dockercompose.yaml et utilisez docker-compose up pour le démarrer.
docker-compose up
http://[IPADDRESS]:8000/にアクセスしてみる。
C'était affiché! Soit dit en passant, le message «This is test post» a été publié en utilisant la page d 'administration expliquée dans la partie 3. Pour que les utilisateurs puissent publier, ils doivent créer une page avec un formulaire de publication. Lors de la création de formulaires, Django propose une fonctionnalité pratique appelée formulaires. L'histoire reviendra la prochaine fois.
Tout d'abord, est-ce une pause? ..
à suivre
Recommended Posts