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;![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369619/5f4c27cb-8697-0236-f655-2ec2beaf3805.png)

}

.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/にアクセスしてみる。

006.png

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

Une série d'ingénieurs d'infrastructure amateurs touchant Django avec Docker ⑤: View, Template, CSS
Une série d'ingénieurs d'infrastructure amateurs touchant Django avec Docker ③: administrateur Django
Une série d'ingénieurs d'infrastructure amateurs touchant Django avec Docker (2): création d'un modèle
Déployer l'application Django avec Docker
Créer un filtre avec un modèle django
[Python] Créer un environnement de développement Django avec Docker
Voir les détails des données de séries chronologiques dans Remotte
Remarque DJango: depuis le début (création d'une vue à partir d'un modèle)
Un mémo sur la création d'une application Django (Python) avec Docker
Lancer Django sur un conteneur Docker à l'aide de docker-compose up
Créez un environnement de développement avec Poetry Django Docker Pycharm
Impressions de toucher Django
Créez un environnement de développement Django avec Docker! (Docker-compose / Django / postgreSQL / nginx)
[Memo] Construire un environnement de développement pour Django + Nuxt.js avec Docker
[Django] Créez rapidement un environnement de développement de conteneur Django (Docker) avec PyCharm
Créer une application Todo avec Django ① Créer un environnement avec Docker